Newbie here and just getting acclimated to Tailwind and CSS. I want to ensure the structure of my elements are correct prior to moving forward. I'm trying to create a dashboard consisting of i) a fixed top nav bar, ii) a fixed left sidebar and iii) a fixed submenu.
A couple questions:
At the moment I've hacked together something that works, but uncertain if I'll run into problems later on down the road. Are my fixed and flex divs sufficient to accomplish i through iii above?
The fixed submeu (id="sub-menu") I can't get to stay "sticky" relative to the top of the id="dashboard content"
Here's my code thus far. Would be grateful for any pointers or direct towards resources that elaborate on something similar.
<body>
<!-- Top Nav Bar -->
<nav class="sticky p-4 bg-myDarkGrey shadow-md top-0 z-50">
<div class="flex justify-between">
<!-- Logo Left Side -->
<div class="flex">
<img src="img/logo-placeholder.png" alt="" class="w-10 h-10" />
</div>
<!-- Profile Right Side -->
<div class="inline-flex">
<img
src="img/6991.png"
alt=""
class="rounded-full w-10 h-10 ring-2 ring-gray-50"
/>
</div>
</div>
</nav>
<!-- left nav bar -->
<div class="fixed w-1/5 bg-white h-screen shadow-sm top-0 mt-[72px]">
<div class="px-10 pt-20">
<h1 class="pb-5">Dashboards</h1>
<ul class="space-y-1 list-inside">
<li>Overview</li>
<li>Next Section</li>
<li>Next Section</li>
</ul>
</div>
</div>
<div id="dashboard-content" class="w-full bg-myBgGrey inline-block h-[1500px] pl-[20%] z-100">
<div id="sub-menu" class="relative top-0 bg-gray-500 w-full h-10"></div>
</div>
</body>
Related
Screenshot https://imgur.com/a/eFzmIAl
Hello Developers please help me to remove that spaces in the right side image gap in the top
side of image how to reduce it, i searched alot and tested few method but not pass
please guide. I am new to this Tailwindcss. Thanks for the support.
See Image Screenshot
Please check screenshot
https://imgur.com/a/eFzmIAl
<body>
<!-- Navigation Menu -->
<nav class="relative contain bg-slate-900 mx-auto p-4">
<!-- Flex Container -->
<div class="flex items-center justify-between">
<!-- Logo -->
<div class="pt-2 mx-auto">
<img src="img/logo.svg" alt="FIVERACK">
</div>
<!-- Menu Items -->
<div class="hidden space-x-5 text-yellow-200 mx-auto md:flex">
<a class="font-normal hover:font-bold" href="#">Pricing</a>
<a class="font-normal hover:font-medium" href="#">Products</a>
About
Careers
Community
</div>
<!-- Button Right Side -->
Get Started
</div>
</nav>
<!-- Hero Section -->
<section id="hero">
<!-- Flex Container -->
<div class="container flex flex-col-reverse md:flex-row items-center px-6 mx-auto mt-10 space-y-0 md:space-y-0">
<!-- Left Item -->
<div class="flex flex-col mb-32 space-y-12 md:w-1/2">
<h1 class=""></h1>
<h1 class="max-w-md text-4xl font-bold text-center md:text-5xl md:text-left">
Bring Everyone Together To Build Better Products
</h1>
<p class="max-w-sm text-enter text-darkGrayishBlue md:text-left">
Manage makes it simple for software teams to plan day-to-day tasks while keeping the
larger team goals in view.
</p>
<div class="flex justify-center md:justify-start">
Get Started
</div>
</div>
<!-- Image -->
<div class="md:w-1/2">
<img src="img/tech_stack.png">
</div>
</div>
</section>
</body>```
[1]: https://i.stack.imgur.com/OIgkL.png
[2]: https://i.stack.imgur.com/sLYP2.png
Change items-center to items-start in Flex container div
Change this :
<!-- Flex Container -->
<div class="container mx-auto mt-10 flex flex-col-reverse items-center space-y-0 bg-blue-400 px-6 md:flex-row md:space-y-0">
to
<!-- Flex Container -->
<div class="container mx-auto mt-10 flex flex-col-reverse items-start space-y-0 bg-blue-400 px-6 md:flex-row md:space-y-0">
I have the following problem with Tailwind CSS and the truncate helper.
The code for the following image:
<div class="w-full flex items-center flex-wrap gap-y-2">
<!-- The problem is here. This is correctly cut if longer than max-w-xs, -->
<!-- but the shortest words get cut even tho they have space to grow. -->
<h1 class="mr-auto max-w-xs truncate font-semibold text-2xl text-gray-800 leading-tight md:mr-6">
Audience
</h1>
<!-- Middle nav div -->
<div class="mr-auto">
... nav here
</div>
<!-- Right side buttons -->
<div class="flex flex-wrap">
... buttons
</div>
</div>
Removing the flex class from the parent fixes the truncate issue, but I obviously need the flex to put the 3 elements inline and wrap in smaller screens.
Any ideas? Thanks!
I tested this on my system and the Audience doesn't get truncated. Maybe you have a flex or grid above this one that's effecting it?
<div class="w-full flex items-center flex-wrap gap-y-2">
<h1 class="mr-auto max-w-xs truncate font-semibold text-2xl text-gray-800 leading-tight md:mr-6">Audience</h1>
<div class="mr-auto">... nav here</div>
<div class="flex flex-wrap">... buttons</div>
</div>
I have a navbar on my site, when the site is on mobile size I want to have my hamburger menu overlap the contents of my page.
This is my site :
<!-- logo Start -->
<div class="nav-logo">
<h1>My site</h1>
</div>
<!-- links Start -->
<div
class=
"
w-full
flex
flex-col
items-center
text-5xl
md:pr-20
"
>
<a href="#"
class="block md:inline-block">Work</a>
<a href="#"
class="block md:inline-block">About</a>
<a href="#"
class="block md:inline-block">Contact</a>
<div/>
<!-- links End -->
</nav>
<main>
<article>
<h1>Hello<h1/>
</article>
<main/>
I tried adding relative and z-10 both on my nav-links and nav but they dont work, they still push the content downwards instead of having that div overlap.
Any suggestions on what to do?
You'll have to work with relative absolute and z-index to make this work.
Logic:
Have parent relative having z-index value less than the child absolute div which will be used for navbar.
Output in large device:
Output in smaller device:
Code:
<div class="md:bg-yellow-400 h-screen relative z-0 flex bg-gray-500">
<div class="invisible md:visible bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 md:invisible"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
Further more you can use this tailwind play link
Refer this for responsive sidebar with / without hamburger menu
I'm trying to achieve the following layout in Tailwind CSS for a dashboard.
The initial height will be the screen size and should never exceed the initial height.
The blue area of the dashboard is going to be empty initially (but it should occupy the whole area even when empty) and it will start adding information that eventually will outgrow the designated blue area and when that happens I would like that area to overflow in Y-axis with a scrollbar. My problem is that when the overflow happens the whole page overflows not just the blue section making that column going under the limits of the screen.
I created a CodePen with the HTML code that I currently have.
<div class="h-screen bg-black flex flex-col">
<div class="bg-green-200">NAVBAR</div>
<div class="bg-blue-200 flex-1">
<div class="flex h-full">
<!-- LEFT -->
<div class="flex-1 bg-yellow-200">
<div class="flex flex-col h-full">
<div class="flex-1 bg-blue-800 text-white text-2xl p-8">
This is the only area that will be growing
and should eventually overflow displaying
scrollbars only in the blue area.
What I'm having problem with is to initially
use all the available blue space and then when
the content overflows not making the whole page
scrolldown, only this blue section.
<!-- DIVS HERE SHOULD GROW AND OVERFLOW -->
<!-- Uncommenting the following statements will
show what is my current problem -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
</div>
<div class="flex-none bg-red-200 h-32">
This will always be fixed height
</div>
<div class="flex-none bg-red-300 h-20">
This will always be fixed height
</div>
</div>
</div>
<!-- //LEFT -->
<div class="flex-1 bg-yellow-300">MIDDLE</div>
<div class="flex-1 bg-yellow-400">RIGHT</div>
</div>
</div>
<div class="bg-green-200">
The Footer should always be visible
</div>
</div>
Any help will be really appreciated
I eventually managed to accomplish what I wanted and I'm sharing the code here, it seems I was misusing the overflow properties. With this the section can grow while the rest of the sections remain flexible but fixed.
<div class="h-screen bg-black flex flex-col">
<div class="bg-green-200">NAVBAR WORKING</div>
<div class="bg-black flex flex-col h-full overflow-y-auto">
<!-- THREE COLUMNS LAYOUT -->
<div class="flex h-full">
<!-- COLUMN ONE -->
<div class="flex-1 flex flex-col bg-white">
<div class="flex flex-col bg-red-500 h-full">
<div class="bg-white h-full flex-grow-0 overflow-y-auto">
<div class="flex flex-col">
<div class="h-48 bg-black"></div>
<div class="h-48 bg-red-700"></div>
<div class="h-48 bg-black"></div>
<div class="h-48 bg-red-700"></div>
<div class="h-48 bg-black"></div>
<div class="h-48 bg-red-700"></div>
<div class="h-48 bg-black"></div>
<div class="h-48 bg-red-700"></div>
</div>
</div>
<div class="bg-red-200 h-32 flex-none">
This will always be fixed height
</div>
<div class="bg-red-300 h-20 flex-none">
This will always be fixed height
</div>
</div>
</div>
<!-- COLUMN ONE -->
<!-- COLUMN TWO -->
<div class="flex-1 bg-yellow-300">MIDDLE</div>
<!-- COLUMN TWO -->
</div>
<!-- THREE COLUMNS LAYOUT -->
</div>
<div class="bg-green-200">
The Footer should always be visible
</div>
</div>
I am using tailwind css vanilla and I want to create a navbar inside the flex item that I have assigned as the visual page header content placeholder.
I encounter a problem while working on this, I have added padding all around with p-8 to the navbar element and I have notice that the navbar is overflowing over the flex item that is holding it.
I do not understand why is this behavior happening because I have added overflow-hidden to the flex item that is holding the navbar. Padding is not considered to be content?
I have tried different combination with display property and also with positioning, all without any result, therefore I need some help.
This is what I have done so far.
<link href="https://unpkg.com/tailwindcss#2.0.3/dist/tailwind.min.css" rel="stylesheet"/>
<div class="container mx-auto px-4 h-screen">
<div class="flex flex-col h-full content-start">
<div class="flex-grow w-full overflow-hidden bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
<nav class="p-8">
<a class="" href="#">
Home
</a>
<a class="" href="#">
Products
</a>
<a class="" href="#">
Discounts
</a>
<a class="" href="#">
Customers
</a>
</nav>
</div>
<div class="flex-grow my-px px-px w-full overflow-hidden bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 h-full">
<!-- Column Content -->
2
</div>
<div class="flex-grow my-px px-px w-full overflow-hidden bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 h-5">
<!-- Column Content -->
3
</div>
</div>
</div>
Thank you!
L.E. If you shrink the browser, the when the flex column item shrinks it overlaps the previous item. I have shrieked the browser window and I have notice that element 1 of the flex box is going under element 2 and if I go further I'm left only with element 3, the other 2 are going behind the last element 3 of the flex-box.