asp:Button Top/Left positions

[TonyG]

I have a button defined as follows:

<asp:Button  ID="btnRunReport"  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"> </asp:Button>

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:

<A class="rfdSkinnedButton RadForm_Forest rfdInputDisabled"  id="_rfdSkinnedctl00_Master_ContentPlaceHolder1_CurrentUC_btnRunReport"  style="WIDTH: 114px" href="javascript:void(0)"> <SPAN class="rfdOuter"><SPAN class="rfdInner">Run Report</SPAN></SPAN> </A>

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">
 .rfdSkinnedButton
 {
   top: 282px;
   left: 852px;
 }
</style>

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;">

<asp:Button     ID="btnRunReport" runat="server" Text="Run Report"     Height="21px" Width="114px"     Font-Bold="True" OnClick="btnRunReport_Click" TabIndex="50">   </asp:Button>

</div>

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.

[Martin]

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.

[TonyG]

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.

Thanks.