I've encountered an annoying problem with Tailwind CSS on Nuxt3. Whenever I'm on mobile, the browser's nav menu causes the bg image to jump around, i.e: when the bottom navbar comes up for my mobile browser it causes the bg image to jump up (and jump down when it retracts).
Is there any way to tell mobile browsers I want the bg image to stay put?
The layout template:
<template>
<div class="w-full min-h-screen
bg-offblack
text-milk">
<div class="min-h-screen
overflow-y-auto overflow-hidden
grid grid-rows-1 grid-cols-1
justify-items-center
bg-fixed bg-right-bottom bg-no-repeat bg-[url('~/assets/images/ui/decker_mobile.png')]
md:grid-cols-2
lg:bg-[url('~/assets/images/ui/decker_desktop.png')]">
<slot />
</div>
</div>
</template>
Related
I am working on a touch screen display for a museum. The screen will display old photos with touchable zones laid on top of it that reveal more information about people/objects show in the photos.
The screen size is fixed (it's a TV) but the photos could be in any aspect ratio; landscape or portrait.
There will be a header and footer at the top and bottom of the screen. In the middle I want to display the photo as large as possible. That is to say:
if the photo is portrait it should span the full height between the header and footer with empty space to the left and right.
if the photo is landscape (more landscape than the TV is) it should span the full width of the screen from left to right with empty space above and below.
This, I believe, is classic object-fit: contain; behaviour.
What I'm struggling with is adding the overlay on top. This consists of many rectangles that a user can touch. I know the top and left position and width and height of each box as a percent of the image it is overlaying.
I have made a tailwind playground here: https://play.tailwindcss.com/1c8QufeAFj
My understand is that I can't add the overlain boxes as children of the <img> tag, so they are placed in a <div> that is the <img> tag's sibling.
<!-- Check out the tailwind playground to see a live preview -->
<div class="flex h-screen flex-col">
<div id="header" class="bg-gray-500 p-6"><p>Header</p></div>
<!-- Main content which grows to fill the space between the header and footer -->
<main class="grow bg-gray-900">
<!-- Wrapper around the img and it's overlay -->
<div id="wrapper" class="relative">
<!-- The image: Should be as large as possible within main content (object contain style behaviour) -->
<img class="h-full w-full" src="https://placekitten.com/600/400" />
<!-- Div container boxes to draw on top of image (and move and scale with the image) -->
<div class="absolute inset-0 z-10">
<!-- Boxes overlaid on each kitten -->
<div style="left:48%; top:28%; width:11%; height:15%;" class="absolute border-2 border-orange-300"></div>
<div style="left:36%; top:29%; width:10%; height:14%;" class="absolute border-2 border-orange-300"></div>
<div style="left:16%; top:33%; width:10%; height:14%;" class="absolute border-2 border-orange-300"></div>
<div style="left:69%; top:43%; width:11%; height:15%;" class="absolute border-2 border-orange-300"></div>
</div>
</div>
</main>
<div id="footer" class="bg-gray-500 p-6"><p>Footer</p></div>
</div>
Since the boxes' positions and sizes are relative to the image, this sibling div must have the same size as the img at all times.
I can't get this to work with object-fit:contain; the sibling div that contains the boxes doesn't have the same size as the img so the boxes don't line up where they are supposed to.
If I try to find a solution without object-fit then I can either get it to work for portrait photos (using h-full) or landscape photos (using w-full) but I haven't managed to find code that works for both portrait and landscape.
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 do not understand how to place a color transition effect over an image such as changing the color that will lay on top of the image when i hover over it. Basically i want a hover effect on my image, lets say to the color blue. I tried searching google for this but i cant find any answers to my question. Im new to tailwind but i did try hover:bg-blue-400 but it did not work, im currently using version 3 of tailwind. Here is an example
<div class="flex flex-col items-center rounded-2xl p-6">
<img src="./images/myImage.jpg" alt="image" class="hover:bg-blue-400">
</div>
The answer is make a div with the color of your choice then within that place
the img tag within it lets say hover:opacity-25 then your good. like so...
<div class="bg-blue-400 rounded-xl">
<img src="./image.jpg" alt="image" class="hover:opacity-25 rounded-xl">
</div>
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).
I am trying to set my Login section's background opacity using bg-opacity-75, but when I add that to my className, background color will just disappear. And if I use opacity-75, all child-div will be transparent as it should, if I use opacity-100, background color will just disappear and only input field is visible, it's kinda wired. In addition, I'm using default tailwind.config file with tailwind v2.0.2.
Here's my code:
...
<div className={"h-screen w-screen py-10 lg:w-3/6"}>
<div
className={"bg-gray-50 h-full max-w-md rounded-2xl bg-opacity-75 shadow-md mx-auto md:max-w-lg hover:shadow-lg transition-shadow"}>
<Logo/>
<Text/>
...
I aslo tried inline css, still not working.
using bg-opacity-75(there sholld be a white transparent area behind inputs)
I guess you are looking for something like this:
<div class="bg-green-400 h-32">
<div class="bg-gray-50 h-full w-6/12 mx-auto bg-opacity-50">
<div>Your Opacity child div here</div>
</div>
</div>
Opacity
Use opacity Keyword only, for version 2.2.7 Tails wind
example:
<div
className = "opacity-75 bg-red-300">
</div>