asp:Button Top/Left positions

3 posts, 0 answers
  1. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 11 May 2009 Link to this post

    I have a button defined as follows:

     Style="z-index: 103;position: absolute; top:280px; left:850;"
     runat="server" Text="Run Report"
     Height="21px" Width="114px"
     Font-Bold="True" OnClick="btnRunReport_Click" TabIndex="50">

    Note the top and left positions are indicated in the inline style, and there is a Height attribute as well. When the control is finally rendered, it looks like this:
    <class="rfdSkinnedButton RadForm_Forest rfdInputDisabled"
     style="WIDTH: 114px" href="javascript:void(0)">
    <SPAN class="rfdOuter"><SPAN class="rfdInner">Run Report</SPAN></SPAN>

    Now note how the stying has been stripped down to the width, so positioning is left to the CSS, including height.
    If I assign my own CSS class, I get my top/left but no skinning. If I don't assign a class, the default position is the top/left corner of the button's container.

    So I added the following (bad bad) code to the head of my page, but it doesn't have any effect:
    <style type="text/css">  

    Using the IE Developer toolbar, I see the style is included in the aggregated styling, but the control still appears in the top corner of the page.

    To fix this I did the following:
    <div Style="z-index: 103; position: absolute; top: 280px;left: 850;">  
    ID="btnRunReport" runat="server" Text="Run Report"
        Height="21px" Width="114px"
        Font-Bold="True" OnClick="btnRunReport_Click" TabIndex="50">

    Do we really need to nest buttons in Div tags? Am I missing something obvious? Is there a bug in the RadControls skinning process where the top, left, and height style/attributes are left out?  I disabled my RadFormDecorator for this exercise but it didn't seem to make a difference.

    Thank you kindly.
  2. Martin
    Martin avatar
    585 posts

    Posted 12 May 2009 Link to this post

    Hello TonyG,

    Although you have applied the same top and left positions to the skinned button, these properties will not apply unless you set position: absolute to it (if you remove the position: absolute from your real button, you will notice that the cordinates' settings will stop working). To put things to work, simply add position: absolute to the skinned button. The CSS top, right, bottom and left properties do not work on elements that miss position: absolute | fixed | relative.

    As of the height attribute, at present it is not respected by FormDecorator because of the rounded corners (the images that we used to emulate rounded corners cannot be stretched).

    Kind regards,
    Martin Ivanov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 12 May 2009 Link to this post

    You are correct that I did not use position:absolute in the CSS, but please do note that it was in the original asp:Button code that wasn't being skinned properly.

    As to the height - no problem.

Back to Top