Radbutton/Spell Button size don't work

6 posts, 0 answers
  1. Paul
    Paul avatar
    21 posts
    Member since:
    Sep 2011

    Posted 04 Jan 2012 Link to this post

    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>.
  2. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 05 Jan 2012 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Paul
    Paul avatar
    21 posts
    Member since:
    Sep 2011

    Posted 05 Jan 2012 Link to this post

    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.
  5. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 09 Jan 2012 Link to this post

    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
  6. Paul
    Paul avatar
    21 posts
    Member since:
    Sep 2011

    Posted 09 Jan 2012 Link to this post

    Hello Rumen,
        Are those typo in the css or are they suppose to be like that?
  7. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 09 Jan 2012 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017