I'm facing with this issue, my ul element can't scroll. I'm using ReactJS with Tailwind CSS. Can someone help me solve this problem? Thank guys so much.
When I add h-96 attribute for it. But how can I make it proper display?
My search component
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {useState} from "react";
export default function SearchBar({isSearchOpen, 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.username.toLowerCase().includes(searchWord.toLowerCase());
});
if (searchWord === "") {
setFilteredData([]);
} else {
setFilteredData(newFilter);
}
};
return (
<>
<div className={`${!isSearchOpen && "scale-x-0"} origin-left duration-150 w-96 top-0 flex flex-col h-screen rounded-r-2xl border-r ${isSearchOpen && "border-l"} bg-white fixed left-20 z-20`}>
<div className="p-5 pt-6">
<span className="text-2xl font-semibold">Search</span>
</div>
<div>
<ul>
<div className="p-5">
<div className="relative">
<FontAwesomeIcon icon="fa-solid fa-magnifying-glass" className="absolute left-3 top-3 text-gray-300"/>
<input value={wordEntered}
onChange={(event) => handleFilter(event)}
type="text"
className="p-2 bg-gray-100 rounded-lg border-none w-full pl-10 align-middle focus:ring-0"/>
</div>
</div>
{filteredData.length !== 0 &&(
<ul className="overflow-y-scroll pt-2 h-96">
{filteredData.map((value, index)=>{
return (
<div key={index}>
<a href={route('profile.show', value.username)} className="flex items-center cursor-pointer p-2 pl-6 rounded-md hover:bg-gray-100">
<img className="rounded-full" src={`/storage/`+value.image} alt="avt" width="46"/>
<div className="w-72 m-auto">
<div className="text-sm font-medium pl-3">
<span>{value.username}</span>
</div>
<div className="text-gray-500 text-sm pl-3">
{value.name}
</div>
</div>
</a>
</div>
)
})}
</ul>
)}
</ul>
</div>
</div>
</>
);
}
My sidebar component
<nav className={`w-20 lg:w-80 sticky top-0 flex flex-col p-5 pt-8 duration-200 h-screen border-r`}>
<a href={route('/')} className="flex gap-x-4 items-center cursor-pointer">
<img src={logo} alt="logo" width="39"/>
<h1 className={`font-medium text-xl duration-300 scale-0 ${!isSearchOpen && "lg:scale-100"} ${isSearchOpen && "scale-0"}`}>VMUSocial</h1>
</a>
<ul className="pt-6 space-y-5">
<ItemLink href={route('/')} active={route().current('/')} ic="fa-solid fa-house" isSearchOpen={isSearchOpen}>Home</ItemLink>
<a onClick={() => setIsSearchOpen(!isSearchOpen)} className="flex items-center gap-x-4 cursor-pointer p-2 rounded-md hover:bg-gray-100">
<div className="text-2xl">
<FontAwesomeIcon icon="fa-solid fa-magnifying-glass" />
</div>
<span className={`hidden ${!isSearchOpen && "lg:inline"} ${isSearchOpen && "hidden"} origin-left duration-250`}>Search</span>
</a>
<li className="flex items-center gap-x-4 cursor-pointer p-2 rounded-md hover:bg-gray-100">
<div className="text-2xl">
<FontAwesomeIcon icon="fa-regular fa-comment-dots" />
</div>
<span className={`hidden ${!isSearchOpen && "lg:inline"} ${isSearchOpen && "hidden"} origin-left duration-250`}>Messages</span>
</li>
<a onClick={() => openNewPostModal()} className="flex items-center gap-x-4 cursor-pointer p-2 rounded-md hover:bg-gray-100">
<div className="text-2xl">
<FontAwesomeIcon icon="fa-regular fa-square-plus" />
</div>
<span className={`hidden ${!isSearchOpen && "lg:inline"} ${isSearchOpen && "hidden"} origin-left duration-250`}>Create Post</span>
</a>
<ItemLinkProfile href={route('profile.show', user.username)} active={route().current('profile.show', user.username)} user={user} isSearchOpen={isSearchOpen} >Profile</ItemLinkProfile>
</ul>
<Menu as="div" className="mt-auto gap-x-4 relative text-left">
<Menu.Button className="w-full p-2 cursor-pointer rounded-md hover:bg-gray-100">
<div className="flex items-center gap-x-4">
<div className="text-2xl">
<FontAwesomeIcon icon="fa-solid fa-bars"/>
</div>
<a
type="button"
className={`hidden ${!isSearchOpen && "lg:inline"} ${isSearchOpen && "hidden"} origin-left duration-250`}>
More
</a>
</div>
</Menu.Button>
<Transition
as={Fragment}
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Menu.Items className="absolute bottom-left top-0 px-1 -translate-y-[calc(100%+5px)] w-56 rounded-md shadow-lg bg-white ring-1
ring-black ring-opacity-5 focus:outline-none divide-y divide-gray-100">
<div className="py-1">
<Menu.Item>
{({active}) => (
<Link href={route('profile.edit')}
className={`${
classNames(active
? 'bg-gray-100 rounded-md text-gray-900'
: 'text-gray-700'
, "block px-4 py-2 text-md text-gray-700")
}`}>
<FontAwesomeIcon icon="fa-regular fa-address-card" className="mr-2"/> Edit profile
</Link>
)}
</Menu.Item>
<Menu.Item>
{({active}) => (
<Link href={route('logout')} method="post"
className={`${
classNames(active
? 'bg-gray-100 rounded-md text-gray-900'
: 'text-gray-700'
, "block px-4 py-2 text-md text-gray-700")
}`}>
<FontAwesomeIcon icon="fa-right-from-bracket" className="mr-2"/> Log out
</Link>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
</nav>
<SearchBar isSearchOpen={isSearchOpen} data={allUsers}></SearchBar>
@theall-knowing So not sure about what u want to achieve, BTW this is purely a css problem could be React or simple html would be the same, if u want the list to take all the height set
overflow-y-auto and max-h-full
could work, u should see the scrollbar only if the elements are overflowing and the list should take the entire height.
@JabatoForever Thank you, unfortunately it does not work.
@theall-knowing quick fix could be don't give and height to the parent take the header out and give it an height now since they are in the same container u can give the bottom element an height of 100vh - [your header height] something like this
<div
className={`${!isSearchOpen && "scale-x-0"} origin-left duration-150 w-96 top-0 flex flex-col rounded-r-2xl border-r ${isSearchOpen && "border-l"} bg-white fixed left-20 z-20`}>
<div className="h-[400px]">
<div className="p-5 pt-6">
<span className="text-2xl font-semibold">Search</span>
</div>
<div className="p-5">
<div className="relative">
<FontAwesomeIcon icon="fa-solid fa-magnifying-glass"
className="absolute left-3 top-3 text-gray-300"/>
<input value={wordEntered}
onChange={(event) => handleFilter(event)}
type="text"
className="p-2 bg-gray-100 rounded-lg border-none w-full pl-10 align-middle focus:ring-0"/>
</div>
</div>
</div>
<div className="max-h-[100vh - 400px] overflow-y-auto">
{filteredData.length !== 0 && (
<ul className="overflow-y-scroll pt-2 flex-1">
{filteredData.map((value, index) => {
return (
<div key={index}>
<a href={route('profile.show', value.username)}
className="flex items-center cursor-pointer p-2 pl-6 rounded-md hover:bg-gray-100">
<img className="rounded-full" src={`/storage/` + value.image} alt="avt"
width="46"/>
<div className="w-72 m-auto">
<div className="text-sm font-medium pl-3">
<span>{value.username}</span>
</div>
<div className="text-gray-500 text-sm pl-3">
{value.name}
</div>
</div>
</a>
</div>
)
})}
</ul>
)}
</div>
</div>
Now the element should span the entire screen and the bottom one take the remaining height without overflowing since has max-h
@JabatoForever Thanks for your help
Please or to participate in this conversation.