Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
750
Line up on centers?
posted

For the life of me I can't figure out how to get the text to line up with the center of an image.  I also can't figure out how to get the corners to round correctly. 

in the attached image, the button on the left is the one I'm trying to duplicate and the one on the right my WebImageButton.    I can live without the rounded corners for now but the text not being centerd isn't going to fly.

There is probably some text padding setting somewhere, but I can't find it. 

Any guidence would be great.

 

thanks

  • 24497
    Suggested Answer
    posted

    Hi,

    When rounded corners are enabled, then the <table> with 2 <tr>s is used, where top row has most content and bottom row (HeightOfBottomEdge) is few pixels high and shows bottom rounded corners. So, in normal html flow-layout conditions, the content will not be rendered below the top <tr>.

    To ensure that correct default rounded background is used, the button should have pixel height, or application should provide custom images for RoundedCorners property.

    To display image at the center, the overall height of button should be not less than height of image plus height of bottom row multiplied by 2.

    To move text vertically relative to image, the Alignments.VerticalImage can be used. If that is not enough, then the only option: is to adjust locations of html elements on client. To get references to html elements the getElementAt(index) member function can be used.

    Below example shows 3 options. First button puts image and text to bottom-left corner with paddingLeft=3px, sets on client position of text/span to absolute and adjusts vertical location of text by negative marginTop.
    Second button uses VerticalImage=Bottom, so, text appears at the top relative to image.
    Third button uses all defaults, probably like yours button.

    <script type="text/javascript">
    function WebImageButton1_Initialize(oButton)
    {
     //var img = oButton.getElementAt(4);
     var span = oButton.getElementAt(3);
     span.style.position = 'absolute';
     span.style.marginTop = '-4px';
    }
    </script>
    <igtxt:WebImageButton ID="WebImageButton1" runat="server" Text="Continue" Width="99px" Height="24px">
      <Appearance>
         <ButtonStyle>
           <Padding Left="3px" />
       </ButtonStyle>
        <Image Url="./images/next_up.gif" />
      </Appearance>
      <RoundedCorners RenderingType="FileImages" />
      <ClientSideEvents Initialize="WebImageButton1_Initialize" />
     <Alignments VerticalImage="Bottom" HorizontalAll="Left" />
    </igtxt:WebImageButton>
    <igtxt:WebImageButton ID="WebImageButton2" runat="server" Text="Continue" Width="99px" Height="24px">
      <Appearance>
        <Image Url="./images/next_up.gif" />
      </Appearance>
      <RoundedCorners RenderingType="FileImages" />
      <Alignments VerticalImage="Bottom" />
    </igtxt:WebImageButton>
    <igtxt:WebImageButton ID="WebImageButton3" runat="server" Text="Continue" Width="99px" Height="24px">
      <Appearance>
        <Image Url="./images/next_up.gif" />
      </Appearance>
      <RoundedCorners RenderingType="FileImages" />
    </igtxt:WebImageButton>