Restrict client-side people picker in SharePoint to single line of text

Question

I want to use a people picker (client-side, created using JavaScript function SPClientPeoplePicker_InitStandaloneControlWrapper) that only allows one person and is only restricted to a single line of text.

There is an option to allow only one user:

schema['AllowMultipleValues'] = false;

However, all it does is merely shows a warning message when more than one user is selected. The field still becomes a two-line field (like in the picture), which breaks the layout.

What would be a good way to never allow this field to span two lines of text? It must be restricted to one line only.

Thanks.

Answer 1

Over which control you have applied this PeoplePicker?

I too have done this using div structure. Which never allows me to break the control into Multiline. It always stay Single line.

Here is what I am using:

<div id="peoplePickerDiv"></div>

Answer 2

Use this CSS to set the height:

<style type="text/css">
    .sp-peoplepicker-topLevel{
        height:auto !important;
    }
</style>