Hello Telerik Community,
I'm seem to have more problem with the button with telerik sizing issue. It seem to be ignoring the width property when set.
<td ><telerik:RadSpell ID="RadSpell1" runat="server"
ControlsToCheck="txtNotes,txtRoute" Visible="False" Width="80px"
WordIgnoreOptions="None" />
</td>
The total width is about 90px in (IE) (see screen shoots).
The total width is about 96px in (Firefox) (see screen shoots).
It seem the only way to fix this is to add the width in the <td width=80px>.
I'm seem to have more problem with the button with telerik sizing issue. It seem to be ignoring the width property when set.
<td ><telerik:RadSpell ID="RadSpell1" runat="server"
ControlsToCheck="txtNotes,txtRoute" Visible="False" Width="80px"
WordIgnoreOptions="None" />
</td>
The total width is about 90px in (IE) (see screen shoots).
The total width is about 96px in (Firefox) (see screen shoots).
It seem the only way to fix this is to add the width in the <td width=80px>.
5 Answers, 1 is accepted
0
Hi,
This is a browser behavior, because RadSpell button is rendered as a standard <input type="button" name="name" value="Spell Check" /> button on the page and you will experience the same issue with the input button.
IE and Firefox have different padding for the text inside the input buttons which is causing the different width of the button in both browsers. In addition the width of the Spell Check text along with the padding exceeds the specified width of 80px.
If you would like you can set a different shorter string for the spellcheck button by setting the ButtonText="test" property or set the ButtonType property to "ImageButton" and render only an icon as discussed in this forum thread: Rad Spell custom Image.
Another option is to apply different width via CSS class to the input of RadSpell using the following code:
Regards,
Rumen
the Telerik team
This is a browser behavior, because RadSpell button is rendered as a standard <input type="button" name="name" value="Spell Check" /> button on the page and you will experience the same issue with the input button.
IE and Firefox have different padding for the text inside the input buttons which is causing the different width of the button in both browsers. In addition the width of the Spell Check text along with the padding exceeds the specified width of 80px.
If you would like you can set a different shorter string for the spellcheck button by setting the ButtonText="test" property or set the ButtonType property to "ImageButton" and render only an icon as discussed in this forum thread: Rad Spell custom Image.
Another option is to apply different width via CSS class to the input of RadSpell using the following code:
<!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"
>
#RadSpell1_SpellCheck
{
width: 86px !important;
}
#RadSpell1_SpellCheck
{
width: 90px\9 !important;
}
/*IE fix*/
</
style
>
</
head
>
<
body
>
<
form
id
=
"DynamicForm1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"Scriptmanager1"
runat
=
"server"
/>
<
telerik:RadSpell
ID
=
"RadSpell1"
runat
=
"server"
WordIgnoreOptions
=
"None"
/>
</
form
>
</
body
>
</
html
>
Regards,
Rumen
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
0
Paul
Top achievements
Rank 1
answered on 05 Jan 2012, 08:01 PM
Also why doesn't the RadSpell (and other telerik controls) stay inline with the normal buttons (WebControls.Button)? I would have to put into a table, so it would stay inline with the other controls.
Also I'm trying to change it with the last option in firefox to 90px it doesn't want to changed, I keep getting 94px instead of 90px.
Also I'm trying to change it with the last option in firefox to 90px it doesn't want to changed, I keep getting 94px instead of 90px.
0
Hi,
1) The observed behavior is due to the DIV wrapper of the RadSpell control which is a block element. To render it inline with the other control you should apply the following styles to it:
2) You should increase the value of the width properties, e.g.
Here is the complete solution:
Kind regards,
Rumen
the Telerik team
1) The observed behavior is due to the DIV wrapper of the RadSpell control which is a block element. To render it inline with the other control you should apply the following styles to it:
#RadSpell
1
{
display
:inline-
block
;
zoom:
1
;
*
display
:
inline
;
}
2) You should increase the value of the width properties, e.g.
#RadSpell
1
_SpellCheck
{
width
:
92px
!important
;
}
#RadSpell
1
_SpellCheck
{
width
:
93px
\
9
!important
;
}
/*IE fix*/
Here is the complete solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
id
=
"Head1"
runat
=
"server"
>
<
title
></
title
>
<
style
type
=
"text/css"
>
#RadSpell1
{
display:inline-block;
zoom: 1;
*display: inline;
}
#RadSpell1_SpellCheck
{
width: 92px !important;
}
#RadSpell1_SpellCheck
{
width: 93px\9 !important;
}
/*IE fix*/
</
style
>
</
head
>
<
body
>
<
form
id
=
"DynamicForm1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"Scriptmanager1"
runat
=
"server"
/>
<
telerik:RadSpell
ID
=
"RadSpell1"
runat
=
"server"
WordIgnoreOptions
=
"None"
/><
asp:Button
runat
=
"server"
ID
=
"button1"
Text
=
"asp button"
/><
input
type
=
"button"
value
=
"Button"
/>
</
form
>
</
body
>
</
html
>
Kind regards,
Rumen
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
0
Paul
Top achievements
Rank 1
answered on 09 Jan 2012, 03:44 PM
Hello Rumen,
Are those typo in the css or are they suppose to be like that?
Are those typo in the css or are they suppose to be like that?
0
Hi,
Actually 9\ is not a typo but a hack for Internet Explorer, which means that this CSS setting will be applied to IE only. You can find information about it in the following article: IE CSS backslash 9 hack beats the star hack.
All the best,
Rumen
the Telerik team
Actually 9\ is not a typo but a hack for Internet Explorer, which means that this CSS setting will be applied to IE only. You can find information about it in the following article: IE CSS backslash 9 hack beats the star hack.
All the best,
Rumen
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