jquery - mdb - Problema de CSS en Twitter Typeahead con Bootstrap 3
typeahead bootstrap 4 documentation (14)
Basado en la respuesta de Andreas, apostaría por lo siguiente con menos:
.tt-hint {
.form-control;
}
Con el lanzamiento de Bootstrap 3. Typeahead ha sido eliminado a favor de esto:
https://github.com/twitter/typeahead.js
Lo he integrado con éxito en la recuperación remota de datos
pero estoy teniendo problemas con la autocompletación
como puede ver, hay dos textos que aparecen en el cuadro de texto.
Incluí el css ( https://github.com/jharding/typeahead.js-bootstrap.css ) como se dice en la documentación, pero no tuve suerte.
cualquier ayuda o sugerencia sería apreciada.
jsfiddle mostrando el problema:
http://jsfiddle.net/KrtB5/
HTML
<body>
<div class="container">
<label>State</label> <input type="text" class="typeahead form-control" />
</div>
</body>
Javascript :
$(''.typeahead'').typeahead({
name: ''Some name'',
local: [''test'', ''abc'', ''def'']
})
De los problemas de Typeahead con Bootstrap 3.0 RC1 : como menciona [laurent-wartel] [2], pruebe https://github.com/hyspace/typeahead.js-bootstrap3.less o https://github.com/bassjobsen/Bootstrap- 3-Escriba el encabezado para CSS adicional para usar typeahead.js con Bootstrap 3.1.0.
O utilice el complemento "antiguo" (TB 2) con el nuevo motor de sugerencias Bloodhound: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26
Esto funcionó para mí. Es posible que necesite jugar con los números superiores e izquierdos para hacerlo bien.
$(''#typeahead'').typeahead(...);
$(".tt-hint").css(''top'',''3px'');
$(".tt-hint").css(''left'',''1px'');
Hmm, parece que .form-control es una nueva clase en Bootstrap 3 RC y es el culpable de este problema (sin duda esta es solo la versión RC con muchos problemas), puedes simplemente copiar el estilo de esa clase a la clase .tt-hint . Asi que:
.twitter-typeahead .tt-hint {
display: block;
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
}
Violín de trabajo: http://jsfiddle.net/KrtB5/2/
Actualización que funciona mejor con jQuery 1.9.1 y Bootstrap 3.0.0: http://jsfiddle.net/KrtB5/13
La solución que se me ocurrió fue simplemente agregar otra clase CSS (from-group-lg) a mi elemento form-group.
Mi HTML:
<div class="form-group form-group-lg">
<label class="control-label" for="my-large-typeahead">Type to automcoplete:</label>
<input type="text" class="form-control typeahead" id="my-large-typeahead">
</div>
En mi archivo scss agregué:
.form-group-lg .tt-hint
{
@extend .input-lg;
}
Mira esto:
$(''#foo'').typeahead(...);
$(''.tt-hint'').addClass(''form-control'');
No es necesario pasar por ninguna de estas complicadas implementaciones, simplemente agregue
style="position: relative"
Para el elemento padre. Utiliza un posicionamiento absoluto, solo necesita saber a qué "absoluto" te refieres.
No solo .tt-hint es brocken, sino también otras clases CSS.
La mejor solución, que funciona en todos los navegadores, es agregar el css adicional, que repara los problemas de css entre Typeahead.js y Bootstrap 3:
Otro enfoque para hacer que Twitter Typeahead funcione con Bootstrap 3.
// Using jQuery, we remove the inline styles compulsively added by Twitter Typeahead.
// We need to do this because, if not, styles on our stylesheets won''t be able to
// override those inline styles.
$(''.twitter-typeahead, .typeahead'').attr(''style'','''');
Luego, en su hoja de estilo LESS, puede agregar lo siguiente:
// Twitter Typeahead
.twitter-typeahead {
position: relative;
.tt-hint {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: @input-bg;
border: none;
}
.tt-input {
position: relative;
vertical-align: top;
}
.tt-hint + .tt-input {
background-color: transparent;
}
.tt-dropdown-menu {
&:extend(.dropdown-menu all);
}
.tt-suggestion {
&:extend(.dropdown-menu > li > a all);
p {
margin-bottom: 0;
}
}
.tt-cursor {
&:extend(.dropdown-menu > .active > a all);
}
}
Si está utilizando bootstrap.less, lo tiene mucho más fácil. BS 3 instala MENOS 1.4.1 que ahora incluye bondad ''extender''. vea Less y Bootstrap: cómo usar una clase span3 (o spanX [any number]) como mixin?
Extender es una característica clave para LESS ahora. Ahora puede heredar por completo (clases con nombre explícito). Así que no es necesario copiar las propiedades como en las respuestas CSS de Hieu Nguyen y Nick P. MENOS lo hará todo con:
.twitter-typeahead .tt-hint:extend(.form-control all)
{}
El código https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.less less está roto para BS 3. Lo usé como punto de partida y también agregué el menú desplegable no se ajusta según el tipo de BS 2 por delante. Mi último archivo menos es:
.tt-dropdown-menu
{
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
/* from BS dropdowns.less .dropdown-menu */
/* background-color: @dropdownBackground;*/
background-color: @dropdown-bg;
/*
border: 1px solid #ccc;
border: 1px solid @dropdownBorder;
border: 1px solid @dropdownBorder;*/
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;
*border-right-width: 2px;
*border-bottom-width: 2px;
/*BS2 replaced with BS dropdowns.less .dropdown-menu*/
/*.border-radius(6px);*/
border-radius: 6px;
/*.box-shadow(0 5px 10px rgba(0,0,0,.2));
-webkit-background-clip: padding-box;
-moz-background-clip: padding;*/
.box-shadow(0 6px 12px rgba(0,0,0,.175));
background-clip: padding-box;
}
.tt-suggestion
{
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor
{
/*color: @dropdownLinkColorHover;
#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));*/
color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg;
}
.tt-suggestion.tt-is-under-cursor a
{
/*color: @dropdownBackground;*/
color: @dropdown-bg;
}
.tt-suggestion > p
{
margin: 0;
white-space: nowrap !important; //dont conform suggestion to parent input width
}
/*https://.com/questions/18059161/css-issue-on-twitter-typeahead-with-bootstrap-3*/
.twitter-typeahead
{
display: block;
width: 100%; //BS 3 needs this to inherit this for children
}
.twitter-typeahead .tt-hint:extend(.form-control all)
{
color: @input-color-placeholder; //show hint distinct from input
}
También hay un puerto no oficial del complemento de escritura anticipada de Bootstrap 2:
No requiere ningún CSS adicional y funciona con la última versión de Bootstrap.
Aquí hay una demo en Plunker.
Una solución integral (recomendada en este informe de errores en Typeahead)
https://github.com/hyspace/typeahead.js-bootstrap3.less/blob/master/typeahead.css
/*
* typehead.js-bootstrap3.less
* @version 0.2.3
* https://github.com/hyspace/typeahead.js-bootstrap3.less
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
.has-warning .twitter-typeahead .tt-input,
.has-warning .twitter-typeahead .tt-hint {
border-color: #8a6d3b;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .twitter-typeahead .tt-input:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
border-color: #66512c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-error .twitter-typeahead .tt-input,
.has-error .twitter-typeahead .tt-hint {
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .twitter-typeahead .tt-input:focus,
.has-error .twitter-typeahead .tt-hint:focus {
border-color: #843534;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.has-success .twitter-typeahead .tt-input,
.has-success .twitter-typeahead .tt-hint {
border-color: #3c763d;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .twitter-typeahead .tt-input:focus,
.has-success .twitter-typeahead .tt-hint:focus {
border-color: #2b542c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
.input-group .twitter-typeahead:first-child .tt-input,
.input-group .twitter-typeahead:first-child .tt-hint {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.input-group .twitter-typeahead:last-child .tt-input,
.input-group .twitter-typeahead:last-child .tt-hint {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.input-group.input-group-sm .twitter-typeahead .tt-input,
.input-group.input-group-sm .twitter-typeahead .tt-hint {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-group.input-group-sm .twitter-typeahead .tt-input,
select.input-group.input-group-sm .twitter-typeahead .tt-hint {
height: 30px;
line-height: 30px;
}
textarea.input-group.input-group-sm .twitter-typeahead .tt-input,
textarea.input-group.input-group-sm .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint {
height: auto;
}
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
border-radius: 0;
}
.input-group.input-group-sm .twitter-typeahead:first-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.input-group.input-group-sm .twitter-typeahead:last-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
.input-group.input-group-lg .twitter-typeahead .tt-input,
.input-group.input-group-lg .twitter-typeahead .tt-hint {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-group.input-group-lg .twitter-typeahead .tt-input,
select.input-group.input-group-lg .twitter-typeahead .tt-hint {
height: 46px;
line-height: 46px;
}
textarea.input-group.input-group-lg .twitter-typeahead .tt-input,
textarea.input-group.input-group-lg .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint {
height: auto;
}
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
border-radius: 0;
}
.input-group.input-group-lg .twitter-typeahead:first-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.input-group.input-group-lg .twitter-typeahead:last-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
}
.twitter-typeahead {
width: 100%;
}
.input-group .twitter-typeahead {
display: table-cell !important;
float: left;
}
.twitter-typeahead .tt-hint {
color: #999999;
}
.twitter-typeahead .tt-input {
z-index: 2;
}
.twitter-typeahead .tt-input[disabled],
.twitter-typeahead .tt-input[readonly],
fieldset[disabled] .twitter-typeahead .tt-input {
cursor: not-allowed;
background-color: #eeeeee !important;
}
.tt-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
min-width: 160px;
width: 100%;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.tt-dropdown-menu .tt-suggestion {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333333;
white-space: nowrap;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor {
text-decoration: none;
outline: 0;
background-color: #f5f5f5;
color: #262626;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor a {
color: #262626;
}
.tt-dropdown-menu .tt-suggestion p {
margin: 0;
}
Una solución menos limpia
.tt-small {
.twitter-typeahead {
display: block !important; // Note: Override inline styles set by JavaScript
&> .tt-hint {
&:extend(.form-control);
color: @medium-gray;
}
}
}
Donde el marcado se ve algo así como:
<div class="form-group">
<label class="col-lg-3 col-sm-3 control-label" for="mydropdown">Dropdown</label>
<div class="col-lg-6 col-sm-6 tt-mydropdown tt-small">
<input class="form-control" id="mydropdown" placeholder="Dropdown" type="text">
</div> <!-- tt-small end -->
</div>
EDITAR: Actualizado para Bootstrap 3.0 EDIT 2: La llamada a Typeahead fue modificada. Ver nuevo jsfiddle
Después de jugar con el estilo, parece que la clase de control de formularios no se alinea con la tt-hint. Así que me aseguré de que los márgenes y las fronteras se alineen. Tomando la respuesta de Hieu Nguyen y agregando radio de borde y soporte para input-small / input-large
CSS
.twitter-typeahead .tt-hint
{
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
border-radius:4px;
}
.twitter-typeahead .hint-small
{
height: 30px;
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
line-height: 1.5;
}
.twitter-typeahead .hint-large
{
height: 45px;
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
line-height: 1.33;
}
Script para input-small / input-large
$(''.typeahead.input-sm'').siblings(''input.tt-hint'').addClass(''hint-small'');
$(''.typeahead.input-lg'').siblings(''input.tt-hint'').addClass(''hint-large'');
Jsfiddle actualizado: http://jsfiddle.net/KrtB5/542/