I am trying to develop a webpage by React.js, Next.js, TailwindCSS, and HeadlessUI. It accepts a couple of inputs (I used Listbox of HeadlessUI for this purpose), and they must be placed consecutively to let users specify the required information for the platform.
After testing the developed user interface, I witnessed an overlapping in Listbox options. As shown in the screenshot below, they need to be rendered properly, showing up on each other, which is not intended. I need to resolve this issue
In TailwindCSS's documentation, there should be a specific solution to this error within their defined classNames, but I have not found it yet. The solution can be relevant to bringing an object to the front
There are two probable destinations where I need to make a modification
ClassName of the ListboxOption ( mother component ):
className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
ClassName of Listbox Options ( Child component ):
className = {
({
active
}) =>
`relative cursor-default select-none py-2 pl-10 pr-4 ${active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'}`
}
Related
I'm having trouble getting Alpine and Phoenix LiveViews to work together.
With the code provided below, liveview phx-click events do not fire, but Alpine works. CSS animations specified by Tailwind do not activate as they should on page load, but other CSS properties specified by Tailwind do style elements correctly. There is a card on the page in question that is supposed to flip over on page load, but it just loads in and never flips.
If I remove Alpine.start(), alpine does not work correctly on page load, but does start working after I follow a liveview component link on this page that looks like this: <.link navigate={~p"/lessons"}>. All Tailwind css, including animations, works correctly. Notably, some of Alpine is indeed working on page load. The element on the page with x-show="open" is hidden because its parent has x-data="{ open: false }". The #click="open - !open" does in fact change the value of open. What's broken is the way that x-show does not alter the display: none property as the value of open changes.
If I remove liveSocket.connect(), alpine works on page load, but of course then liveviews don't work. The card never flips. It just loads in overturned. I don't understand why removing the socket connection disrupts the CSS.
If I move Alpine.start() to just after liveSocket.connect(). Alpine does not work on page load, but all Tailwind css and liveview functionality works correctly.
Inscrutably (to me), if I remove both Alpine.start() and liveSocket.connect(), Alpine works just fine on page load, but also here of course liveviews don't work.
I'm having a tough time searching for what Alpine.start() actually does, and worse, I'm struggling to understand its interactions with liveSocket.connect().
Relevant portion from app.js
import Alpine from '../vendor/alpine'
window.Alpine = Alpine
Alpine.start()
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
params: { _csrf_token: csrfToken },
hooks: Hooks,
dom: {
onBeforeElUpdated(from, to) {
if (from._x_dataStack) {
window.Alpine.clone(from, to)
}
}
},
})
// connect if there are any LiveViews on the page
liveSocket.connect()
Relevant portion from nav.ex, a live componennt
<div class="relative ml-3" x-data="{ open: false }">
<button
#click="open = !open"
#click.outside="open = false"
type="button"
class="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-green focus:ring-offset-2"
id="user-menu-button"
aria-expanded="false"
aria-haspopup="true"
>
<span class="sr-only">Open user menu</span>
<img
class="h-8 w-8 rounded-full"
src="https://i.kym-cdn.com/photos/images/facebook/001/431/201/40f.png"
alt=""
/>
</button>
<!--
Dropdown menu, show/hide based on menu state.
-->
<div
class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu-button"
tabindex="-1"
x-show="open"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
x-cloak
>...</div>
This issue was due to the context in which the live component was rendered. The live component was being rendered outside of a live view, which is not allowed.
I changed the live component in nav.ex to a regular Phoenix.Component. Then I removed the following lines from app.js:
window.Alpine = Alpine
Alpine.start()
I kept the Alpine import line import Alpine from '../vendor/alpine'
With those changes, I have working Alpine, liveview, and CSS on page load.
I have a react project, and I'm creating a className for a div using classname package and tailwind classes. This div is actually the root element of a component that has some classes and accepts some from outside. The final class looks like below:
class="flex-1 bg-white border p-8 mb-6 rounded-md tracking-wide mt-1 !mb-0 md:mb-6 !bg-transparent md:bg-white border-0 md:border-1 !p-0 md:!p-6 tracking-wide relative"
It works fine when I test it on my local branch and the bottom margin is zero. But when I push it to my main branch and it builds what I see on the browser is different. The '!mb-0' got overridden and the mb-6 still shows. This problem is repeated everywhere.
Is there a way to avoid this so what we see on the local host acts exactly like the one on the main branch and demo after deploy?
This is how the margin classes look like after deploy
I was wondering if there is a way to chain multiple tailwind css classes on a single hover instance on an html element instead of using multiple hover instances.
For instance instead of this
<button class="hover:bg-blue-900 hover:text-white"></button>
whether you can have this or something else
<button class="hover:bg-blue-900:text-white"></button>
No there isn't. As from the docs(https://tailwindcss.com/docs/hover-focus-and-other-states), you can see they themselves add multiple classes for focus/hover.
However you can create reusable styles to counter this
Sadly it seems not. Maybe something that should be suggested to the team
I was trying to do something similar, i wanted the text to change color when hover the div.
searching in the docs i found the 'group' that helped me:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
i tried different types of hover like:
hover:bg-green-600 text-gray-50
hover:[bg-green-600 text-gray-50]
hover:(bg-green-600 | text-gray-50)
Maybe you can try wrapping the button in a div and add the group class
my code before, did not work like this
<Link to='/home'>
<div className="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:(bg-green-600 text-gray-50)">
<span className="text-[15px] ml-4 text-gray-500 font-bold">Home</span>
</div>
</Link>
after using gruop
<Link to='/home' className='group'>
<div className="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer group-hover:bg-green-600" >
<span className="text-[15px] ml-4 text-gray-500 group-hover:text-gray-50 font-bold">Home</span>
</div>
</Link>
with group when i hover the div it also change the span text color, like this the cursor don't need to be right on top of the word to make hover work.
but I still wish there was a way to put more than one class on the same hover, I hope they add it in the future...
hope it may help
I stumbled upon the same issue and was going to write a Tailwind plugin for that but it turns out that it's hard to mess with the rules they have set, you can only extend it by adding new variants and utilities but cannot do something like hover:(text-white bg-red-500).
However, I did find out about twin.marco that has this variant groups feature so check do check that out.
When I run this code it works fine.
return (
<Link href={path}>
<h2
className={`text-xs w-20 sm:text-sm sm:w-24 md:text-lg md:w-28 lg:text-xl lg:w-36 font-semibold text-sky-500 py-1 text-center cursor-pointer capitalize bg-white rounded-lg hover:underline ${
active && "text-amber-400 underline"
}`}>
{name}
</h2>
</Link>
);
When I change the 500 to a 400 it doesn't work. I have seen this happen with several color combinations. Also, early today it was working with 400. I came back several hours later with no code changed and it suddenly wasn't working. Has anyone dealt with something like this before? I have searched the web and have found nothing regarding this issue. Thanks.
I am building a gatsby site and I want to have my header change background color opacity as I scroll down. What's the best way to approach this?
I currently have this, where isScrolled is a state value that I'm updating with a custom hook. The problem I have is that there is no transition appearing, I'm pretty sure because React is re-rendering the whole component when the state changes.
What would be the appropriate tool / method for solving this problem?
<header
className={
`h-16 z-10 fixed top-0 left-0 w-screen transition-all`
${
isScrolled ? "bg-white" : "bg-transparent"
}`
}
>
<div className="px-8 container mx-auto flex items-center justify-between h-full">
<Logo />
<nav>
<HeaderLink to="about-us">About</HeaderLink>
<HeaderLink to="blog">Blog</HeaderLink>
<HeaderLink to="contact">Contact</HeaderLink>
</nav>
</div>
</header>
I've tried the HeadlessUI Transition component but that doesn't work because it only transitions in an entire component (as opposed to a property) and I haven't been able to get React-Transition-Group working either. Any help would be appreciated,
Thanks
try use this in your component,
...
const [isScrolled, setIsScrolled] = useState(false);
...
<header
className={`h-16 z-10 fixed top-0 left-0 w-screen transition-all duration-200
${isScrolled ? "bg-white" : "bg-transparent"}`}
>
and read this article to detect the correct scroll event.
Happy coding!