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)
Related
I have a list of episodes that I want to have a fixed height. I tried to line-clamp-2 for the episode title that has text that is longer than 2 lines.
Everything is working on my normal PC view, even if I open Dev Tools and view it as device view, it still displays as I want, but after I use my real phone, which is iPhone to view it, it has a problem which I wasn't expecting at all because there's none when I was CSS it on my PC.
What I did, I set every episode item of mine to fixed 70px height, have 12px padding to left and right, and 0.25rem padding for top and bottom. I tried the solution like this post: line clamp (webkit) not working in safari
Which is to put the overflow-hidden and line-clamp to the div instead of the actual p tag, and in the p tag using the inline display, but in my case, it is not working.
I'm using a tailwindCSS to CSS my component in React. Here's how I tried so far:
<div className="lg:h-[calc(100vh-60px)] overflow-y-scroll bg-[#222] h-[30vh] max-lg:mb-[20px]">
{listEpisode.map((item, i) => (
<Link
to={`episode-url`}
key={i}
className="w-full h-[70px] px-[12px] leading-normal
py-1 hover:text-white hover:opacity-80 hover:bg-white/20
duration-200 ease-in-out line-clamp-2 overflow-hidden
odd:bg-[#111111] even:bg-[#272727]"
>
<p className="inline after:whitespace-pre">
{item.title}
</p>
</Link>
))}
</div>
The result I get when in Dev Tools on Chrome, I set viewpoint to iPhone 6/7/8 (because I'm using iPhone 7, too)
PC with device viewpoint (working as expected):
On the actual device using safari - mine is iPhone 7 (which is not working as I expect it to be):
I don't know what's the cause of this, so I can't come up with a solution to fix it, because it was normal on PC.
I've managed to handle this through test here and there a bit around my CSS.
I change a little bit how I style it. First, I set my a tag as a flex and set a fixed height for it (I change my fixed height to 80px, looks better for me), with padding, and margin stuff around the a tag and my a tag is the parent element, then inside, I wrap my paragraph p tag inside a div, I
don't set that div to have any height, so it'll take auto height, inside a div, which now is a paragraph, I finally set it to line-clamp-2 directly.
Here's the result that I have now on my device, the PC is always working fine:
Note: I have 2 div inside the a tag because I changed my mind on how to make it suit my liking, and that's why I have some div that has flex, you might not need it, but I hope those who have the same problem get an idea.
This is my Tailwind CSS:
<div className="lg:h-[calc(100vh-60px)] overflow-y-scroll bg-[#222] h-[30vh] max-lg:mb-[20px]">
{listEpisode.map((item, i) => (
<Link
to={`episode-url`}
key={i}
className="flex items-center h-[80px]
px-[12px] py-[8px] w-full hover:text-white
hover:opacity-80 hover:bg-white/20 duration-200 ease-in-out"
>
<div className="mr-[6px] h-full flex items-center justify-center text-amber-400 ">
<p className="font-extrabold px-[4px] border-r-[2px] opacity-80">
{i+1}
</p>
</div>
<div className="mx-[6px] w-full flex">
<p className="line-clamp-2 w-full text-[#E2DFD2]">
{item.title}
</p>
</div>
</Link>
))}
</div>
Home page in NextJS, styled with TailwindCSS, is working as expected. I originally had the background image defined in the tailwind.config.js file and applied via styles (and there is no problem), but I would prefer the image optimization of next/Image.
// index.jsx
const Home = () => {
return (
<div className="flex min-h-screen flex-col items-center justify-center py-0">
<Image src='/images/background.png' fill={true} style={{ objectFit: 'cover' }} className='-z-10' alt='Alt text' />
<main className='flex w-full flex-1 flex-col items-center justify-center px-5 md:px-20 text-center bg-gradient-radial to-r from-black via-black/30'> {/* All content here is displaying as expected */} </main>
</div>
)
}
This works as expected. But, when I add an overall Layout.jsx to the site, the background image alignment is not behaving as I would anticipate.
// Layout.jsx
import Navbar from './Navbar.jsx'
import Footer from './Footer.jsx'
const Layout = ({ children }) => {
return (
<>
<Navbar />
<main>
{children}
</main>
<Footer />
</>
)
}
export default Layout
The background.png image no longer aligns with its parent <div>, but instead with the top of the screen. This means the navbar is sitting on top of the background image, obstructing some of the top portion.
Simultaneously, a gap now exists between the bottom of the background image and the top of the Footer, equal in height to the height of the Navbar.
I have tried all combinations of relative and absolute classes both the parent <div> and the child <Image>, without success.
Switching back to a tailwind.config.js defined background image and inserting it using e.g. className='bg-my_bg_image' solves the alignment issues, but no longer leverages NextJS next/Image optimization and hurts my site performance.
So the preferred solution would be to continue to use the next/Image component, aligned properly.
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>
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
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 }"
>