0

introducir la descripción de la imagen aquíel icono me aparece debajo del buscador y lo quiero al lado pegado al buscador

    span.twitter-typeahead .tt-menu,
    span.twitter-typeahead .tt-dropdown-menu {
     cursor: pointer;
     position: absolute;
     top: 100%;
     left: 0;
     z-index: 1000;
     display: none;
     float: left;
     min-width: 160px;
     padding: 5px 0;
     margin: 2px 0 0;
     list-style: none;
     font-size: 14px;
     text-align: left;
     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;
    }
    span.twitter-typeahead .tt-suggestion {
     display: block;
     padding: 3px 20px;
     clear: both;
     font-weight: normal;
     line-height: 1.42857143;
     color: #333333;
     white-space: nowrap;
    }
    span.twitter-typeahead .tt-suggestion.tt-cursor,
    span.twitter-typeahead .tt-suggestion:hover,
    span.twitter-typeahead .tt-suggestion:focus {
     color: #ffffff;
     text-decoration: none;
     outline: 0;
     background-color: #337ab7;
    }
    .input-group.input-group-lg span.twitter-typeahead .form-control {
     height: 46px;
     padding: 10px 16px;
     font-size: 18px;
     line-height: 1.3333333;
     border-radius: 6px;
    }
    .input-group.input-group-sm span.twitter-typeahead .form-control {
     height: 30px;
     padding: 5px 10px;
     font-size: 12px;
     line-height: 1.5;
     border-radius: 3px;
    }
    span.twitter-typeahead {
     width: 100%;
    }
    .input-group span.twitter-typeahead {
     display: block !important;
     height: 34px;
    }
    .input-group span.twitter-typeahead .tt-menu,
    .input-group span.twitter-typeahead .tt-dropdown-menu {
     top: 32px !important;
    }
    .input-group span.twitter-typeahead:not(:first-child):not(:last-child) .form-control {
     border-radius: 0;
    }
    .input-group span.twitter-typeahead:first-child .form-control {
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
    }
    .input-group span.twitter-typeahead:last-child .form-control {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
    }
    .input-group.input-group-sm span.twitter-typeahead {
     height: 30px;
    }
    .input-group.input-group-sm span.twitter-typeahead .tt-menu,
    .input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu {
     top: 30px !important;
    }
    .input-group.input-group-lg span.twitter-typeahead {
     height: 46px;
    }
    .input-group.input-group-lg span.twitter-typeahead .tt-menu,
    .input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu {
     top: 46px !important;
    }
 
<form class="form-inline center-flex" action="{{ url('/search') }}" method="get">
            <div class="form-group no-border" id="prefetch">
              <input type="text" placeholder="¿Qué producto buscas?" class="typeahead form-control" name="query">
              <button type="submit" class="btn btn-primary btn-just-icon">
                <i class="material-icons">search</i>
              </button>
            </div>
          </form>

2
  • No veo el problema que tienes, tal y como está tu código el icono saldría justo delante de la palabra "search". En el snipped que has montado no se ve icono alguno.(Seguramente porque lo saques de alguna librería que no has linkeado). ¿Podrías subir aunque sea una captura para que podamos ver el resultado indeseado que nos comentas?
    – phpMyGuel
    el 26 feb. 2019 a las 16:18
  • ya subi una foto con el comportamiento indeseado @PHPMyguel el 26 feb. 2019 a las 18:48

2 respuestas 2

0

Debido a que estás usando Bootstrap como estilo para el botón junto a otra clase de la cual no muestras ningún código CSS, resulta complicado ayudarte a arreglar el problema, pero he hecho un botón con lo que pides:

.search-btn {
  height: 46px;
  width: 46px;
  background-color:transparent;
  border:0;
  cursor:pointer;
}
<!-- Importar los iconos de Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<!-- Input de texto -->
<input type="text" style="height:40px;">

<!-- Botón con icono -->
<button type="submit" class="search-btn">
    <i class="material-icons">search</i>
</button>

También lo he elaborado junto al input de texto para que veas como queda: https://codepen.io/anon/pen/eXmvLm

3
  • solo necesito saber como poner el icono search al lado del buscador, que clases quieres que ponga? dices que falta codigo? el 26 feb. 2019 a las 18:31
  • ya subi una imagen de como se ve, espero que sirva por favor ayuda el 26 feb. 2019 a las 18:45
  • Por favor, añade dentro del botón: style="display: inline-block;" el 26 feb. 2019 a las 19:07
0

<form class="form-inline center-flex" action="{{ url('/search') }}" method="get">
            <div style="margin-top: -30px;" class="form-group no-border" id="prefetch">
              <input type="text" placeholder="¿Qué producto buscas?" class="typeahead form-control" name="query">
            </div>
            <button type="submit" class="btn btn-primary btn-just-icon">
              <i class="material-icons">search</i>
            </button>
          </form>

Tu Respuesta

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

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