Necesito poner el botón de búsqueda al lado de la entrada de búsqueda, que es una lista de opciones.

He buscado y la mayoría de las respuestas dicen que necesito usar las clases pull-left y pull-right pero no funciona en mi caso.

Aquí está la Codepen:

https://codepen.io/ogonzales/pen/rNNVOBr

Código de página completo:

https://codepen.io/ogonzales/pen/rNNVOBr

CodePen usando display: flex:

https://codepen.io/ogonzales/pen/ExxjVqa

enter image description here

HTML original:

<div class="row margin-top3 margin-bottom5 ">

        <form method="get" action="{% url 'shop:catalogo' %}">
            <div style="display: inline;">
            <div class="input-group pull-left">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="inputGroupSelect01">Categorías</label>
                    <select class="custom-select" searchable="Search here.." value={{filtro}} name="filtro">
                        <option value="todas" disabled selected>Seleccionar categoría</option>
                        <option value="todas">Todas</option>
                        <option value="celulares">Celulares</option>
                        <option value="programacion">Programación</option>
                    </select>
                </div>
            </div>
            <div class="input-group-append pull-right">
                <p><input class="btn btn-outline-secondary" type="submit" name="buscar" value="Buscar" /></p>
            </div>
        </div>
            <!-- <p class="margin-top5">Ordenado por: <input class="disabled" type="text" value={{orderby}} name="orderby" /></p> -->
        </form>

</div>

ACTUALIZACIÓN:

La altura se incrementa:

enter image description here

0
Omar Gonzales 8 oct. 2019 a las 22:51

3 respuestas

La mejor respuesta

No necesita usar pull-left o pull-right. Simplemente tiene que poner <div class="input-group-append"> dentro <div class="input-group"> como dice en documentación oficial.

<div class="row margin-top5 margin-bottom5 ">
    <form method="get" action="{% url 'shop:catalogo' %}">
        <div class="input-group">
            <div class="input-group-prepend">
                <label class="input-group-text" for="inputGroupSelect01">Categorías</label>
            </div>
            <select class="custom-select" searchable="Search here.." value={{filtro}} name="filtro">
                <option value="todas" disabled selected>Seleccionar categoría</option>
                <option value="todas">Todas</option>
                <option value="celulares">Celulares</option>
                <option value="programacion">Programación</option>
            </select>
            <div class="input-group-append">
                <input class="btn btn-outline-secondary mb-0" type="submit" name="buscar" value="Buscar" />
            </div>
        </div>
    </form>
</div>

Hagame saber si esto fue de utilidad.

1
Lucas Arbex 8 oct. 2019 a las 20:23

Es mejor usar display:flex en lugar de flotantes porque son más predecibles. En su caso, será algo como este CodePen. Supuse que estás usando Bootstrap 4.

Por otro lado, no debe poner display:inline para envolver otros elementos porque no están destinados a ser envoltorios. Puede encontrar más aquí.

1
Ashylen 8 oct. 2019 a las 20:10

Considere usar la cuadrícula CSS, está reinventando la rueda aquí.

Css

.container{
  width: 200px;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
}

Html

<div class="container">
  <div class='label'>Select</div>
  <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
  <button>Search</button>
</div>
1
Laif 10 oct. 2019 a las 16:38