jquery - ejemplos - extendiendo el ancho de la rutina de arranque para que coincida con el campo de entrada

django

Question

Sé que esta pregunta se ha hecho al menos tres veces antes, pero la respuesta que vi no era la que estaba buscando. Estoy buscando aumentar el ancho del campo de autocompletar que Twitter bootstrap genera con su función typeahead. He estado leyendo que se extiende para cubrir todo el texto en el campo. es decir, cuanto más largo sea el texto, más ancho será el campo de autocompletar. Sin embargo, me gustaría que fuera un span6 porque ese es el ancho de mi campo de búsqueda. ¿Algunas ideas? He visto algunas respuestas jquery pero no pude seguirlas.

Answer 1

Aquí hay una solución CSS pura:

Dado que .dropdown-menu está posicionado absoluto, se agrega position: relative; para el div envolviendo su campo de entrada uib-typeahead y configurando el width: 100%; a su .dropdown-menu lo arreglará.

Tu CSS se vería algo como esto:

.typeahead-search { position: relative; } .dropdown-menu { width: 100%; }

Answer 2

El menú desplegable es una ul con el typeahead dropdown-menu las clases de typeahead que podría usar CSS para establecer su ancho:

.dropdown-menu
{
 width: .... px;
}

El ancho del span6 no es estático, por lo que necesitará algunas consultas de medios para que sea receptivo.

Para Bootstrap 3, la función typeahead se elimina de TB3 en lugar de usar https://github.com/twitter/typeahead.js/ . Necesitarás un CSS adicional para integrarlo con el Bootstrap de Twitter. Deberá cargar algunos CSS adicionales para obtener el menú desplegable typeahead.js que se ajuste al tema predeterminado de Bootstrap. Pruebe el LESS de Bootstrap extendido o si está buscando una versión más extendida, intente: typeahead.js-bootstrap3.less .

La lista desplegable con se establece con la clase de menú desplegable .tt ahora. En lugar de cambiar el CSS, también puede intentar establecer el ancho dinámico. Con typeahead una clase de su etiqueta de entrada typeahead:

$(''.typeahead'').typeahead({})
on(''typeahead:opened'',function(){$(''.tt-dropdown-menu'').css(''width'',$(''.typeahead'').width() + ''px'');});

Answer 3

Esto es para nuevas versiones:

.twitter-typeahead, .tt-menu 
{
  display: block !important;
}

Answer 4

Estoy usando Bootstrap 3.2.0 con typeahead.js-bootstrap3.less y anidado la entrada en divs como este:

<div class="form-group">
    <label>my label</label>
    <div class="col-md-4">
        <div class="input-group tt-input-group">
            <input id="mytypeahead" class="form-control" />
        </div>
    </div>
</div>

También necesitaba agregar esto a mi css:

.tt-input-group {
    width: 100%;
}

Answer 5

Michael Watson dio lo que creo que es la respuesta más simple en su comentario.

.twitter-typeahead { width: 100%; } 

Actualización # 1: Basado en los comentarios a continuación (gracias Steve, Vishi), haga lo mismo para .tt-hint , .tt-input , .tt-dropdown-menu .

Actualización # 2: mlissner informa que .tt-dropdown-menu ahora es .tt-menu , por lo que el resultado final es

.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }

Answer 6

Para hacer que el menú desplegable coincida con el ancho del campo, querría algo como esto:

$(document).on(''typeahead:opened'', function(event, datum) {
  var width = $(event.target).width();
  $(''.tt-dropdown-menu'').width(width);
});

Pequeña mejora en lo anterior utilizando event.target y un detector de documentos global.