1

Cuando despliego el <select> para elegir una opción, empuja el div que esta debajo.

Aca imagen sin desplegar el select:

introducir la descripción de la imagen aquí

aca cuando se despliega el select de Autor, el botón se mueve hacia la derecha:

introducir la descripción de la imagen aquí

aca cuando se despliega el select de categoría, el botón se mueve mas hacia la derecha:

introducir la descripción de la imagen aquí

¿Cómo hacer para que el botón Buscar se sobreponga con los select cuando se despliegan con CSS o bootstrap?

aca dejo el codigo:

<div id="row1">

    <div class="col-md-4">
        <label>Nombre de libro</label>
        <input class="form-control" id="nombreLibro" maxlength="80" placeholder="Ingrese nombre del libro" />
    </div>

    <div class="col-md-3">
        <label>Autor</label>
        <select name="ddlAutor" class="form-control inputFiltros" id="ddlAutor" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;">

            @if (!String.IsNullOrEmpty(ViewBag.Autor))
            {
                //para que no me quede el nombre del autor duplicado en el dropDownList de autores
                for (int i = 0; i < autorList.Count; i++)
                {
                    if (autorList[i].IdAutor.Equals(ViewBag.IdAut))
                    {
                        autorList.RemoveAt(i);
                        i--;
                    }
                }

                <option [email protected]>@ViewBag.Autor</option>
                <option value="todos">Todos</option>
                foreach (Autor item in autorList)
                {
                    <option [email protected]>@item.Nombre</option>
                }

            }
            else
            {
                <option value="todos">Todos</option>
                foreach (Autor item in autorList)
                {
                    <option [email protected]>@item.Nombre</option>
                }
            }


        </select>
    </div>

    <div class="col-md-3">
        <label>Categoria</label>
        <select name="ddlCategory" class="form-control inputFiltros" id="ddlCategory" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;">

            @if (!String.IsNullOrEmpty(ViewBag.Categoria))
            {
                //para que no me quede el nombre de la categoria duplicado en el dropDownList de categoria
                for (int x = 0; x < categoryList.Count; x++)
                {
                    if (categoryList[x].IdCategoria.Equals(ViewBag.IdCat))
                    {
                        categoryList.RemoveAt(x);
                        x--;
                    }
                }

                <option [email protected]>@ViewBag.Categoria</option>
                <option value="todos">Todos</option>
                foreach (Categoria item in categoryList)
                {
                    <option [email protected]>@item.Nombre</option>
                }

            }
            else
            {
                <option value="todos">Todos</option>
                foreach (Categoria item in categoryList)
                {
                    <option [email protected]>@item.Nombre</option>
                }
            }


        </select>
    </div>

    <div class="col-md-1 col-xs-4">
        <label>Desde: $</label>
        <input type="number" class="form-control" id="price1" />
    </div>

    <div class="col-md-1 col-xs-4">
        <label>Hasta: $</label>
        <input type="number" class="form-control" id="price2" />
    </div>

</div>

<div class="row2 text-center" id="cont-btn_buscar">
    <button class="btn btn-default" id="btn_buscar" type="button" onclick="filtrar();"><span class="glyphicon glyphicon-search" id="glyphicon-search" aria-hidden="true"></span>Buscar</button>
</div>

#row1 {
    
    /*este es el div que agrupa a todos los select*/
    margin: 0 auto !important;
   
    
}

#row1 div {
  /*div individual de c/u de los select*/
   margin-bottom: 15px !important;   
}


.row2{
    /*este es el div que contiene al boton buscar*/
} 

1
  • Exacto, es el botón el que se mueve!
    – Claudio
    el 9 jun. 2020 a las 19:02

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.