0

necesito ayuda con el siguiente tema, estoy armando una página con Laravel y Tailwind, lo que necesito es que en la pantalla, ambos laterales queden fijos en función del alto disponible de la pantalla y que la zona central si se pueda utilizar mediante un Scroll. Les muestro una imagen de lo que necesitaría hacer y luego les paso el código que estoy utilizando, y que no me funciona adecuadamente. introducir la descripción de la imagen aquí

El código que estoy utilizando es el siguiente:

  <body class="bg-gray-300">

    <h1 class="bg-gray-900 text-blue-300 font-bold text-center text-4xl p-4" >SISTEMA NACIONAL DE ESTADÍSTICAS DE EJECUCIÓN DE LA PENA</h1>

    <div class="grid grid-cols-12 gap-2 mt-3 px-2">
        <div class="col-span-full">
            <div class="mt-3 mb-3 text-center">
                @livewire('aplicarfiltros')
            </div>

        </div>
        <div class="border rounded-md border-cyan-500 col-span-2 p-2">
            @livewire('filtros')
        </div>
        <div class="bg-blue-500 col-span-8">C2</div>
        <div class="bg-blue-200 col-span-2">C3</div>
    </div>

Mediante este código, estoy creando las tres zonas que necesito, dentro del componente filtros, están los desplegables que se ven en la gráfica

<div>

<div class="mb-3">
    <label class="text-xs" for="anioCenso">Establecer el año</label>
    <select wire:model="anioCenso" id="anioCenso" class="hover:bg-gray-400 w-full p-1 rounded-md">
        <option value="0"></option>
        @foreach ($tb_aniCenso as $it)
            <option value="{{ $it->anio }}">{{ $it->anio }}</option>
        @endforeach
    </select>
</div>

<div class="mb-3">
    <label class="text-xs" for="tipServicio">Tipo de Servicio Penitenciario</label>
    <select wire:model="tipServicio" id="tipServicio" class="hover:bg-gray-400 w-full p-1 rounded-md">
        <option value="0"></option>
        @foreach ($tb_tipServicio as $it)
            <option value="{{ $it->item }}">{{ $it->descrip }}</option>
        @endforeach
    </select>
</div>
<div class="mb-3">
    <label class="text-xs" for="idProvincia">Provincia</label>
    <select wire:model="idProvincia" id="idProvincia" class="hover:bg-gray-400 w-full p-1 rounded-md">
        <option value="0"></option>

        @foreach ($tb_idProvincia as $it)
            <option value="{{ $it->item }}">{{ $it->descrip }}</option>
        @endforeach
    </select>
</div>
<div class="mb-6">
    <label class="text-xs" for="idEstab">Establecimiento</label>
    <select wire:model="idEstab" id="idEstab" class="hover:bg-gray-400 w-full p-1 rounded-md">
        <option value="0"></option>
        @if ($tb_idEstab)
            @foreach ($tb_idEstab as $it)
                <option value="{{ $it->nroID }}">{{ $it->Nombre }}</option>
            @endforeach
        @endif
    </select>
</div>

les muestro solo tres desplegables, pero el resto está definido de la misma manera.

Gracias y quedo a la espera de algún comentario.

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.