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.
    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nencho
    Admin
    Nencho avatar
    1458 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;
            }
        </style>


    Regards,
    Nencho
    Telerik
     

    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