Dimension width "width" of option in a select tag

Question

Dimension width "width" of option in a select tag

Navigation

#1 by (9 votes)
#2 by (0 votes)
#3 by (0 votes)

2

I have the following fragment of html code and what I intend is to limit the width of each one of the labels so that they are displayed in a whole screen and they are not cut, either through a line break or a horizontal scroll .

<select class="form-control valid" data-val="true" data-val-number="El campo Acto Sujeto a debe ser un número." id="IdActo" name="IdActo" aria-describedby="IdActo-error" aria-invalid="false" style="width:150px"><option value="">Seleccionar</option>
    <optgroup label="Actos">
    <option value="1">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</option>
    <option value="2">uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu</option>
    </select>

I have tried to add the bootstrap grids col-xs-6 col-md-6 col-lg-6 but only affect the select tag. I can not find a way to add different styles to each one.

How could I do it?

Greetings

jquery html5 css3 css bootstrap

asked by jld 03.04.2018 в 10:23

source

3 answers

Make the dropdown roll out when hovering (HOVER) Get img src="" when pressing image to insert in editor

score 9 · Answer 1

It is not possible with a native select to have <option> tags with word-wrap, the CSS that affects them is very limited (answer related here ). You can reduce the size of the select so that it does not occupy so much, but the options will remain long. Even a tag like <br/> in the body will be ignored:

select {
    width: 100px;
   
}
option {
  width: 150px;
  white-space:pre-wrap;
  word-wrap: break-word;
}

<div id="something" style="width:500px">
<select class="form-control valid" data-val="true" data-val-number="El campo Acto Sujeto a debe ser un número." id="IdActo" name="IdActo" aria-describedby="IdActo-error" aria-invalid="false"><option value="">Seleccionar</option>
    <optgroup label="Actos">
    <option value="1">Esta es una opción muy larga </option>
    <option value="2">En un lugar de la Mancha de cuyo nombre no quiero acordarme, <br/> no ha mucho tiempo que vivía...</option>
    </select>
    </div>

The only solution would be to cut out the texts when they exceed a certain length or show them with a custom-made, non-native "dropdown":

$("ul").on("click", ".init", function() {
    $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
});

ul { 
    height: 30px;
    width: 250px;
    border: 1px #000 solid;
    border-radius: 10px;
    list-style-type: none;
    padding-left: 10px;
}
ul li { padding: 5px 5px; z-index: 2; overflow-x: auto;  word-break: normal}
ul li:not(.init) { float: left; width: 250px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-unstyled">
    <li class="init">Selecciona una opción</li>
    <li data-value="value 1">Option 1 con un texto largo que produce saltos</li>
    <li data-value="value 2">Option 2</li>
    <li data-value="value 3">Option 3</li>
</ul>

score 0 · Answer 2

It is not possible since clicking on another site automatically the select is hidden. However there is a trick to make a "simulation" of the horizontal scroll with a select. It consists of placing it within a div with a defined width, and adding overflow .

You could even add an event to display and hide the select while using the scroll. We only need to modify the size of the select .

$(".overflowX").scroll(function() {
    $("#IdActo").attr("size", 5);
});
$(".overflowX").on("mouseleave", function() {
    $("#IdActo").attr("size", 1);
});

<div style="width:150px;" class="overflowX">
    <select class="form-control valid" data-val="true" data-val-number="El campo Acto Sujeto a debe ser un número." id="IdActo" name="IdActo" aria-describedby="IdActo-error" aria-invalid="false" style="" size="1">
    <option value="">Seleccionar</option>
    <optgroup label="Actos">
    <option value="1">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</option>
    <option value="2">uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu</option>
    </select>
</div>

<style>
div.overflowX {   
 overflow-x:auto;
 overflow-y:auto;   
 }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 3

The other way to do it is using a jquery library called select2 , I'll leave the example based on what you have above. The example says that using the library, I assign a width of 100% of the container.

$("select").select2({
  width: '100%'
});

.contenedor {
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<div class="contenedor">
  <select class="form-control valid" data-val="true" data-val-number="El campo Acto Sujeto a debe ser un número." id="IdActo" name="IdActo" aria-describedby="IdActo-error" aria-invalid="false" style="width:150px">
    <option value="">Seleccionar</option>
    <optgroup label="Actos">
      <option value="1">gggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
      </option>
      <option value="2">uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu</option>
  </select>
</div>

PS: You can modify the css class contenedor to see how It adapts to your container.