css Question posted in
Some basic documentation can be found here.

Css – Div size should not change size when content changes

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.

Image: Inital render of page

Image: When hovering

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!

Tags:

2

Answers


  1. 0

    The only way to stop the div from shrinking when the content changes is to set the div to a fixed width.

    You have a div that uses the inner content to determine its width, so obviously when the text changes to a smaller text, the expected behaviour is for the div to shrink.

    Login or Signup to reply.
  2. 0

    There are a few ways to do this. If you want some text to overlay the main text then you can use grid and grid-template-areas. This will mean that the container will fit the text.

    Set the grid-area for 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 either visibility or opacity to make the text switch on hover. See example below.

    .container {
  width: max-content;
  margin: auto;
  text-align: center;
  padding: 1rem;
  border: 3px solid #4DAAB3;
  border-radius: 0.5rem;
  display: grid;
  grid-template-areas: "text" "icon";
}

.text,
.hover-text {
  grid-area: text;
}

.text {
  opacity: 1;
  transition: opacity 1s;
}

.hover-text {
  opacity: 0;
  transition: opacity 1s;
}

.container:has(.icon:hover) .text {
  opacity: 0;
}

.container:has(.icon:hover) .hover-text {
  opacity: 1;
}

.icon {
  grid-area: icon;
  background: #4DAAB3;
  color: white;
  font-weight: bold;
  margin-top: 0.5rem;
  padding: 0.5rem;
  text-align: center;
  border-radius: 100vh;
  width: 2rem;
  cursor: pointer;
  margin-inline: auto;
}
    <div class='container'>
  <div class='text'>Text Text Text Text Text Text Text Text</div>
  <div class='hover-text'>Some text</div>
  <div class='icon'>?</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search