need to remove line break after RadSpell button

3 posts, 0 answers
  1. Kevin
    Kevin avatar
    3 posts
    Member since:
    Sep 2009

    Posted 15 Oct 2009 Link to this post

    I'm having the same issue described in this thread:  http://www.telerik.com/community/forums/aspnet-ajax/spell/no-line-break-after-spell-button.aspx

    I'm using RadControls for ASP.NET AJAX Q2 2009 SP1.  I followed the instructions in the documentation under Controls > RadSpell > Getting Started to put a simple Spell Check button on my web page.  The issue I have is that I have other buttons on my web site (Save, Cancel, etc.) that I want to be inline with the Spell Check button.  However, there is a line break after the Spell Check button.

    My code is below.  The "Spell Check" button appears on its own line.  My "Save" and "Cancel" buttons appear next to each other on the next line.

    <telerik:RadSpell ID="RadSpell1" runat="server" SupportedLanguages="en-US,English" 
    ControlsToCheck="tbHCMLanguage,tbConsumerLanguage,tbCustomRecommendationComments" AllowAddCustom="false" /> 
    &nbsp;  
    <asp:Button ID="btnSaveCustomRecommendation" runat="server" Text="Save" OnClick="btnSaveCustomRecommendation_Click" /> 
    &nbsp;  
    <asp:Button ID="btnCancelAddCustomRecommendation" runat="server" Text="Cancel" CausesValidation="false" OnClick="btnCancelAddCustomRecommendation_Click" /> 
     


    How can I remove this line break after the "Spell Check" button?

    Thanks for your help!
  2. Martin
    Admin
    Martin avatar
    585 posts

    Posted 20 Oct 2009 Link to this post

    Hello Kevin,

    Each of RadControls is wrapped in a <div /> element. <div /> elements are block-level elements and this is why the adjacent elements are put on a new line, and this is why your Save and Cancel buttons drop on a new line, i.e. this is not a bug, but an expected CSS behavior. In order to align the three controls you should, for example:

    1. Add CssClass="RadSpellFloat" to the server declaration of RadSpell:

    <telerik:RadSpell CssClass="RadSpellFloat" ID="RadSpell1" runat="server" />

    2. Use the following CSS to float the wrapper of the control and thus align the buttons:

    <style type="text/css">
    .RadSpellFloat
    {
        float: left;
    }
    </style>

    Sincerely yours,
    Martin Ivanov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin
    Kevin avatar
    3 posts
    Member since:
    Sep 2009

    Posted 20 Oct 2009 Link to this post

    Thanks.  Your reply gave me enough information to fix my problem.

    In case anyone else reads this thread, I ended up using this style tag:
    <style type="text/css">  
    .RadSpell  
    {  
        display: inline;  
    }  
    </style> 
     

    Using "float: left" did work when I wanted the Spell Check button to be the left-most item on the line, but it would always left-align the button (put the button to the left of other buttons, etc.).  Using "display: inline" seems to keep the button inline wherever I placed it in my HTML.

    Kevin
Back to Top