How can I change the property of overflow-y depending of the height?-CodePudding

I am trying to put visible the following property : overflow-y: visible if the height is too small and else overflow-y: hidden using tailwind css and react.

I don't know how can I do that, I mean with width I know but with height I cannot use sm, md etc ...

Could you help me please ?

CodePudding user response：

You can use CSS media feature to target specific height of the viewport:

.container {
  height:30px;
  overflow-y:hidden
}

@media (min-height: 100px) {
  .container {
    overflow-y:visible
  }
}

<div class='container'>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

CodePudding user response：

Create custom Tailwind media queries:

Create your custom media queries using the raw key inside tailwind.config.js, for example:

module.exports = {
  theme: {
    extend: {
      screens: {
        'smh': { 'raw': '(min-height: 640px)' },
        // => @media (min-height: 800px) { ... }
       
        'mdh': { 'raw': '(min-height: 800px)' },
        // => @media (min-height: 800px) { ... }

        'lgh': { 'raw': '(min-height: 1240px)' },
        // => @media (min-height: 1240px) { ... }

       'xlh': { 'raw': '(min-height: 1600px)' },
        // => @media (min-height: 1600px) { ... }

      }
    }
  }
}

Media queries defined using the raw key will be output as-is, and the min and max keys will be ignored.

You can use any name you want, I used smh, mdh, lgh and xlh but I could also use random, something and tallerscreen. It doesn't matter how you name it as long as the name makes sense to you.

Those responsive utilities act like the width media queries. For example, you can type the following code (after adding the custom responsive utilities to tailwind.config.js) to set your border to red when the screen height is taller than 640px and to blue when it's shorter than 640px:

<div >test</div>

Here's a tailwind-play link with the example above: Link.

In the same way, you can write something like this to hide and show your overflow-y utility:

<div >
  <div>Text.................</div>
  <div>Text.................</div>
  <div>Text.................</div>
  <div>Text.................</div>
  <div>Text.................</div>
</div>

When the window height exceeds 640px, anything that flows out of the div is visible. If the window height is shorter than 640px, anything that flows out of the div is hidden. Tailwind-play link