I am trying to create a menu using jQuery and Selectric frameworks and I have run in to a problem that I need some help with. With this menu, I want to have the min width of the dropdown be the max-width of the largest text item in the drop down select.
As it is now, I can have max and min widths preset, but I would like to have min width be the max width of the longest item. Thanks for the help in advanced
Here's the code I am using: http://lcdsantos.github.io/jQuery-Selectric/
Although it's a little bit late, you may want to try the inheritOriginalWidth property:
$('select').selectric({
inheritOriginalWidth: true
});
This will automatically make your selectric dropdown the same width as your original <select> element, and it won't change responsively when you select a new option.
Obviously if you have padding, margins, dropdown arrow button etc. on your custom selectric box, you'll need to CSS styling accordingly to make sure everything is visible, as inheritOriginalWidth won't account for these things.
Related
I'm working on menu dropdown by HTML and CSS. I have a issue with checking sub-menu's width.
I have a menu like this
When we point to the element, it will show the dropdown menu like this or like this
The sub-menu is a dynamic menu. It has same style, same css name, but depends on data so that sub menu can be small or large.
So I would like to check the sub-menu width, if any sub-menu(s) have width larger than 200px -> add one more css class in sub-menu (the others < 200px, must not be added)
My idea is using JS for checking sub-menu element's width. But I'm a newbie on it. I tried with
<script>
if ($('.sub-dropdown').width() > 200) {
$('.sub-dropdown').addClass('float-right');
}
</script>
But of course, it added to all sub-menu, even they are less than 200px :(
Can anyone have the experience with this issue? Please give me an solution on that.
Many thanks.
I'll tell you why your all sub-dropdown will have class float-rigth.
Only if your one sub-dropdown box's width is bigger then 200, your if judgment will be true ,so the code come in to $('.sub-dropdown').addClass('float-right');.this code will add all your box's with class float-right which box's class is sub-dropdown.
You should change your code like this
$('.sub-dropdown').each(function(index,ele){
if($(ele).width()>200){
$(ele).addClass('float-right');
}
});
I have created a kendo.listview object, and used the padding property to control the space between the text and the border. When an item is selected, only the text is highlighted and I want the entire row (border to border) to be highlighted. Any suggestions?
I want the listview object to be able to handle various size items, so using the min-width property is not ideal. However I am not set on using padding, so if there is some other way of controlling the distance between the text and border I am willing to apply it.
I have a dropdown where i have applied a class name "customDropDown" in which height has been set as "22px" and line-height as "22px" for each options in the dropdown.
Issue is for there is one option which occupies space of two lines so it is overriding with next option. Is there any way to override the css in jQuery/javascript for that specific option alone to change the height as "44px" when the length of the option text is more than 25.
you can give a class to the option to which you want to change the height and include the following in your jquery code
$('.myClass').height(44);
It is recommended not to use any height for the options.instead use padding.
You can try not to fix the height, rather prefer giving a padding to the option elements, this would make it fluid.
Thanks everyone for the quick reply. I changed the height to auto. Issue resolved. Thanks again.
I need such combobox, that's it dropdown's width ant that one of input are different and dropdown is adjusted to the right edge of the input.
First part is easy - juts set matchFieldWidth to false and assign listConfig.width = something. But what is the easiest way to perform the adjustment? Here is a picture which illustrates the question.
I'll be the first, but will not gain a reputation - all we should do - is just set pickerAlign to tr-br.
I would like to size a select list based on the width needed for the selected index(string). Say for example I have a list with 3 strings, short, medium, loooooong; I don't want the select list to automatically be as wide as its largest element, rather it should be as wide as its selected element.
The first method I tried: document.getElementById('selectList').style.width = (selectedText.length * 6) + 'px'; where selectedText is a string and 6 was a poor estimation of the width of a character. Without a monospaced font this does not work correctly.
The next method I tried was to set the innerHTML of an off screen div (top:-9999px) to the selected index and then: document.getElementById('selectList').style.width = document.getElementById('hiddenDiv').offsetWidth;
The problem with this method is that the width was also not correct, some really long strings made the select list way to long compared to the actual selected string.
Any ideas how I can dynamically size this select list based on the string width/length?
You can have a hidden span that is filled with the selected option value on change, grab its width, then set the select list to that width.
Demo