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.
Related
I need to add a horizontal scroll bar for drop-downs having larger option lengths. We are using Chosen jQuery for these drop-downs.
Below the current code for this:
$(".filterDropdown").chosen({allow_single_deselect: true,search_contains: true});
In the resultant code, I see that chzn-results css is applied which has overflow-x: hidden; property. I don't want to directly change this as it may impact UI elsewhere.
Is there a way to provide overflow-x: auto; style for these drop-downs?
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");
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;
}
I have the element.style 'margin-left: 0;' on one of my ul classes. I would like to get rid of it but I can't change the js file without messing everything up so I'm wondering if there is a way to disable this in my CSS? Thanks in advance.
In your CSS just do
ul.something {
margin-left: auto !important; // or whatever px instead of auto
}
That will work most of the time, provided it's the last stylesheet to be loaded, otherwise it might be overridden by a different style again.
I'm doing something that involves ajax auto-completion of phrases in a <textarea>. I've got this working well using the jquery autocomplete plugin; however, it is hard-coded into this to position the popup below the <textarea>.
For what I'm working on, the <textarea> is at the bottom of the page; I ideally want the options to appear above the <textarea>.
Is there a similar existing (and half-decent) autocomplete script that would allow this? My other options are:
try to reposition it after-the-fact using more jquery
hack the plugin code to pieces to reposition it
write something from scratch (sounds simple, but there are a few nuances in a decent autocomplete)
Suggestions?
For info, here's what I ended up with:
#known-parent .ac_results
{
position: fixed !important;
top: auto !important;
bottom: 80px !important;
}
It's not the cleanest solution in the world, but you can overwrite the style properties that the autocomplete plugin writes by using "!important" in your css.
Styles belong in CSS as much as possible anyways.
If I remember correctly, the plugin sets the "top" value in the "style" attribute of the autosuggest div.
In your css you should be able to just do:
#whatever_the_id_of_the_box_is {
position: absolute !important;
top: {{ whatever value you want here }} !important;
}
Can you change the CSS of the popup and assign negative values to margin-top? That should move the content to the top, but your results will look a little weird as the relevant values will be on the top.
Wouldn't it also be possible to edit the autocomplete plugin to edit the style of the container and move the location of the box? I don't think it would be too difficult, but I haven't seen that plugin in a while.
<div style="display: none; position: absolute; width: 151px; top: 21px; left: 91.65px;" class="ac_results"></div>
You'd need to adjust this in the plugin code.
Edit: I actually wouldn't recommend this. There should be a way to reverse the result order in the UI plugin. Do that, and change the style values, and you should have a clean looking result set. I'll add the exact code when I get a chance