0

Tengo el siguiente code:

<div class="card-header bg-white">
    <div id="people-filters" class="bg-white">
        <form method="POST" action="http://p.miurl.local" accept-charset="UTF-8" id="search-form">
            <input value="xxxxxx" type="hidden" name="_token" class="field-token" /> <input value="1" id="field-page" type="hidden" name="page" class="field-page" />
            <div class="d-none d-lg-block">
                <div class="row m-t-10 d-flex align-items-center">
                    <div class="col-3"><h3>Title</h3></div>
                    <div class="col-4 d-flex align-items-center">
                        <span class="text-nowrap">Sort by:</span>
                        <div class="form-group w-100 m-0 pl-3">
                            <select
                                id="field-sort-by"
                                name="sort_by"
                                data-value=""
                                data-null-option="Sort By"
                                accesskey="s"
                                class="custom-select form-control field-sort-by select2-hidden-accessible"
                                tabindex="-1"
                                aria-hidden="true"
                                data-select2-id="field-sort-by"
                            >
                                <option value="" selected="selected" data-select2-id="9">Sort By</option>
                                <option value="first_name.asc">Name</option>
                                <option value="created_at.desc">Newest</option>
                            </select>
                            <span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="8" style="width: 342.828px;">
                                <span class="selection">
                                    <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-field-sort-by-container">
                                        <span class="select2-selection__rendered" id="select2-field-sort-by-container" role="textbox" aria-readonly="true" title="Sort By">Sort By</span>
                                        <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
                                    </span>
                                </span>
                                <span class="dropdown-wrapper" aria-hidden="true"></span>
                            </span>
                        </div>
                    </div>
                    <div class="col-1"></div>
                    <div class="col-4 d-flex align-items-center">
                        <span>Search</span>
                        <div class="form-group w-100 m-0 pl-3"><input placeholder="Search users" value="" id="field-name" accesskey="n" type="text" name="name" class="people-name-search form-control field-name" /></div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

Le he agregado <div class="d-none d-lg-block"> para evitar que el actual code solamente se muestre en pantallas XL y LG, pero no se como hacer para que se vea bien en pantallas MD, SD y XS.

He intentado lo siguiente sin exito:

   <div class="d-lg-none d-xl-none">
        <div class="row">
            <div class="text-center d-flex justify-content-center flex-sm-row flex-column">
                <div class="col-6 col-sm-4 col-md-3"><h3>Title</h3></div>
                <div class="col-7 col-sm-6 col-md-4 d-flex align-items-center">
                    <span class="text-nowrap">Sort by:</span>
                    <div class="form-group w-100 m-0 pl-3">
                        <select name="sort_by" data-value="" data-null-option="Sort By" accesskey="s" class="custom-select form-control field-sort-by select2-hidden-accessible" tabindex="-1" aria-hidden="true" data-select2-id="12">
                            <option value="" selected="selected" data-select2-id="14">Sort By</option>
                            <option value="first_name.asc">Name</option>
                            <option value="created_at.desc">Newest</option>
                        </select>
                        <span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="13" style="width: auto;">
                            <span class="selection">
                                <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-sort_by-p3-container">
                                    <span class="select2-selection__rendered" id="select2-sort_by-p3-container" role="textbox" aria-readonly="true" title="Sort By">Sort By</span>
                                    <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
                                </span>
                            </span>
                            <span class="dropdown-wrapper" aria-hidden="true"></span>
                        </span>
                    </div>
                </div>
                <div class="col-1"></div>
                <div class="col-7 col-sm-6 col-md-4 d-flex align-items-center">
                    <span>Search</span>
                    <div class="form-group w-100 m-0 pl-3"><input placeholder="Search users" value="" accesskey="n" type="text" name="name" class="people-name-search form-control field-name" /></div>
                </div>
            </div>
        </div>
    </div>

1 respuesta 1

1

El problema es que dentro del row estás creando un contenedor flexible, de la cual, el contenedor flexible no respetará al row porque el contenedor padre debería ser el contenedor flexible, y lo que estás haciendo es al revés. Lo que hice fue primero crear un contenedor flexible, y dentro de este contenedor, estaría la clase row. Quedando de la siguiente forma:

