This is a migrated thread and some comments may be shown as answers.

Radbutton/Spell Button size don't work

5 Answers 105 Views
Spell
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 04 Jan 2012, 10:09 PM
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>.

5 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 05 Jan 2012, 02:46 PM
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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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.
0
Rumen
Telerik team
answered on 09 Jan 2012, 02:22 PM
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:

#RadSpell1
{
    display:inline-block;
    zoom: 1;
    *display: inline;
}

2) You should increase the value of the width properties, e.g.

#RadSpell1_SpellCheck
{
    width: 92px !important;
}
#RadSpell1_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">
<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?
0
Rumen
Telerik team
answered on 09 Jan 2012, 04:05 PM
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
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
Tags
Spell
Asked by
Paul
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Paul
Top achievements
Rank 1
Share this question
or