OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Is there a way to on/off border radius based on height (off when screen height < 100vh, on otherwise)

  • Thread starter Thread starter user3789722
  • Start date Start date
U

user3789722

Guest
I'm trying to get a modal (flex Div) that can grow or shrink based on the content to lose its border radius when it hits the full height of the screen (in mobile view).

I tried using calc in a custom class in tailwind (combined with ReactJS & Typescript, not sure if its related). It works perfectly if I was using width - based on a post I found here: https://ishadeed.com/article/conditional-border-radius/

Code:
.modal-rounded {
    border-radius: max(
      0px,
      min(8px, calc((100vw - 100%) * 9999))
    );
  }

i.e. if the width is full screen, use 0px, if not 8px.

But when switching from vw to vh:

Code:
.modal-rounded {
    border-radius: max(
      0px,
      min(8px, calc((100vh - 100%) * 9999))
    );
  }

the behaviour seems to get confused, and I get the 8px border radius when I shrink it to a smaller size instead. I'm not sure if I'm missing something in the formula, or misunderstanding how calc works.

Help would be appreciated. Thank you.
<p>I'm trying to get a modal (flex Div) that can grow or shrink based on the content to lose its border radius when it hits the full height of the screen (in mobile view).</p>
<p>I tried using calc in a custom class in tailwind (combined with ReactJS & Typescript, not sure if its related). It works perfectly if I was using width - based on a post I found here: <a href="https://ishadeed.com/article/conditional-border-radius/" rel="nofollow noreferrer">https://ishadeed.com/article/conditional-border-radius/</a></p>
<pre><code>.modal-rounded {
border-radius: max(
0px,
min(8px, calc((100vw - 100%) * 9999))
);
}
</code></pre>
<p>i.e. if the width is full screen, use 0px, if not 8px.</p>
<p>But when switching from <code>vw</code> to <code>vh</code>:</p>
<pre><code>.modal-rounded {
border-radius: max(
0px,
min(8px, calc((100vh - 100%) * 9999))
);
}
</code></pre>
<p>the behaviour seems to get confused, and I get the 8px border radius when I shrink it to a smaller size instead. I'm not sure if I'm missing something in the formula, or misunderstanding how calc works.</p>
<p>Help would be appreciated. Thank you.</p>
Continue reading...
 

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top