In my Bootstrap-designed page, I am utilizing a scrollbar to handle the overflow of elements. However, I've noticed that the rounded corners of my styled buttons disappear when the page overflows, resulting in plain rectangular buttons. Is this an inherent issue with overflow-y: scroll, or is there a way to prevent this from happening? Here is a snippet of my HTML:
<div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
<div class="d-flex justify-content-center">
<div class="text-center">
<h6 class="text-white-50 mb-2 mx-auto">Your Ordered Playlist:</h6>
<div class="scrol">
{%for i in rankings%}
<div class="row">
<input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist"/>
</div>
{%endfor%}
</div>
</div>
</div>
</div>
And here is the relevant CSS:
.scrol {
height: 400px;
overflow-y: scroll;
}
.align-items-center {
align-items: center !important;
}
.justify-content-center {
justify-content: center !important;
}
/* Button Styling */
.btn {
/* Button custom properties */
}
.btn-primary {
/* Primary button custom properties */
}
I have experimented with button width adjustments and various overflow methods. While removing the scrollbar makes the buttons appear normal, it occupies too much space on the page, so that is not a feasible solution. Any advice on how to maintain the rounded corners of the buttons even in overflow situations would be greatly appreciated.