Dynamically size a select list (Safari) - javascript

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

Related

How do I get the number of items that will not fit inside the parent dynamically?

I currently have a draggable width container with some children.
Since its width is draggable once the width is small enough that say for example only 3 elements can fit.
Expected outputs are (0), (1), and (+4) (Number of elements that overflow + 1).
Other cases: Here only two elements fit, and 4 overflows.
The expected output is two circles with (0) and (+5).
I saw other posts where they use a fixed width and calculate the number of elements that can fit from that. However, in my use case, the width is varying and I need to get the number of elements that can fit/overflow dynamically. How can this be done using javascript and plain CSS?
var popupDiv = document.getElementsById("container")
let count = Math.round(window.getComputedStyle(popupDiv).width/widthOFElement)
I hope this help. here the widthOFElement is the width of round element. and you can add this in dragabble event listener.

Aligning two range inputs side by side to create an interval picker

I came up with an idea of building a range slider by using two different HTML range inputs placed next to each other.
Since there can only be one focused element at a time I came up with a solution of modifying the minimum, maximum and width of the inputs when focus changes between them.
See my solution - Using custom styling for webkit range input track and thumb.
Example
Range spans between 1 to 100. If first input is on 20 and the second input gets focus I will modify the first inputs maximum value to 20 and set the minimum value of the second input to 21. I will then set the width of the inputs to a percentage value dependent on the current value. So the first input described above will get the width of 20% and the second 80% to match values selected.
The issue
Since the thumb of the input will align left when set to its minimum value and to the right when set to the maximum value there is a small "jump" when focus changes and I modify the min and max values of the range inputs. The width of the thumb is set to 1rem and that value must be taken into account somehow together with the current value of the input itself (i think..). I just can't get that last part right.

Expand Items to max text length in Selectric Dropdown Menu

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.

How do I include padding in highlited item in kendo.listview?

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.

How to determine how many CSS3 columns are actually being displayed (vs. the specified column-count)?

I have a list of tags that are in a box that I've specified as having multiple columns:
#tags {
-webkit-columns: 140px 5;
}
Result:
The content of this list is dynamically generated.
When I resize the browser window, the number of columns collapses. e.g.:
Using jQuery / JS / CSS / etc., how can I determine how many columns are being displayed at any given time?
Unless you specified all column width-related properties browsers will try to fit whole number of columns in content area (between left and right padding of element). So (contentWidth + columnGap)/(columnWidth + columnGap) rounded down will give you result.
Note that right padding may be set so high that whole column will be able to fit there - you may need to adjust computations.
You can also directly get size of column if you have an element with 100% width inside columns text.
You can get the value like this:
$('#tags').css('-webkit-column-count');
Try alerting this:
alert($('#tags').css('-webkit-column-count'));
Similar to Alexei's answer, I figured out a solution to get the column count:
var $tags = $("#tags"),
column_width = $tags.children(':first').width(),
container_width = $tags.width(),
column_count = Math.floor(container_width / column_width); // in my case, sum of column gaps is less than the width of a column, so I can round down.

Categories