var ddlViews = $('#ddlViews').data("kendoDropDownList");
ddlViews.list.width("auto");
I have added width to be auto but its not working, also the width of the dropdown box gets the max width of the item selected and overflows out of the box. I want the dropdown box to have a fixed width, but the dropdown list items should show contents in single line. As the normal dropdown would work.
.k-list-container{
min-width:126px !important;//give a min width of your choice
width: auto!important;
}
.k-list
{
width:auto !important;
}
link to js fiddle
We can set width in 2 ways for Kendo UI combobox list width.
Answer-1
*For static way*
// get reference to the DropDownList
var dropdownlist = $("#size").data("kendoDropDownList");
// set width of the DropDownList
dropdownlist.list.width(500);
Answer -2 Dynamic way using css
.k-list-container
{
white-space: nowrap !important;
width: auto!important;
overflow-x: hidden !important;
min-width:243px !important;
}
.k-list
{
overflow-x: hidden !important;
/*overflow-style: marquee;*/
overflow-y: auto !important;
width:auto !important;
}
This above css code will work for in dynamic data load.
.k-dropdown {
max-width:10em !important;
}
Add these to your CSS and it works, the width would be the max-width you want to specify so that the dropdown box is of this max-width, whereas the contents/items would be in a single line.
The !important property forcefully adds the style you would like to have. Also it does override the width calculated by kendo.
Thanks for answering.
Hope this helps !
Raza
Follow this answer to set width on your Dropdownlist : Kendo dropdown width
.k-dropdown {
width: 250px;
}
kendo has now full support for that, with the autoWidth option
<input id="dropdownlist" style="width: 100px;" />
<script>
$("#dropdownlist").kendoDropDownList({
autoWidth: true,
dataSource: {
data: ["Short item", "An item with really, really long text"]
}
});
</script>
To set dropdown box fixed width(for list only), use
ddlViews.list.width(200);
To set fixed width for dropdown whether list is active or not, define width in css as
<select id="ddlViews" style="width:200px;" >
<option></option>
</select>
I was able to show option content in a single line through css as
ddlViews.list.css("white-space","nowrap");
Related
I am adding new feature to already running project and I need to use chosen dropdown for one of the dropdown. This feature will be added to navbar of site so the css will be applied globaly on entire site.
For Example:
<select id='mydropdown' name='mydropdown' multiple='true' class='chosen-select-dsbrd'>
Now I need to give this select dropdown a custom width and as per other posts here , here , and here I tried:
.chosen-container .chosen-container-multi {
width: 460px !important;
}
and
.chosen-select-dsbrd {
width: 460px !important;
}
The problem is, previous developers were using the chosen for their own features, so how can I change width of my dropdown without disturbing their dropdowns. As of now if I change css using above code it changes all chosen dropdown width across site. Any help appreciated, thanks in advance.
Edit: I have tried with ID, its not working as chosen dynamically adds display: none to my select dropdown and appends <div> with their dropdown code
I use PrimeNG AutoComplete inside PrimeNG Dialog and I list elements below the AutoComplete in this dialog.
I want to do:
The max-height of the modal dialog is 300, if the added elements' total height is bigger than it then modal's scrollbar should be visible.
When there is no element in the list, the AutoComplete's suggestion list should be visible over the dialog.
But when I set the overflow property of the modal or not, the AutoComplete suggestion list is displayed inside the modal. Is it possible to make 2 elements as shown below? I also display scrollbar when the total elements in the modal are 10. Any idea?
Here is CSS style:
body .ui-dialog {
overflow-y: auto !important;
max-height: 300px;
}
body.ui-autocomplete-panel{
position: relative;
z-index: 9998!important;
}
add appendTo="body" worked to me
How do you limit how many options are included in a select? I have around 2000 options (I am using data-live-search to make it easy to search), but I don't want to make an extremely long list (for aesthetic purposes).
I recently spent an hour trying to find how to restrict the height of a dropdown. Turns out the size attribute for select tags is set to 'auto' in the javascript file. For me, it was around line 369.
The solution is simple:
Set size: '8' or however many options you want to be listed
size and data-size didn't work for me. I need to override CSS with this:
div.dropdown-menu.open{
max-height: 314px !important;
overflow: hidden;
}
ul.dropdown-menu.inner{
max-height: 260px !important;
overflow-y: auto;
}
Change the size as you like.
I have an issue that I can't resolve.
I want the container to scroll on y only and the overflow should be visible on x, to display the dropdown menu.
Is this even possible ? Can you enlighten me ?
Thanks.
EDIT
Here is a JSFiddle that represents my issue. You need to keep in mind that the dropdown menu doesn't have to move but just need to appear above the .item container. Hope you understand.
https://jsfiddle.net/sog1oxuq/1/
You can add either
overflow-x hidden
or
overflow-y hidden
To your body
Change the overflow: scroll; on .item to overflow-y: scroll;. Also, why the left: 100px; on .dropdown-menu? Change it to left: 0; and it should work fine.
See example
I updated the jsfiddle so only the verical scrollbar appears:
https://jsfiddle.net/os5pqjqb/
All I did was update the CSS:
overflow-y:scroll
I have installed Dropkick to be able to create nice looking dropdowns [http://jamielottering.github.com/DropKick/]
My test is installed here:
http://test.mobilkul.se/dropkick/
Width is calculated in regards to the longest element in the dropdown menu.
I would like to increase the height of this dropdown.
Right now 8 options are showed if I click on the button.
Is this possible or is this a browser issue?
If you look at dropkick's CSS file, you'll find the following at line 132 - Check it out using Firebug or Chrome dev inspector.
.dk_options_inner, .dk_touch .dk_options {
max-height: 250px;
}
You can either:
Change that 250px to whatever you need - for example, 350px
OR
Override the style in your CSS file (recommended):
body .dk_options_inner, .dk_touch .dk_options { /* see body prefix for more specificity */
max-height: 350px;
}