Is there a way to make a select2 work like a normal select in terms of width? E.g. the selected element is as wide as the widest element in the list and vice versa. I want to avoid setting a fixed or 100% width. I found a way to get the selected element and the dropdown to adjust automatically each on their own, but not working as a pair. Ideas?
You can accomplish simply with css on the select
width: auto
Related
Dropdown options on IE8 gets cut down to width of select element but on IE11 it gets expanded to size of longest option value. I want to provide an unique user experience which will make it work like IE8; to cut options list width of select.
I tried css style for select option but it dint work. Any guidance?
I have a requirement to set the position of scrollbar on specific position in a select box.
Somewhere I got that I can use scrollTop() but it's not working in select box.
Is there a way to fix this?
Not sure if you can do that, but you can always trick it into looking like that by placing a div around the select, and setting the width/height and scroll on that. Taken from here.
There are only one way to move top of is select 1 st index option on click event.
I have 4 div elements on the same line, each set at 25% width to fit the screen. When I click on a div it should disappear, which I have achieved using jQuery. Then, I manually set the width of each of the divs to 33%.
I can keep on doing this manually for more clicks, but is there a way the divs automatically resize them selves like this using jQuery and even continue when 2 divs are on screen so each would should be 50%?
Creating tables will solve this problem. Table columns will automatically resize when you delete one of them. You can easly make div's behave like table.
http://snook.ca/archives/html_and_css/getting_your_di
In that case, you don't need to specify fix width e.g 25, 33.. just set it to auto:
width: auto
That should do the trick for as far as i could understand your question. If that didn't help, you should include your css and html code in the question.
I am writing a plugin for wordpress and use a table layout in the widget wrapper to display rankings and game schedules.
One row with all the information given uses about 1000px in width. For the widget with a width of 260px or 360px I want to omit less important information to display the most important information in one row. Because of the interchangeable themes in wordpress I don't know how wide the widget in the wordpress actually will be.
Half page widgets and narrow widget are example on my current theme. Depending on the width available I want to display more or less columns to fill the row.
My idea is to first set the table width to the innerWidth of the wrapping div. neokio writes here that I can do this with something like
$('#object').width($('#object').parent().width());
Secondly it is my goal to display certain columns per row, depending on how wide the the row is. My planned way to accomplish this is by sending the table width as a parameter to the javascript function that decides which columns to display or hide.
My questions:
Is there a better way to do this in wordpress?
Maybe someone has already solved this before... but I didn't find it..
What is the best practice to nest the above jQuery in my code?
All my code can be found on github.
Correct me if I'm wrong, but won't width: 100%; in CSS do what you're trying to do? It should always take the width of the parent element.
table{
width: 100%;
}
I feel like I'm missing some relevant information here.
I wouldn't use JavaScript for this but CSS. I.E. assigning 'display: block' the child would ensure that it takes the full width available, so the width of the parent
Scenario
I'm making a Responsive website where I need to give multiple sizes to dropdown for various screen sizes with custom styling
What I tried
i'm using this DropKick plugin to make custom styled dropdowns it adding width in px. it's very good for me
this is example I made using the plugin http://jsfiddle.net/jitendravyas/HtW8C/1/
Problem
I want to increase or decrease the width and height of dropdown by increasing or decreasing the size of font inside dropdown but when i increase the font-size, dropdown doesn't scale accordingly
Link of plugin https://raw.github.com/JamieLottering/DropKick/master/jquery.dropkick-1.0.0.js
Edit:
I changed px to em here https://github.com/JamieLottering/DropKick/blob/master/jquery.dropkick-1.0.0.js#L117
But this plugin adds a inline width which i don't want. I want to control width by CSS
This is a situation in which the CSS !important rule is actually useful and a valid solution:
a.dk_toggle { width: auto !important; }
This will let you change the font size and have it expand automatically. Or, you can set an explicit width of your choosing, as long as you use that !important rule.
What about when you need to target multiple dropdowns on a page with different widths?
How to individually target multiple dropdowns in CSS for Dropkick Plug-in