0
667
VisualizaçõesTailwind CSS espacios en blanco innecesarios
Estoy tratando de usar esta plantilla de inicio de administrador que encontré en la caja de herramientas de viento de cola y estoy tratando de personalizarla a mi gusto. Dividí el código de la plantilla en 3 archivos separados, que se muestran a continuación, y cuando reemplacé la variable children en el archivo principal con algo parecido a test , obtengo una barra de desplazamiento con muchos espacios en blanco adicionales en la parte inferior de la página, como se muestra aquí 
El archivo 'Principal' que importa la barra de navegación y la barra lateral y luego también tiene un marcador de posición para el contenido de la página principal
import Navbar from "@/Components/Layouts/Navbar" import Sidebar from "@/Components/Layouts/Sidebar" export default function Main({ name, children }) { return ( <div className="bg-gray-800 flex flex-col h-screen"> <Navbar /> <div className="flex flex-col md:flex-row flex-grow"> <Sidebar /> <div className="flex-1 bg-gray-100"> <div className="bg-gray-800 pt-3"> <div className="rounded-tl-3xl bg-gradient-to-r from-blue-900 to-gray-800 p-4 shadow text-2xl text-white"> <h3 className="font-bold pl-2">{name}</h3> </div> </div> <div className="p-4"> {children} </div> </div> </div> </div> ) }la barra de navegación
import { useState } from "react"; export default function Navbar() { const [dropdownState, setDropdownState] = useState('invisible'); const toggleDropdown = () => { console.log('toggle'); if (dropdownState) { setDropdownState(null); } else { setDropdownState('invisible') } } return ( < nav className="bg-gray-800 pt-2 md:pt-1 pb-1 px-1 mt-0 h-auto sticky w-full z-20 top-0" > <div className="flex flex-wrap items-center"> <div className="flex flex-shrink md:w-1/3 justify-center md:justify-start text-white"> <a href="#"> <span className="text-xl pl-2"><i className="em em-grinning"></i></span> </a> </div> <div className="flex flex-1 md:w-1/3 justify-center md:justify-start text-white px-2"> <span className="relative w-full"> <input type="search" placeholder="Search" className="w-full bg-gray-900 text-white transition border border-transparent focus:outline-none focus:border-gray-400 rounded py-3 px-2 pl-10 appearance-none leading-normal" /> <div className="absolute search-icon" style={{ top: "1rem", left: ".8rem" }}> <svg className="fill-current pointer-events-none text-white w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"> </path> </svg> </div> </span> </div> <div className="flex w-full pt-2 content-center justify-between md:w-1/3 md:justify-end"> <ul className="list-reset flex justify-between flex-1 md:flex-none items-center"> <li className="flex-1 md:flex-none md:mr-3"> <a className="inline-block py-2 px-4 text-white no-underline" href="#">Active</a> </li> <li className="flex-1 md:flex-none md:mr-3"> <a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a> </li> <li className="flex-1 md:flex-none md:mr-3"> <div className="relative inline-block"> <button onClick={toggleDropdown} className="drop-button text-white focus:outline-none"> <span className="pr-2"><i className="em em-robot_face"></i></span> Hi, User <svg className="h-3 fill-current inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /> </svg></button> <div id="myDropdown" className={"dropdownlist absolute bg-gray-800 text-white right-0 mt-3 p-3 overflow-auto z-30 " + dropdownState}> <a href="#" className="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i className="fa fa-user fa-fw"></i> Profile</a> <a href="#" className="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i className="fa fa-cog fa-fw"></i> Settings</a> <div className="border border-gray-800"></div> <a href="#" className="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i className="fas fa-sign-out-alt fa-fw"></i> Log Out</a> </div> </div> </li> </ul> </div> </div> </nav > ) }y la barra lateral
import { InertiaLink } from "@inertiajs/inertia-react" export default function Sidebar() { const linkClass = (route) => { if (window.location.href.indexOf(route) !== -1) { return ' border-blue-600' } else { return ' border-gray-800' } } const iconClass = (route) => { if (window.location.href.indexOf(route) !== -1) { return ' text-blue-600' } } const textClass = (route) => { if (window.location.href.indexOf(route) !== -1) { return ' text-white md:text-white' } else { return ' text-gray-600 md:text-gray-400' } } return ( <div className="bg-gray-800 shadow-xl h-16 fixed bottom-0 mt-12 md:relative md:h-screen z-10 w-full md:w-48"> <div className="md:mt-12 md:w-48 md:fixed md:left-0 md:top-0 content-center md:content-start text-left justify-between"> <ul className="list-reset flex flex-row md:flex-col py-0 md:py-3 px-1 md:px-2 text-center md:text-left"> <li className="mr-3 flex-1"> <InertiaLink href="/owner/dashboard" className={"block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900" + linkClass('/owner/dashboard')}> <i className={"fas fa-tv pr-2 " + iconClass('/owner/dashboard')}></i><span className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block" + textClass('/owner/dashboard')}>Dashboard</span> </InertiaLink> </li> <li className="mr-3 flex-1"> <InertiaLink href="/owner/restaurants" className={"block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900" + linkClass('/owner/restaurants')}> <i className={"fa fa-utensils pr-2 " + iconClass('/owner/restaurants')}></i><span className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block" + textClass('/owner/restaurants')}>Restaurants</span> </InertiaLink> </li> <li className="mr-3 flex-1"> <a href="#" className={"block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900" + linkClass('/owner/layouts')}> <i className={"fas fa-pencil-ruler pr-2 " + iconClass('/owner/layouts')}></i><span className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block" + textClass('/owner/layouts')}>Layouts</span> </a> </li> <li className="mr-3 flex-1"> <a href="#" className={"block py-1 md:py-3 pl-0 md:pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900" + linkClass('/owner/payments')}> <i className={"fa fa-wallet pr-2 " + iconClass('/owner/payments')}></i><span className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block" + textClass('/owner/payments')}>Payments</span> </a> </li> </ul> </div> </div> ) }EDITAR Aquí hay un enlace a un codepen con el código para ayudar con la depuración https://codepen.io/hcphoon01/pen/OJmXrRN
ACTUALIZAR Ahora solucioné un problema pero creé otro, solucioné el problema de los espacios en blanco cambiando el div de nivel más alto a <div className="bg-gray-800 flex flex-col h-screen"> y luego agregando flex-grow en el div de arriba donde se incluye la barra lateral, aunque ahora el problema es que si el contenido es más grande que la pantalla, la barra lateral no crece para caber. El codepen se ha actualizado para reflejar esto.
3 Respostas
Responde à pergunta0
Compruebe su componente de la Sidebar . Debe ser h-auto o h-full o h-initial en lugar h-screen . porque se colocó en el componente main , por lo que solo main debería ser h-screen .
cambie este código en lugar de usar h-screen .
<div class="bg-gray-800 shadow-xl h-16 bottom-0 mt-12 md:relative z-10 w-full md:w-48">controlar Tailwind Paly
Para obtener más información sobre las unidades de Viewport en CSS, consulte este documento web
0
Cuando agrega la clase h-screen , establece la altura en 100vh , que abarcará la altura de la ventana gráfica. El problema aquí es que, dado que estamos fijando la altura, el <div> no crecerá para adaptarse a sus hijos y las cosas se desbordarán.
Para solucionar esto, podemos establecer min-height en su lugar, con la clase de utilidad min-h-screen . Esto permitirá que el <div> crezca para adaptarse a sus elementos secundarios, pero evitará que se reduzca por debajo de la altura de la ventana gráfica. Probé esto en su CodePen proporcionado y parece hacer lo que quiere.
Nota: Hay algunas peculiaridades con el uso de 100vh en dispositivos móviles. Simplemente busque "problema móvil 100vh" para encontrar más información, pero debe probarlo para ver si este comportamiento es lo que desea. Alternativamente, puede usar unidades de porcentaje con h-full / min-h-full , pero deberá asegurarse de que todos los ancestros tengan height / min-height establecido en 100 %, incluidos <body> y <html> etiquetas. Pruebe las cosas en varios navegadores móviles para descubrir cuál funciona mejor para su aplicación.
0
En el div principal en el archivo principal, agregue y m-0 p-0 al nombre de clase y en el div para "Prueba", agregue espacios en blanco normales al nombre de clase como se ilustra a continuación:
import Navbar from "@/Components/Layouts/Navbar" import Sidebar from "@/Components/Layouts/Sidebar" export default function Main({ name, children }) { return ( <div className="m-0 p-0 bg-gray-800 flex flex-col h-screen"> <Navbar /> <div className="flex flex-col md:flex-row flex-grow"> <Sidebar /> <div className="flex-1 bg-gray-100"> <div className="bg-gray-800 pt-3"> <div className="rounded-tl-3xl bg-gradient-to-r from-blue-900 to-gray-800 p-4 shadow text-2xl text-white"> <h3 className="font-bold pl-2">{name}</h3> </div> </div> <div className="p-4 whitespace-normal"> Test </div> </div> </div> </div> ) }