Basing on tailwindcss 2 modal example https://alpinetoolbox.com/examples/modal
I use modal dialog in my tailwindcss 2, Alpinejs 2 app and it works for me
except cases when I use a lot of data on the page with horizontal scrolling.
In this case modal dialog covers only visible part of the screen, what is not good.
I tried some ways to set height of modal to full height, like :
<!--Overlay-->
<div class="overflow-auto w-full h-full" style="background-color: rgba(0,0,0,0.5)" x-show="showModal" :class="{ 'absolute inset-0 z-10 flex items-center justify-center': showModal }">
but failed.
Could you please check pen: https://codepen.io/petrogromovo/pen/yLMNVLr
You can simply replace the position absolute with fixed on the overlay div.
<div
class="overflow-auto w-full h-full"
style="background-color: rgba(0,0,0,0.5)"
x-show="showModal"
:class="{ 'fixed inset-0 z-10 flex items-center justify-center': showModal }"
>
Related
I try using flowbite carousel with next app. Before the page become interactive, the image has a hidden class. After page become interactive, a JavaScript file removes the hidden class and makes slider work. The problem is when JavaScript loads, and slider start sliding, the image become: (Rendered size: 0 × 0 px) and doesn't renders!
Here's The Carousel Code:
`import Image from "next/image";
export default function Slider() {
return (
<div id="default-carousel" className="relative" data-carousel="slide">
{/* Carousel wrapper */}
<div className="relative h-56 overflow-hidden rounded-lg md:h-96">
{/* Item 1 */}
<div className="hidden duration-700 ease-in-out" data-carousel-item>
<span className="absolute text-2xl font-semibold text-white -translate-x-1/2 - translate-y-1/2 top-1/2 left-1/2 sm:text-3xl dark:text-gray-800">
First Slide
</span>
<Image
src={"/assets/slide1.jpg"}
className="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-contain"
alt="..."
fill
/>
</div>
);
}
Removed unnecessary parts of code here.
Chrome Dev Tools:
Screenshot of error
I've tried fill property, giving static width and height. None of them worked.
I'm trying to style a form using, but when I put in the margin for the left and right (mx-4), it is only add the margin on the left side and on the right side it's going off of the page.
export default function TextArea() {
return (
<div className="w-full mt-1 ">
<p className="text-purple-800 font-medium px-4 py-1">
What are you thinking?
</p>
<textarea
rows={4}
name="comment"
id="comment"
className="w-full sm:w-auto md:w-2/3 mx-4 h-96 rounded-md border-white sm:text-md placeholder-gray-300 text-black"
placeholder="Type your idea here..."
/>
</div>
)
}
I see you are using full width w-full for the div also the same thing for text area.
Here when you give w-full it will take the full with of the parent. Here Div is taking full width of its parent and text area is taking the width of div. Here you need to check the div's parent and set the correct width to it.
I believe mx-4 is being applied at the other end of the text area. You can inspect and see this in your browser
The problem is due to w-full. The class w-full on the parent div is causing the form to take up the full width of its parent container.
Change it to mx-auto
Change this
<div className="w-full mt-1 ">
to
<div className="mx-auto mt-1">
I have been building a responsive Web Application that on loading with an address bar hides the bottom-most navbar. Is there a way to load it with the entire layout?
Here's how it should load:
But here's how it loads on a smartphone:
However, when I scroll a little, it appears exactly as I want it to be:
I have used flex display as shown below: [I am using tailwind along with React JS]:
<div className='flex flex-col justify-around w-screen h-screen align-center'>
{topNavBarprops ? (
<TopNavBar {...topNavBarprops} />
) : (
<TopNavBar headerText={'Unverified Account'} />
)}
<div className='flex flex-col flex-auto max-h-screen overflow-auto'>
{childComponent}
</div>
<BottomNavBar />
</div>
Your body/content div is too tall, likely pushed down by the top navbar, to resolve this, you can set the height value of the body/content div to be calc(100vh - height of navbar here)
I'm embedding React Draft Wysiwyg component within a flexbox. The flexbox should consist of this component alongside a circle div.
For some reason, the circle div gets squished and is not circular, but instead is narrower than it should be.
I can reduce this 'squishiness' by passing the wrapperClassName prop and adding w-fit (which is the Tailwind equivalent of width: fit-content; in pure CSS), however, the circle is still squished on narrower screens.
Image:
Code:
<div className='flex gap-x-2 items-center w-full min-w-[480px] h-full py-3 px-2 bg-gray-50 rounded'>
{/* Rich text editor component */}
<Editor
wrapperClassName='w-fit'
/>
{/* Circle */}
<div className={'group w-9 h-9 rounded-full'} />
</div>
How can I get the Editor component to take all remaining width without taking away the space that the circle div needs to remain a proportional circle?
You could give the Editor w-full and give the circle a p-5 instead of w-9
Is this what you meant: https://play.tailwindcss.com/cPxzlro2re
So my site's navbar shows up differently on Android and iOS phone, on Chrome/Android it looks fine but for some reason, the hamburger icon got stretched out and covers the whole page on Safari/iOS.
I use TailwindCSS and here's my code:
<nav className="fixed sticky top-0 z-10 flex gap-2 p-2 bg-white cursor-pointer md:pl-4">
<img
onClick={toggleOpen}
src="/hamburger-menu-red.png" className="w-10" alt="menu"
/>
{props.showLogo && (
<Link to="/">
<img
src="/cooken-logo.png" alt="cooken-logo" className="w-20 cursor-pointer" />
</Link>
)}
</nav>
Is it because I don't specify the height of the hamburger icon or is it some compatibility issue with Safari? Any help would be greatly appreciated.
Update based on Seth's input
<nav className="fixed sticky top-0 z-10 flex items-center h-12 gap-2 p-2 bg-white md:pl-4">
<button
onClick={toggleOpen}
>
<img
src="/hamburger-menu-red.png" className="w-10 h-8" alt="menu"
/>
</button>
{props.showLogo && (
<Link to="/">
<img
src="/cooken-logo.png" alt="cooken-logo" className="w-16 h-8"
/>
</Link>
)}
</nav>
Because it is the child of a flex item and the default align-items property of flex items is stretch.
However, there are other issues that are more of concern with your code, it is invalid. Neither an image of a hamburger or a site logo are justifiable nav items. A nav element should contain navigation links to site pages.
You should not attach a click event to an image. An image element is just for showing an image, nothing else. If it goes somewhere use a link, if it does something use a button element.
You don't need to put cursors on links, they already have them; images don't because they are not interactive elements.
I would suggest that the best approach is to use a button elemement (which already comes with clicky behaviours built in) to reveal a list of links (which come with linky behaviours built in).