Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Spell > Radbutton/Spell Button size don't work

Not answered Radbutton/Spell Button size don't work

Feed from this thread
  • Paul avatar

    Posted on Jan 4, 2012 (permalink)

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

    Reply

  • Rumen Rumen admin's avatar

    Posted on Jan 5, 2012 (permalink)

    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

    

    
				
    
				
			
    
			
    
				
				
				Reply
			
    
		
    • 
		
    
	
		

    
	
		
  • 
			
    
				 
						
						Paul
						
                        avatar
					
					
				
			
    
			
    
				
    
					
					Posted
					on Jan 5, 2012
					(permalink)
				
    
				
    
					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.
				
    
				
			
    
			
    
				
				
				Reply
			
    
		
    • 
		
    
	
		

    
	
		
  • 
			
    
				 
						
						Rumen
						Rumen
                        admin's avatar
					
					
				
			
    
			
    
				
    
					
					Posted
					on Jan 9, 2012
					(permalink)
				
    
				
    
					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

    

    
				
    
				
			
    
			
    
				
				
				Reply
			
    
		
    • 
		
    
	
		

    
	
		
  • 
			
    
				 
						
						Paul
						
                        avatar
					
					
				
			
    
			
    
				
    
					
					Posted
					on Jan 9, 2012
					(permalink)
				
    
				
    
					Hello Rumen,
    
    Are those typo in the css or are they suppose to be like that?
				
    
				
			
    
			
    
				
				
				Reply
			
    
		
    • 
		
    
	
		

    
	
		
  • 
			
    
				 
						
						Rumen
						Rumen
                        admin's avatar
					
					
				
			
    
			
    
				
    
					
					Posted
					on Jan 9, 2012
					(permalink)
				
    
				
    
					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

    

    
				
    
				
			
    
			
    
				
				
				Reply
			
    
		
    • 
		
    
	
		

    
	
		



	Back to Top


  
  


Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Spell > Radbutton/Spell Button size don't work

		

			

				Related resources for "Radbutton/Spell Button size don't work"
				

					[   ASP.NET Spell Features  |   Documentation   |   Demos   |   Telerik TV   |   Self-Paced Trainer   |   Step-by-step Tutorial   ]