Question posted in 
I have a div which (on initial rendering of the page) should base its size on the content that is in it. But there is a question mark icon with a hover function in it. When you hover over the icon it changes the content to show a different text.
How do I stop the div from shrinking when this happens?
P.S. We use Tailwind for our project.
Code of the span for the hover function:
<main className='h-screen flex justify-center items-center bg-[#eeeeee] px-4'>
<Head>
<title>Foutpagina - Beter Bereikbaar Applicatie</title>
</Head>
<div
className='py-8 px-10 flex flex-col rounded-3xl items-center'
style={{ backgroundColor: session ? '#FFFFFF' : '#FFFFFF' }}
>
<div className='group mt-2 cursor-default flex flex-col items-center'>
{error === 'AccessDenied' ? (
<>
<span
className='text-center text-lg sm:text-2xl lg:text-3xl mb-4'
style={{ color: session ? '#000000' : '#00adb5' }}
>
{session ? 'Onvoldoende rechten' : 'U bent niet ingelogd'}
</span>
{clickEmailHint || hoverEmailHint ? (
<span
className='px-2.5 rounded-xl text-center shadow-lighterAlt text-xs sm:text-sm lg:text-base cursor-text mb-4 h-8 flex justify-center items-center'
style={{
backgroundColor: session ? '#FFFFFF' : '#00adb5',
color: session ? '#000000' : '#FFFFFF',
}}
>
{session
? 'Contacteer een administrator voor meer informatie.'
: 'Klik op de onderstaande knop om in te loggen.'}
</span>
) : (
<p
className='text-center text-xs sm:text-sm lg:text-base py-1 my-0 cursor-text mb-4 h-8 flex justify-center items-center'
style={{ color: session ? '#FFFFFF' : '#000000' }}
>
{session
? 'U heeft onvoldoende rechten om deze pagina te betreden.'
: 'U moet ingelogd zijn om deze pagina te betreden.'}
</p>
)}
</>
) : error === 'Verification' ? (
<>
<span
className='text-center text-lg sm:text-2xl lg:text-3xl mb-4'
style={{ color: session ? themeColor : '#00adb5' }}
>
{session ? 'Er is iets misgegaan' : 'Ongeldige link'}
</span>
{clickEmailHint || hoverEmailHint ? (
<span
className='h-8 flex justify-center items-center px-2.5 rounded-xl text-center shadow-lighterAlt text-xs sm:text-sm lg:text-base cursor-text mb-4'
style={{
backgroundColor: session ? '#FFFFFF' : '#00adb5',
color: session ? '#000000' : '#FFFFFF',
}}
>
{session
? 'Keer terug naar de vorige pagina en probeer het opnieuw.'
: 'Probeer opnieuw in te loggen om een nieuwe link te ontvangen.'}
</span>
) : (
<p
className='text-center text-xs sm:text-sm lg:text-base my-0 cursor-text mb-4 h-8 flex justify-center items-center'
style={{ color: session ? '#FFFFFF' : '#000000' }}
>
{session
? 'Klik hier om terug te gaan naar de vorige pagina.'
: 'Deze link is niet niet geldig. Mogelijk is deze link verlopen of reeds gebruikt.'}
</p>
)}
</>
) : (
<>
<span
className='flex justify-center items-center text-2xl font-semibold'
style={{ color: session ? '#000000' : '#00adb5' }}
>
Er is iets misgegaan
</span>
{clickEmailHint || hoverEmailHint ? (
<span
className='py-1 px-2.5 w-full rounded-xl text-center text-xs cursor-text mb-4 h-8 flex justify-center items-center'
style={{
backgroundColor: session ? themeColor : '#00adb5',
color: session ? '#FFFFFF' : '#FFFFFF',
}}
>
Contacteer een administrator voor meer informatie.
</span>
) : (
<p
className='flex justify-center items-center text-xs mb-8'
style={{ color: session ? 'rgb(156 163 175)' : 'rgb(156 163 175)' }}
>
Klik op de onderstaande knop om terug te gaan naar de hoofdpagina.
</p>
)}
</>
)}
<button
className='text-sm px-1.5 mb-8 rounded-full font-bold question-mark cursor-pointer'
style={{
backgroundColor: session ? themeColor : '#00adb5',
color: session ? '#FFFFFF' : '#FFFFFF',
}}
onClick={handleQuestionMarkClick}
onMouseEnter={() => setHoverEmailHint(true)}
onMouseLeave={() => setHoverEmailHint(false)}
>
?
</button>
<button
onClick={handleClick}
className='flex justify-center py-2 rounded-xl w-full text-sm lg:text-lg-light lg:py-2.5 font-medium'
style={{
backgroundColor: session ? themeColor : '#00adb5',
color: session ? '#FFFFFF' : '#FFFFFF',
}}
>
{!session
? error === 'AccessDenied' || error === 'Verification'
? 'Log in'
: 'Terug'
: 'Terug'}
</button>
</div>
</div>
<AuthFooter />
</main>
I added w-full to the span, but it still shrinks the main div.
Thanks in advance!
2
Answers
The only way to stop the
divfrom shrinking when the content changes is to set thedivto a fixed width.You have a
divthat uses the inner content to determine its width, so obviously when the text changes to a smaller text, the expected behaviour is for thedivto shrink.There are a few ways to do this. If you want some text to overlay the main text then you can use
gridandgrid-template-areas. This will mean that the container will fit the text.Set the
grid-areafor your main text and hover text to the same. This will overlap them so one appears on top of the other. You can then use eithervisibilityoropacityto make the text switch on hover. See example below.