Tokens restricted to one line

3 posts, 0 answers
  1. Arge
    Arge avatar
    1 posts
    Member since:
    May 2013

    Posted 12 May 2014 Link to this post

    Can Tokens be restricted to one line instead of the RadAutoCompleteBox resizing? When InputType is set to Text the control does not resize.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 13 May 2014 in reply to Arge Link to this post

    Hi Arge,

    The token container of RadAutoCompleteBox is a Div element which does not have a specified height therefore when the specified width of the control is reached the tokens are moved to the next line. You may specify certain height of the Div element but the input element in which the user is  allowed to type will still move to the next line when the end (width) of the control is reached. It is just that the control is not designed to be customized like that.

    Hope this information will helps you.
  3. Nencho
    Nencho avatar
    1646 posts

    Posted 15 May 2014 Link to this post

    Hello Arge,

    Indeed, as Shinu mentioned, the control is not designed to work in such a manner. If it is not expanded on the second row, once the tokens list became too large - the input will not be visible. In this case, when the user is unable to locate the area to add new entries, this makes this behavior not quite user-friendly. However, you could restrict the second row expand by the following style rules:

    <style type="text/css">
            html .RadAutoCompleteBox .racTokenList {
                white-space: nowrap;
            html .RadAutoCompleteBox .racToken,
            html .RadAutoCompleteBox .racInput {
                float: none;
                display: inline-block;


    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.

Back to Top