Tokens restricted to one line

[Arge]

Can Tokens be restricted to one line instead of the RadAutoCompleteBox resizing? When InputType is set to Text the control does not resize.

[Shinu]

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.

[Nencho]

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