0

I have an Aura cmp which I will be using in the utility bar on the desktop and in a separate tab on mobile. However, I wanted to limit the height of the aura in the utility bar so that the inner element can trigger a scroll resulting in better UX. But on mobile, I wanted to deactivate any limitations so that UX is better without scroll.

The problem is I wanted to decide this process with the Height value of the aura component. This creates distortion and instability. How can I make a CSS work in the utility bar but not in the other cases, especially on mobile?

    @media all and (max-height:500px)
{
  .THIS .myTable{
    max-height: none !important;
  }
.THIS .myTable{
  max-height: 240px; 
  overflow: auto; 
  scroll-behavior: smooth;
}

How can I solve the problem? Need different CSS for the utility bar and the rest of the screens including mobile

0

You must log in to answer this question.

Browse other questions tagged .