Develop Reference

Select2 - Make each selected option be in its own line

I was wondering if there's an option in select2 to make each selected item appear in its own line when using multiple selection.
<select id="items-select" multiple>
<optgroup label="Items">
<option>Alpha</option>
<option>Bravo</option>
...
<option>Zulu</option>
</optgroup>
</select>
$('#items-select').select2();
This is the default behavior
I want each option to appear in its own line because the selected options could be 30+ at a time and it would make it easier for the user to check if they got what they wanted.
I tried using the templateSelection option but adding a line break or a <br> tag did nothing there. Currently, I'm able to achieve this by using the following CSS rule
.select2-selection__rendered {
display: grid !important; /* by default it's inline-block */
}
Is there something I'm missing or is there no other way to do this?

You could add the following CSS rule :
.select2-selection--multiple .select2-selection__choice {
display: block !important;
width: fit-content;
}

Set height for select in vuetify

Is it possible to set v-select height using vuetify API?
I know it is possible, but for large height.
If i set height:100 i will see that it works.
But if the value is too low, it won't work.
I noticed that if the textfield is box or outline min-height of 56px is set:
.v-text-field--box .v-input__slot, .v-text-field--outline .v-input__slot { min-height: 56px; }
And for solo text fields, the min-height is 48px:
.v-text-field.v-text-field--solo .v-input__control { min-height: 48px; }
Is setting height using css the only option?

Yes. Until now I think is the best option. There are several input classes below v-input. v-input__slot and .v-input__control are the most important. The same happens with v-button min-height and other input components.

How to display bootstrap select combo box in datatable?

Can anyone help me with my following query please:
- I am using dataTable to display my data. However, when I am using bootstrap select dropdown to display inside one of the column then, when menu gets open it's hide by dataTable. So how to resolve this:
As you can see the other two menu item is hidden by dataTable so how to show all of the three menu item????
Should show me like other two items as well of the combobox like following:
Some dropdown code:
<select class="selectpicker remove-example">
<option value="Mustard">Mustard</option>
<option value="Ketchup">Ketchup</option>
<option value="Relish">Relish</option>
Table will be the bootstrap and dataTable.....
Please let me know if anyone have any idea??? Thanks in advanced:)

You have to set the container option, see example here
So you code become:
<select class="selectpicker remove-example" data-container="body">
<option value="Mustard">Mustard</option>
<option value="Ketchup">Ketchup</option>
<option value="Relish">Relish</option>

I resolved my issue by removing some of the lines from bootstrap component.css file as they are stopping overflow of the combo box out of the box.
As it was look like following:
.table-scrollable {
width: 100%;
/* overflow-x: auto;*/ /* removed on 24/11/2015 as stop overflowing combobox*/
/* overflow-y: hidden;*/ /* removed on 24/11/2015 as stop overflowing combobox*/
border: 1px solid #dddddd;
margin: 10px 0 !important;
}
So good think is it's working now so, it's not good idea to directly edit the bootstrap component.css file but you can do the inline as well wherever you want combo into the table which have table-scrollable class.
Good part is it's working.:)

Chosen with width equal to the largest option

I'm trying to make the DropDownList with the JQuery-Chosen in it reacts like all others "normal" DropDownLists, matching the width equal to the largest option on the DDL.
I tried some different approaches to get this done, using css and JQuery, but all I tried became ugly.
At the official page of Chosen, http://harvesthq.github.io/chosen/options.html , it says:
The width of the Chosen select box. By default, Chosen attempts to match the width of the select box you are replacing. If your select is hidden when Chosen is instantiated, you must specify a width or the select will show up with a width of 0.
Any way to workaround this?
Workspace: http://jsfiddle.net/cdtn0ko7/
$('.chosen').chosen({
width: 'auto'
});

Try this out for size. :D
Fiddle
$('.chosen').chosen();
.form-control {
width: auto;
}

Not sure if I got the question right, but since you are using Bootstrap, you can just do something like this on the css:
.chosen-drop {
position: inherit !important;
}

I tried using this following code and it worked, check this out:
$('.chosen').chosen({
width: '100%'
});

Image Container Drag'N'Drop no overlap

I would like to make a Div Container, where a user can add Boxes (also divs) wich can be dragged arround, but don't overlap. So i started with the container:
<div id="image_container"></div>
I want to change the images afterwards. So The width is always given, for example 800px, but the hight should be auto. I tried following:
div#image_container{
position: relative;
background: url('http://www.locationscout.net/public/images/2015-02/externsteine-germany_l.jpeg');
width: 400px;
background-size: contain;
background-repeat: no-repeat;
height: auto;
}
But couldn't get a result. How would you do that? Since the whole app will not work without JavaScript, i could adjust the hight with that. What do you think about that? So if the image loads, fire the function wich does that.
After the container is done, the user should be able to add boxes into it. He should be able to input the height and width and add up to 4 boxes, not more. But the size should be adjustable via a slider and stay relative to all other boxer.
So... If there are 2 Boxes, one 400x400 and the other 200x100, he could adjust the sizes with the slider for example to, 200x200/100x50, 800x800/400x100 but even smaller steps like 480x480/240x120. That could be done with this slider:
<input type="range" min="0" value="0" max="100" step="1">
How would you do that? I would give the formats via a
Then the boxes should be added into the container and they're draggable, but don't overlap. Something like this but better code. The one i wrote is just bad. The JS is done with a plugin and isn't efficient. What could you recommend?
Greetings
c144