Currently, when I hover over the navbar, it expands its width, as desired.
However, I don't want my centered icons in the navbar to move along with the expansion. I want them to stay where they are originally.
Here's a visual of what's happening:
Code:
<div
id="sidebarContainer"
className="bg-red-500 lg:w-24 lg:hover:w-44 ease-in duration-300 h-screen flex justify-center items-center group "
>
<div
id="sidebarLinkContainer"
className="space-y-10 flex flex-col items-center z-10 "
>
<div
id="sidebarHomeDiv"
className="flex align-center space-x-4 items-center"
>
<HomeIcon className="text-white h-7" />
<p className="text-white hidden group-hover:block ">HOME</p>
</div>
</div>
</div>
Removing the justify-center styling from the div tag that has the id of sidebarContainer will solve the issue.
Additionally you can add relative left-8 styling or pl-8, whatever your preference is to the div that has the id of sidebarLinkContainer this should give the div space from the left
like this:
<div
id="sidebarContainer"
className="bg-red-500 lg:w-24 lg:hover:w-44 ease-in duration-300 h-screen flex items-center group "
>
<div
id="sidebarLinkContainer"
className="space-y-10 flex flex-col relative left-8 items-center z-10 "
>
<div
id="sidebarHomeDiv"
className="flex align-center text-center space-x-4 "
>
<HomeIcon className="text-white h-7" />
<p className="text-white hidden group-hover:block ">HOME</p>
</div>
</div>
</div>
Add padding to the right side instead of expanding container
The width for elements will stay the same and container size will increase
Related
I am making a navbar in Tailwind consisting of links but I cannot get them to vertically center:
Here is what it looks like:
Steps I have tried:
items-center
justify-center
Setting the parent to flex-col
None of these options work.
How do you get the links to be exactly in the middle of the navbar vertically ?
Here is the code:
import React from 'react'
import Logo from '../images/Logo.png'
const Navbar = () => {
return (
<div className="flex justify-between items-center bg-gray-900">
<div className="">
<img className="w-40 py-2 px-2" src={Logo}></img>
</div>
<div className="flex flex-row items-center justify-center">
<p className="px-4 text-white">About</p>
<p className="px-4 text-white">Books</p>
<p className="px-4 text-white">Videos</p>
<p className="px-4 text-white">Quotes</p>
</div>
</div>
)
}
export default Navbar
The divs inside the flex class are aligned at the center, but the issue appears to be the first dive with the h-24 class which also contains the logo image. The logo aligns at the top of the div with the height of h-24 which is taller than the div containing the menu items. If you get rid of the h-24 or align the image vertically, they all align vertically. Try this:
<div class="flex justify-between items-center bg-gray-900">
<div class="h-24 flex items-center">
<img class="w-40 py-2 px-2" src="https://via.placeholder.com/150x50"></img>
</div>
<div class="flex">
<p class="px-4 text-white">About</p>
<p class="px-4 text-white">Books</p>
<p class="px-4 text-white">Videos</p>
<p class="px-4 text-white">Quotes</p>
</div>
</div>
It is working just fine. Please recheck the code you have sent, is it what it is producing the output you have produced in your question.
<div class="flex justify-between items-center bg-gray-900 h-24">
<div class="">
<img class="w-40 py-2 px-2" src=""></img>
</div>
<div class="flex ">
<p class="px-4 text-white">About</p>
<p class="px-4 text-white">Books</p>
<p class="px-4 text-white">Videos</p>
<p class="px-4 text-white">Quotes</p>
</div>
</div>
The output generated by the following code :
EDIT: The problem is that the list items were in tags and not tags - when changing the links from to , the list items centered vertically automatically without any further changes needed.
import React from 'react'
import Logo from '../images/Logo.png'
const Navbar = () => {
return (
<div className="flex justify-between items-center bg-gray-900 fixed inset-x-0 z-40">
<div className="">
<img className="w-40 px-2 mt-6" src={Logo}></img>
</div>
<div className="flex flex-row items-center justify-center mt-6">
<p className="px-4 text-white">About</p>
<p className="px-4 text-white">Books</p>
<p className="px-4 text-white">Videos</p>
<p className="px-4 text-white">Quotes</p>
</div>
</div>
)
}
export default Navbar
I am trying to create tooltip here by using Tailwind css and displaying it on Pebble SVG
<div className="relative items-center group">
<span tw="flex items-center gap-1">
Payment method
<Pebble />
</span>
<div tw="bottom-0 flex flex-col items-center hidden group-hover:flex">
<span tw="relative p-2 text-sm text-inkWhite-100 bg-inkBlack-100">
If you'd like to change your payment method, go to section.
</span>
<div tw="w-3 h-3 -mt-2 rotate-45 bg-black"></div>
</div
Any other way around for it?
Using h-screen works until my datepicker comes up which expands the viewport
How do I make the background still fill (once a date box is hovered on it pops up the date picker)? The white space at the bottom of the date picker is the problem. I have a sidebar component for left-hand nav and a main content area.
Main content code:
.main-content {
#apply p-6 h-screen w-screen flex flex-col bg-slate-800 shadow-lg m-0 text-white;
}
Sidebar css:
.sidebar {
#apply h-screen w-20 flex flex-col bg-gray-900 shadow-lg m-0 px-3;
}
Datepicker code:
<div className="flex datepicker group-hover:scale-100 z-10">
<div className="grid grid-col-7 w-64 bg-gray-700 p-2 rounded-lg shadow-xl">
<div className="sub-text text-center">
{DateValue.monthLong} {DateValue.year}
<span
className="m-2 px-2 py-1 bg-gray-700 rounded-3xl hover:bg-gray-900 cursor-pointer"
onClick={(e) => changeMonth(e, false)}
>
<
</span>
<span
className="px-2 py-1 bg-gray-700 rounded-3xl hover:bg-gray-900 cursor-pointer"
onClick={(e) => changeMonth(e, true)}
>
>
</span>
</div>
<hr className="mb-2" />
<div className="grid grid-cols-7 pb-2">
<div className="text-center">Su</div>
<div className="text-center">Mo</div>
<div className="text-center">Tu</div>
<div className="text-center">We</div>
<div className="text-center">Th</div>
<div className="text-center">Fr</div>
<div className="text-center">Sa</div>
</div>
<div className="grid grid-cols-7">{daysAsInput()}</div>
</div>
</div>
CSS (Tailwind Apply)
.datepicker {
#apply absolute transition-all duration-100 scale-0;
}
.datepicker-day {
#apply m-1 bg-gray-700 rounded-lg shadow-lg
cursor-pointer items-center justify-center
p-1 text-sky-400 hover:bg-gray-900;
}
It scales to 100 when the input is hovered over.
Layout code:
<div className="flex">
<Sidebar />
<div className="main-content min-h-screen">{children}</div>
</div>
daysAsInput code:
const daysAsInput = () => {
// loop through the days in the month but start at the first day of the week
const inputs = [];
for (
let i = firstDayOfMonthAligned.day;
i <= firstDayOfMonthAligned.daysInMonth;
i++
) {
// create input that's grayed out if it's not in the current month
inputs.push(
<input
key={'previousMonth ' + i}
className="datepicker-day disabled:text-gray-400"
type="button"
value={i}
disabled={true}
onClick={dateChanged}
/>
);
}
for (let i = 1; i <= daysInMonth; i++) {
inputs.push(
<input
className="datepicker-day"
key={i}
type="button"
name="day {i}"
value={i}
onClick={dateChanged}
/>
);
}
return inputs;
};
The problem is caused by the fact that you position the datepicker absolute.
From the docs:
The element is removed from the normal document flow, and no space is
created for the element in the page layout.
You must take another approach, probably with z-index or javascript.
Try to change it to min-h-screen . That should do the magic
I think the problem is, we need to adjust the height styling of main-content class.
We can add "min-h-full" to the main-content class,
.main-content {
#apply p-6 h-screen w-screen flex flex-col bg-slate-800 shadow-lg m-0 text-white min-h-full;
}
This tailwind class will adjust the height of main-content to 100%. And the white background, have no room anymore.
Here was the reference of min-height
Thank you
I'm currently using tailwind css as a beginner.
What i am trying to do is to have a 2 element on top of each other with the same width but different pixel size.
What i have now is.
If you can't get what i'm trying to do, you can check the attached file.
<div className="w-full h-screen">
<div className="max-w-[1500px] px-4 mx-auto h-full">
<div className="flex h-[700px] ">
<div className="w-[1000px] flex flex-col justify-start">
<div className="">
<h1 className="w-full font-bold inline border-y-2 ">
The moon is made
</h1>
</div>
<p className="text-[100px] font-bold ">
of
<span className="primary-bg text-[100px] font-bold inline">
Pancakes.
</span>
</p>
</div>
<div className="w-[500px]">qwe</div>
</div>
</div>
</div>
And i wanted to achieve is this.
You can do that by choosing the right font-size for every text because the width is depending on the font size
I tried to copy the image you provided and made it as simple as I can
check it here : https://play.tailwindcss.com/H4pBcGRvag
Its been a while since I coded in react and I'm working on teaching myself again. Also this is the first time I've used Tailwind CSS. I'm working with a navbar component that has a search bar to filter data within a database. I have everything setup correctly for the most part. The issue is that when you type in the search bar, the user img, and buttons moved like the nav sections is being pushed down when the filter response shows up below the search bar.
Here is my code for the navbar with the search bar
import React, { useState } from "react";
import UserDropdown from "../../components/Dropdowns/UserDropdown.js";
import AccountDropdown from "../Dropdowns/AccountDropdown.js";
export default function Navbar({ data }) {
const [filteredData, setFilteredData] = useState([]);
const [wordEntered, setWordEntered] = useState("");
const handleFilter = (event) => {
const searchWord = event.target.value;
setWordEntered(searchWord);
const newFilter = data.filter((value) => {
return value.dealership.toLowerCase().includes(searchWord.toLowerCase());
});
if (searchWord === "") {
setFilteredData([]);
} else {
setFilteredData(newFilter);
}
};
return (
<>
{/* Navbar */}
<div className="relative bg-lightBlue-600 md:pt-32 pb-32 pt-12">
<nav className="absolute top-0 left-0 w-full z-10 bg-transparent md:flex-row md:flex-nowrap md:justify-start flex items-center p-4">
<div className="w-full mx-autp items-center flex justify-between md:flex-nowrap flex-wrap md:px-10 px-4">
{/* Brand */}
<a
className="text-white text-sm uppercase hidden lg:inline-block font-semibold"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Dashboard
</a>
<div className="md:flex flex-row flex-wrap items-center lg:ml-auto mr-3">
<AccountDropdown />
</div>
{/* Form */}
<form className="md:flex hidden flex-row flex-wrap items-center lg:ml-auto mr-3">
<div className="relative flex w-full flex-wrap items-stretch">
<span className="z-10 h-full leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-search"></i>
</span>
<input
type="text"
placeholder="Search here..."
className="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:ring w-full pl-10"
value={wordEntered}
onChange={handleFilter}
/>
</div>
{filteredData.length != 0 && (
<div className="dataResult">
{filteredData.slice(0, 15).map((value) => {
return (
<a className="dataItem" href="/admin/dashboard">
<p>{value.dealership}</p>
</a>
);
})}
</div>
)}
</form>
{/* User */}
<ul className="flex-col md:flex-row list-none items-center hidden md:flex">
<UserDropdown />
</ul>
</div>
</nav>
</div>
{/* End Navbar */}
</>
);
}
Here are a few pics of what it does.
I guess it is because of align-items property. When the data shows, the height of the component is changing so alignment should be flex-start in css. You can remove items-center because its default value is flex-start in css. Or you can replace with items-start.
You wrote
<nav className="absolute top-0 left-0 w-full z-10 bg-transparent md:flex-row md:flex-nowrap md:justify-start flex items-center p-4">
And I think it should be like this
<nav className="absolute top-0 left-0 w-full z-10 bg-transparent md:flex-row md:flex-nowrap md:justify-start flex items-start p-4">
Or this
<nav className="absolute top-0 left-0 w-full z-10 bg-transparent md:flex-row md:flex-nowrap md:justify-start flex p-4">