<div class="text-center d-flex justify-content-center flex-sm-row flex-column">
  <div class="row w-100">
    <!--- Todo el contenido del card --->
  </div>
</div>

Aquí al row le asigno la clase w-100 para que el row ocupe todo el ancho de la pantalla.


También, a los bloques de adentro, les puse las siguientes clases:

<div class="row w-100">
  <div class="col-lg-2 col-md-12"><h3>Title</h3></div>
  <div class="col-lg-5 col-md-12 d-flex align-items-center p-2">
    <!--- Tu input SortBy --->
  </div>
  <div class="col-lg-5 col-md-12 d-flex align-items-center p-2">
    <!--- Tu input Search --->
  </div>
</div>

En donde:

  • col-lg-2, col-lg-5, col-lg-5: Los 3 bloques ocupan el ancho 12 de la pantalla (dividido en 2 / 5 / 5).
  • col-md-12, col-md-12, col-md-12: Y cuando el ancho de la pantalla sea sm, los 3 bloques ocuparán todo el ancho 12 de la pantalla.

Reestructurando tu código con las observaciones dadas, quedaría así:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="p-5">
  <div class="text-center d-flex justify-content-center flex-sm-row flex-column">
    <div class="row w-100">
      <div class="col-lg-2 col-md-12"><h3>Title</h3></div>
      <div class="col-lg-5 col-md-12 d-flex align-items-center p-2">
        <span class="text-nowrap">Sort by:</span>
        <div class="form-group w-100 m-0 pl-3">
          <select name="sort_by" data-value="" data-null-option="Sort By" accesskey="s" class="custom-select form-control field-sort-by select2-hidden-accessible" tabindex="-1" aria-hidden="true" data-select2-id="12">
            <option value="" selected="selected" data-select2-id="14">Sort By</option>
            <option value="first_name.asc">Name</option>
            <option value="created_at.desc">Newest</option>
          </select>
          <span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="13" style="width: auto;">
            <span class="selection">
              <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-sort_by-p3-container">
                <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
              </span>
            </span>
            <span class="dropdown-wrapper" aria-hidden="true"></span>
          </span>
        </div>
      </div>
      <div class="col-lg-5 col-md-12 d-flex align-items-center p-2">
        <span>Search:</span>
        <div class="form-group w-100 m-0 pl-3"><input placeholder="Search users" value="" accesskey="n" type="text" name="name" class="people-name-search form-control field-name" /></div>
      </div>
    </div>
  </div>
</div>


Puedes ver mejor los resultados en éste enlace.

5
  • el resultado no me queda de esa forma, voy a pasarte una screenshot
    – Carlos
    Commented el 7 feb. 2023 a las 16:08
  • ibb.co/k6784Dz y ibb.co/61xj704 Esto sucede cuando ajusto el tamano del navegador, no obstante, al presionar F5 se ve bien. Como se puede actualizar esto en tiempo real (para que se adapte)?
    – Carlos
    Commented el 7 feb. 2023 a las 16:11
  • Al presionar F5 se soluciona?... que extraño... estás agregando un código adicional? podrías compartirme tu código en codepen.io para visualizarlo mejor? Yo lo veo perfecto en todos los dispositivos... me avisas. Commented el 7 feb. 2023 a las 17:23
  • Correcto, al presionar F5 se soluciona, he estado horas viendo esto y no encuentro el problema.
    – Carlos
    Commented el 8 feb. 2023 a las 8:45
  • Estoy usando Laravel para generar un par de componentes HTML, creo que el problema es la siguiente linea: {!! Form::select('sort_by', \App\Models\User\User::SORTING_ORDERS, ['class' => 'custom-select', 'null-option' => 'Sort By']) !!} (que genera el HTML que he publicado en la pregunta, especificamente el select cuyo name es 'sort_by'. Sabes si debe hacer un js para inicializar eso?
    – Carlos
    Commented el 8 feb. 2023 a las 8:47

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.