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 that you have read and understand our privacy policy and code of conduct.

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