Hi. I've got two RadButton's side-by-side and display okay in FireFox but not IE7/8. My main container is a DIV and fills the middle part of the page as a percentage. I've got other controls in there like RadTextBoxes and RadComboBoxes that don't have any issues. To get it to display properly, I need to place each button inside their own DIV with a set width and float them. Regular buttons don't have the same problem. I've attached some screens which best describes the problem. I'm using 2010_3_1215. Thanks.
4 Answers, 1 is accepted
0
Hi Daniel,
I din`t succeed to reproduce the issue. I have used the following code:
This makes me to think that you have set some global styles to elements like A or INPUT and they are applied to RadButtona and breaks it:
You could try to use the following CSS in the head section of your page to fix the A element button width:
Kind regards,
Bojo
the Telerik team
I din`t succeed to reproduce the issue. I have used the following code:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><!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"> .wrapper { width: 770px; margin: auto; border: 1px solid red; height: 500px; } .button { width: 100%; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div class="wrapper"> <div class="button"> <telerik:RadButton ID="rb1" runat="server" Text="OK" Width="50%"> </telerik:RadButton> <telerik:RadButton ID="RadButton1" runat="server" Text="Cancel"> </telerik:RadButton> </div> </div> </form></body></html>This makes me to think that you have set some global styles to elements like A or INPUT and they are applied to RadButtona and breaks it:
You could try to use the following CSS in the head section of your page to fix the A element button width:
.rbSkinnedButton {width: auto !important;}Kind regards,
Bojo
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Daniel
Top achievements
Rank 1
Iron
Rank 1
Iron
answered on 17 Dec 2010, 12:01 AM
Thanks for the reply Bojo. I can reproduce the problem with the code below. After measuring the gap, it looks like button is inheriting the 274px margin I've applied to the layout. On the RadButton, I've tried zeroing the margins and applied the style you posted above but nothing changes.
What I did notice is that if I zero the margins in the second DIV below <div style="margin: 0 274px 0 274px;"> --> <div style="margin: 0;"> or change it to padding <div style="padding: 0 274px 0 274px;"> it comes good but the first one destroys the layout. Thanks.
Daniel
What I did notice is that if I zero the margins in the second DIV below <div style="margin: 0 274px 0 274px;"> --> <div style="margin: 0;"> or change it to padding <div style="padding: 0 274px 0 274px;"> it comes good but the first one destroys the layout. Thanks.
Daniel
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <div style="float: left; width: 100%;"> <div style="margin: 0 274px 0 274px;"> <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton"> </telerik:RadButton> <br /> <br /> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> </div> <div style="float: left; width: 274px; margin-left: -100%; background: #ededed;"> <h1> LEFT COLUMN</h1> </div> <div style="float: left; width: 274px; margin-left: -274px; background: #ededed;"> <h1> RIGHT COLUMN</h1> </div> 0
Daniel
Top achievements
Rank 1
Iron
Rank 1
Iron
answered on 17 Dec 2010, 12:05 AM
Hi Bojo. After a bit of testing, I can live with using padding on that DIV. It behaves the same in both IE and FireFox. It would be good to know why IE is applying that margin to the RadButton. Thanks.
Daniel
Daniel
0
Hello Daniel,
It`s a known issue with IE6 and IE7. This problem was reported by a couple of customers and I am aware of it. Unfortunately it is not related to the RadButton control in a way that we could fix it in the code. It is good that you could use the padding alternative. However if you have the same problem and you can not use padding for some reasons, the problem could be solved by setting overflow: auto to the element that contains the broken button. Bellow is the fix applied to the code provided by you in your previous post:
Kind regards,
Bojo
the Telerik team
It`s a known issue with IE6 and IE7. This problem was reported by a couple of customers and I am aware of it. Unfortunately it is not related to the RadButton control in a way that we could fix it in the code. It is good that you could use the padding alternative. However if you have the same problem and you can not use padding for some reasons, the problem could be solved by setting overflow: auto to the element that contains the broken button. Bellow is the fix applied to the code provided by you in your previous post:
<!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"> </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div style="float: left; width: 100%;"> <div style="margin: 0 274px 0 274px; overflow: auto;"> <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton"> </telerik:RadButton> <br /> <br /> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> </div> <div style="float: left; width: 274px; margin-left: -100%; background: #ededed;"> <h1> LEFT COLUMN</h1> </div> <div style="float: left; width: 274px; margin-left: -274px; background: #ededed;"> <h1> RIGHT COLUMN</h1> </div> </form></body></html>Kind regards,
Bojo
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.