Stephan Reisinger
Top achievements
Rank 1
Rank 1
Stephan Reisinger
asked on 08 Mar 2012, 04:46 PM
Good afternoon,
I am using the CSS div layout from 960.gs. Works like a charm with all ASP.Net AJAX controls apart RadButton.
When I set the button width to 100% to fill the div it always edges out ( see attached image ).
How can I avoid that ?
TIA,
S.R.
I am using the CSS div layout from 960.gs. Works like a charm with all ASP.Net AJAX controls apart RadButton.
When I set the button width to 100% to fill the div it always edges out ( see attached image ).
How can I avoid that ?
TIA,
S.R.
1 Answer, 1 is accepted
0
Hi,
The issue occurs because of the default padding-left and padding-right of 4px, that is calculated within the 100% width. In order to remove it, I would suggest to create a CssClass for that case when you want the button to be 100%, and to remove the padding:
The padding is necessary for the button when width is auto to prevent text to be merged with the borders. When you set width in pixels for the button the padding is removed, but when it is in percents it is not removed. We have log that issue and it will be fixed. For the time being, you could use the solution above.
Regards,
Bozhidar
the Telerik team
The issue occurs because of the default padding-left and padding-right of 4px, that is calculated within the 100% width. In order to remove it, I would suggest to create a CssClass for that case when you want the button to be 100%, and to remove the padding:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> .rbLinkButton.fixedWidth { padding: 0; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div style="width: 200px;"> <input type="text" style="width: 100%; border: 1px solid #eee; margin-bottom: 5px;" /> <telerik:RadButton runat="server" ButtonType="LinkButton" Text="Login" Skin="Metro" Width="100%" CssClass="fixedWidth"></telerik:RadButton> </div> </form></body></html>The padding is necessary for the button when width is auto to prevent text to be merged with the borders. When you set width in pixels for the button the padding is removed, but when it is in percents it is not removed. We have log that issue and it will be fixed. For the time being, you could use the solution above.
Regards,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.