When option in select list doesn't fix into select width it's value is trimmed if we select it

Question

So I have a select list with multiple options.

List itself is limited by width. Most of options are expected to fit into lists width, but there could be once that are longer, and I should handle this situation.

overflow-x:scroll helps me to see the the long option values (by scrolling via x axis), but I have onether problem: when I select a long option (that doen't fit into select width) and scroll x-asis, text inside my option is trimmed to select lenth. But I want it to be fully displayed when scrolling.

Note: I know a solution with appying auto-width on select, but I'm not allowed to change the width here. It should stay the same.

select {
  width: 100px;
  overflow-x:scroll;
}

 <select multiple size="5">
       <option>Option1</option>
       <option>Option2</option>
       <option>Option3</option>
       <option>Some Very Long Option</option>
    </select>

Why not using select option default instead of showing all? – claudios Jun 28 '16 at 07:05 — claudios, Jun 28 '16 at 07:05

Maths RkBala · Accepted Answer · 2018-10-11T05:28:05.073

6

Please try this:

select {
  width: 100px;
  overflow-x:scroll;
}
select option:checked{
  background:#1E90FF;
  color:#fff;
  display: inline-block;
  /*display:inline-block; (or) display: table;width: 100%;*/
}

<select multiple size="5">
       <option>Option1</option>
       <option>Option2</option>
       <option>Option3</option>
       <option>Some Very Long Option</option>
</select>

edited Oct 11 '18 at 05:28

answered Jun 28 '16 at 07:11

Maths RkBala

2,207
3
18
21

@IvanNikolaychuk Welcome :-) – Maths RkBala Jun 28 '16 at 07:15
1

This solution has a bug. Try to click on first item and drag down. All items are put in first line. – SFin Oct 05 '18 at 16:30
@SFin Try this select option:checked {background: #1E90FF;color: #fff;display: table;width: 100%;} – Maths RkBala Oct 11 '18 at 05:25

score 1 · Answer 2 · answered Jun 28 '16 at 07:07

try to calculate width dynamically, for e.g.

//taken from http://stackoverflow.com/questions/986937/how-can-i-get-the-browsers-scrollbar-sizes
function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};

var select = document.getElementsByTagName('select')[0];
select.style.width =select.scrollWidth+ getScrollBarWidth();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple size="5">
       <option>Option1</option>
       <option>Option2</option>
       <option>Option3</option>
  <option>Option1</option>
       <option>Option2</option>
       <option>Option3</option>
  <option>Option1</option>
       <option>Option2</option>
       <option>Option3</option>
       <option>Some Very Long Option</option>
    </select>

It changes initial width, unfortunately. And actually looks to complicated for me. Thanks, anyway! — Ivan Nikolaychuk, Jun 28 '16 at 07:12
I have a dual selectlist and I was trying to add scroll-x and did not have any luck. Can anyone help? — Gee, Mar 28 '22 at 16:35

Gautam Jha · Answer 3 · 2016-06-28T07:15:47.147

0

i suggest overflow-x:visible and display property for selected box will work

select {
  width: 100px;
  overflow-x:visible;
}
select option:checked{
  display:inline-block;
}

<select multiple size="5">
       <option>Option1</option>
       <option>Option2</option>
       <option>Option3</option>
       <option>Some Very Long Option</option>
    </select>

edited Jun 28 '16 at 07:15

answered Jun 28 '16 at 07:00

Gautam Jha

1,445
1
15
24

@IvanNikolaychuk value is not trimming this time – Gautam Jha Jun 28 '16 at 07:02
when I select "Some Very Long Option" and scroll x-asix it's trimmed to "Some Very Lo" – Ivan Nikolaychuk Jun 28 '16 at 07:03
oh i see this now i will shortly back – Gautam Jha Jun 28 '16 at 07:05

When option in select list doesn't fix into select width it's value is trimmed if we select it

3 Answers3