This is a migrated thread and some comments may be shown as answers.

Inline multiselect?

6 Answers 943 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Kyle
Top achievements
Rank 1
Kyle asked on 02 Apr 2013, 02:56 PM
Currently the multiselect widget gets wrapped in a div, causing it to move to a newline. Other similar widgets like the dropdownlist do not. Is there a way I can make the multiselect widget not move to a newline?

I tried setting the display to be 'inline-block', but then it shifted the multiselect to be 'hovering' above the available data.

http://imgur.com/GiQURfS

6 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 04 Apr 2013, 11:34 AM
Hello Kyle,

I have already answered to your support ticket with the same question, however I am pasting my reply here too so the other users who follow this thread can read it: 

From the provided picture I presume you would like to align Kendo UI DropDownList, AutoComplete and Multiselect widgets on the same line? If this is the case you can set the following CSS to the .k-widget.k-multiselect element

Copy Code
<style scoped>
.k-widget.k-multiselect{
    width400px;
    vertical-alignmiddle;
    display: inline-block;
}
</style>
For your convenience I prepared a simple jsBin example which demonstrates the suggested approach in action. Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sunil
Top achievements
Rank 1
answered on 26 Oct 2017, 01:04 PM
thanks it works for me.
0
Sunil
Top achievements
Rank 1
answered on 26 Oct 2017, 01:16 PM
but it is not working in mozilla and chrome. And in IE also faced some issue.
0
Ivan Danchev
Telerik team
answered on 30 Oct 2017, 12:03 PM
Hi Sunil,

I checked how the MultiSelect from the example Iliana has linked looks like in Chrome, Firefox and IE11 and in all of them it is displayed in the same line as the DropDownList and AutoComplete, but depending on your resolution you might need to resize jsbin's Output pane, otherwise it could be too narrow to fit all three widgets on the same line (see this screencast).

Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tim
Top achievements
Rank 1
Veteran
answered on 01 Nov 2020, 07:18 PM
This does not appear to work.  setting the width of the control just overlays other controls on the page.
0
Stoyan
Telerik team
answered on 02 Nov 2020, 03:25 PM

Hi, Tim,

I tried the approach, that was suggested by Iliana previously, in this dojo and the inputs get inline.

However, if your viewport is too small there might not be enough space to fit all the components you are using.

Please edit the above dojo or provide your own runnable example for me to investigate further.

Regards,
Stoyan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
MultiSelect
Asked by
Kyle
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Sunil
Top achievements
Rank 1
Ivan Danchev
Telerik team
Tim
Top achievements
Rank 1
Veteran
Stoyan
Telerik team
Share this question
or