0

Estoy utilizando la opción de filtrar datos con datatables. Al momento de mostrar los select2 me salen hacia abajo.

Quisiera que me salieran uno al lado de otro en una sola fila. Cabe recalcar que a los select2 los declaro desde js así:

  var select = $('<select class="Filtros select2 col-md"><option value="">Seleccionar Todas</option></select><script>$(".Filtros").select2({allowClear: true,theme: "bootstrap",dropddownAutoWidth: false,placeholder: "Selecciona Filtro"});</script>')
                

Adjunto código completo:

    return $('#' + dg).DataTable({
    initComplete: function () {
        var Destino = '#prueba'
        this.api().columns([1, 2, 3, 4, 5, 6]).every(function () {
            var column = this;
            var select = $('<select class="Filtros select2 col-md"><option value="">Seleccionar Todas</option></select><script>$(".Filtros").select2({allowClear: true,theme: "bootstrap",dropddownAutoWidth: false,placeholder: "Selecciona Filtro"});</script>')
                .appendTo(Destino)
                .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    column
                        .search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });

            column.data().unique().sort().each(function (d, j) {
                

Quisiera que el resultado fuera así Pero con el diseño de los select2 Gracias de Antemano

1
  • Por defecto, Select2 tratará de tomar el mismo ancho del contenedor, aunque puedes tratar de modificarlo.
    – Triby
    el 14 ago. 2021 a las 7:05

1 respuesta 1

0

Para distribuir bloques en css se puede usar un bloque flex. Puedes meter los select en un contenedor div con display:flex.
Algo como esto

<style>
.fila{
    display:flex;
}
<div class="fila">
    <select>
        <option value="1">opcion1</option>
        <option value="2">opcion2</option>
        <option value="3">opcion3</option>
    </select>
    <select>
        <option value="1">opcion1</option>
        <option value="2">opcion2</option>
        <option value="3">opcion3</option>
    </select>
    <select>
        <option value="1">opcion1</option>
        <option value="2">opcion2</option>
        <option value="3">opcion3</option>
    </select>
</div>

Con las propiedades css del modelo flexbox y de bloques puedes ya adaptar los anchos, alineaciones y cualquier otro ajuste que necesites También podrías usar grid, pero si vas a usar distribución unidimensional flex se ajusta perfectamente bien.

Tu Respuesta

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

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