2

Tengo el siguiente fragmento de código html y lo que pretendo es limitar la anchura de cada una de las etiquetas para que se muestren en un totalidad en pantalla y no se corten, ya bien sea mediante un salto de linea o un scroll horizontal.

<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>

He intentado añadir las rejillas de bootstrap col-xs-6 col-md-6 col-lg-6 pero únicamente afectan a la etiqueta select. No encuentro la manera de añadir diferentes estilos a cada .

¿Cómo podría hacerlo?

Un saludo

0

4 respuestas 4

9

No es posible con un select nativo tener etiquetas <option> con word-wrap, los CSS que les afectan son muy limitados (respuesta relacionada aquí). Puedes reducir el tamaño del select para que no ocupe tanto, pero los options seguirán siendo largos. Incluso un tag como <br/> en el cuerpo será ignorado:

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>

La única solución sería recortar los textos cuando sobrepasen cierta longitud o mostrarlos con un "dropdown" hecho a medida, no nativo:

$("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>

1
  • Muchísimas Gracias Pablo Lozano. Y perdón si no me había explicado bien anteriormente.
    – jld
    el 3 abr. 2018 a las 8:59
0

No es posible ya que al hacer click en otro sitio automáticamente el select se oculta. Sin embargo hay un truco para hacer una "simulación" del scroll horizontal con un select. Consiste en colocarlo dentro de un div con un width definido, y agregar overflow.

Incluso podrías agregar un evento para que se despliegue y oculte el select mientras utilizas el scroll. Solo tendríamos que modificar el size del 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>

0

La otra forma de hacerlo es usando una librería de jquery llamada select2, te dejaré el ejemplo en base a lo que tienes arriba. El ejemplo dice que usando la librería , le asigno una anchura del 100% del contenedor.

$("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>

PD: Puedes modificar el css la clase contenedor para que veas como se adapta a tu contenedor.

0

Con esto, cambiaria el ancho del select2 de forma predeterminada, para mejorar la visualizacion del elemento,

$(document).ready(function() {
  $("#IdActo").select2({
    width: 'resolve'
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

1
  • Agregué el código del usuario, pero esa parte de select2 nunca la había visto en alguna versión de jQuery, tal vez pretendías usar otra librería. el 19 oct. 2020 a las 15:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.