need to remove line break after RadSpell button

[Kevin]

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!

[Martin]

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.

[Kevin]

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