0

I am trying to get the width of an element to be able to set width of another element EXACTLY as big as the first one. The problem I am facing is that different broswers seem to give me different results, no matter the method I am using.

Basically I have an input field which I want to set to the size of the selected option. I use the following JS which fundamentally works fine:

var inputFields = document.querySelectorAll(".my-input-field");

// Resize on change
inputFields.forEach(function(element) {
    element.addEventListener("change", function() {
        resizeSelect(element);
    });
});

function resizeSelect(sel) {
    let tempOption = document.createElement('option');
    tempOption.textContent = sel.options[sel.selectedIndex].textContent;

    let tempSelect = document.createElement('select');
    tempSelect.style.visibility = "hidden";
    tempSelect.style.position = "fixed"
    tempSelect.appendChild(tempOption);

    sel.after(tempSelect);
    sel.style.width = (parseInt(window.getComputedStyle(tempSelect).width) - 25) + 'px';
    tempSelect.remove();

}

In this case I use window.getComputedStyle(tempSelect).width to get the width which gives me 201px in Firefox and 196px in Edge (I haven't tried more browsers yet). Where is this difference coming from?

I also tried to use tempSelect.offsetWidth and tempSelect.getBoundingClientRect()['width] with the same result.

Is there a browser independent solution that gives me the exact width of an element?

EDIT:

I have the following css on my select element:

.advanced-search-select-and-input{
    color: rgb(80, 80, 80);
    background: rgb(250, 250, 250);
    border: none;
    outline: none;
    -webkit-appearance: none;
}
.advanced-search-select-and-input::-ms-expand { /* To not show dropdown arrow in IE etc */
    display: none;
}

EDIT2:

JSFIDDLE

eligolf
  • 1,682
  • 1
  • 6
  • 22
  • depending on the browsers default styles I wouldn't be surprised if there really just is a different size on the default input elements. Do you have some custom CSS to ensure they're the same in both browsers? – Plagiatus Feb 24 '23 at 14:02
  • please psot a [repro] there are many potencial issues such as box-model – tacoshy Feb 24 '23 at 14:02
  • @Plagiatus, I have pasted CSS from my select element at bottom. – eligolf Feb 24 '23 at 14:06
  • @tacoshy, I have posted my CSS on the select element for reference – eligolf Feb 24 '23 at 14:06
  • You may like to consider Normalize.css or Reset.css (or similar) to *reset* or *standardise* all your elements so you have a clean starting point. See [this SO question](https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css) for more details/options. – freedomn-m Feb 24 '23 at 14:09
  • @tacoshy, added Fiddle too to try in browsers – eligolf Feb 24 '23 at 14:15
  • @freedomn-m, I already have. Check Fiddle in question to try in your browser too, it gives me different results – eligolf Feb 24 '23 at 14:15
  • _"Basically I have an input field which I want to set to the size of the selected option."_ - and that is supposed to be a good idea in the first place ...? I personally would rather hate it, if select fields changed their width every time I selected a different option. Maybe I clicked rather towards the right end of the field, but made the wrong choice ... normally I would just click again in the same position, but if you made the field much shorter now due to the length of the falsely selected option, I will have to move my cursor first ... – CBroe Feb 24 '23 at 14:22
  • Also, removing the dropdown icon breaks the path of least surprise - how is your user supposed to know they can click on it to change the option? Just looks like a value in a box. – freedomn-m Feb 24 '23 at 14:24
  • 1
    @CBroe, because what I try to explain in this image: https://imgur.com/jfk65Yh. I have user who can select category, then subcategory etc. And if the name of the first category is short I want the arrow to the next one to be close and not always style after the longest category name. If I make any sense.. – eligolf Feb 24 '23 at 14:27
  • @freedomn-m, not really part of the question, because I want it for my use case :) See my previous comment to CBroe for reference. – eligolf Feb 24 '23 at 14:27
  • Okay, fully agreed, it makes sense in such a special situation. How about you replace the select field with a simple span (not really replace - show the span, hide the select), that contains the text of the selected option? Then you won't have to worry about specifying the width yourself any more. And if the user clicks on such a span, you hide that, and show the select field in its place again ...? – CBroe Feb 24 '23 at 14:31
  • @CBroe, yeh that is a solution too. Select/option elements seems like a headache to style, not sure why those should be such a pain compared to other elements. Thanks for the input, I might go in a different direction :) – eligolf Feb 24 '23 at 14:33
  • Apologies, should have added "offtopic" tag on my previous comment. – freedomn-m Feb 24 '23 at 14:38
  • `select` elements are difficult to style as they're part of the operating system, rather than part of the DOM. That's why replacements such as [tag:select2] are so popular (these essentially do what @CBroe suggested above, but already for you - if you are able to make use of a third party plugin, it might be worth a few minutes to see if there's something that does what you want already available). – freedomn-m Feb 24 '23 at 14:41
  • Here's a (very) quick fiddle showing select2 width:auto to resize to the content. Would need some more styling/options to remove borders/icon/etc and set width when selecting maybe. **Edit** there's [an option](https://stackoverflow.com/a/35895710/2181514) for drop down width: https://jsfiddle.net/uo74wecm/1/ – freedomn-m Feb 24 '23 at 14:47
  • @freedomn-m, thank you very much, will have a look at it :D – eligolf Feb 24 '23 at 15:20

0 Answers0