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
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
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.