AutoCompleteBox Validation Wrapping

3 posts, 1 answers
  1. Germán
    Germán avatar
    6 posts
    Member since:
    Jan 2014

    Posted 27 May 2014 Link to this post

    Dear Telerik,

    I have the following AutoCompleteBox:

    <td style="width: 150px; white-space:nowrap">
    <telerik:RadAutoCompleteBox ID="MachineWORadAutoCompleteBox" runat="server"
    TextSettings-SelectionMode="Single" MinFilterLength="2" DropDownWidth="200px"
    <WebServiceSettings Path="FeedbackForm.aspx" Method="LookupMachineWorkOrder" />

    <asp:RequiredFieldValidator ID="MachineWORadAutoCompleteBoxValidator" ValidationGroup="Save"
    runat="server" Display="Dynamic" ControlToValidate="MachineWORadAutoCompleteBox" ForeColor="red" ErrorMessage="*"></asp:RequiredFieldValidator>

    With a required field validator, the validation is triggered the validation itself works fine the problem I get is that the Error message is wrapped to the next line even though the style tag explicitly says "no wrap". See attached picture as an example of what.

    Form looking online the autocompletebox is wrapped around update panels and using an Ajax Manager you can specify if you want to render inline, I tried this out but it didn't have any effect.

    Any ideas?

  2. Answer
    Magdalena avatar
    413 posts

    Posted 30 May 2014 Link to this post


    The wrapper of RadAutoCompleteBox control is a block element (div), This is the reason why the text (*) after this element wraps to the second line. The second reason is, that width of the radAutocompleteBox is set to 160 pixels and your <td> wrapper  is only 150 pixels width. to fix also this issue, we reset the width of the radSutoCompleteBox by width: auto. Please, apply the following to fix the issue:
    .RadAutoCompleteBox {
        display: inline-block;
    html .RadAutoCompleteBox {
        width: auto;
    .validator {
        vertical-align: top;

    Where .validator is CSS class added to asp validator
    <asp:RequiredFieldValidator CssClass="validator"

    We are sending you this video with testing and fixing the issue. Please, find also a sample project in the attachment.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. DevCraft R3 2016 release webinar banner
  4. Germán
    Germán avatar
    6 posts
    Member since:
    Jan 2014

    Posted 03 Jun 2014 in reply to Magdalena Link to this post

    Thanks, it worked.
Back to Top