0

I have following CSS:

  .show_dropdown {
    max-height: 350px;
    overflow-y: auto;
  }

in a mobile view the dropdown list is less than 350px and this should hide scrollbar because it is not necessary. However, in bigger screen it works fine and hide scroll when it is not needed.

enter image description here

Thanks for reading and helping

Full code can be find here

2 Answers 2

1

The issue is padding: 1.25rem 0; in nav > .navbar_list > a if you inspect and check, if destop view padding-top and padding-bottom for each a tag is 43px whereas in mobile view it's 56px which increasing the overall height of the list and resulting the scrollbar visibility.

Sign up to request clarification or add additional context in comments.

Comments

0

You can use vendor prefixes for this, and it's the approach I'd recommend.

.dropdown_list {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.dropdown_list::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

Codepen: https://codepen.io/CewisLewis/pen/poJyzJV

1 Comment

I appreciate your help I can scroll but it doesn't display the scrollbar. I want it to display scrollbar when dropdown list is more than 350px and hide it when it is less than 350px

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.