Issue
I have a page designed in Bootstrap and am handling the overflow of my elements by using a scrollbar.
The buttons I use are styled to have round corners, but when enough elements are on the page that it overflows into a scroll bar, the rounded corners disappear and, while all my other styling elements are preserved, the buttons become boring rectangles. Is this just a property of overflow-y: scroll
or can I avoid it? Here is 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 my relevant CSS:
.scrol {
height: 400px;
overflow-y: scroll;
}
.align-items-center {
align-items: center !important;
}
.justify-content-center {
justify-content: center !important;
}
.btn {
--bs-btn-padding-x: 0.75rem;
--bs-btn-padding-y: 0.375rem;
--bs-btn-font-family: ;
--bs-btn-font-size: 1rem;
--bs-btn-font-weight: 400;
--bs-btn-line-height: 1.5;
--bs-btn-color: #212529;
--bs-btn-bg: transparent;
--bs-btn-border-width: 1px;
--bs-btn-border-color: transparent;
--bs-btn-border-radius: 0.375rem;
--bs-btn-hover-border-color: transparent;
--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
--bs-btn-disabled-opacity: 0.65;
--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
display: inline-block;
padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
font-family: var(--bs-btn-font-family);
font-size: var(--bs-btn-font-size);
font-weight: var(--bs-btn-font-weight);
line-height: var(--bs-btn-line-height);
color: var(--bs-btn-color);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
border-radius: var(--bs-btn-border-radius);
background-color: var(--bs-btn-bg);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #64a19d;
--bs-btn-border-color: #64a19d;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #558985;
--bs-btn-hover-border-color: #50817e;
--bs-btn-focus-shadow-rgb: 123, 175, 172;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #50817e;
--bs-btn-active-border-color: #4b7976;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #64a19d;
--bs-btn-disabled-border-color: #64a19d;
}
I have adjusted the width of the buttons and tried different methods of overflow
. I also got rid of scroll altogether, since my buttons look normal when I do that, but didn't like how much space it could take up on the page, so I am excluding that as an option.
Solution
Button radius and styling are still there, but not visible, because of negative margins of the row
, so add container
class to scrol
container to counteract it, as class row
must be a child of a container
(also maybe better use overflow-y: auto
).
<div class="container scrol">
<div class="row">
original code:
<div class="container 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%}
Note: as content should then go in col
, so maybe wrap input
s into a col
container, to make sure there are no further style side effects.
Alternatively, depending on your layout, you could remove row
class from scrol
children, move it on some parent container, for example the one following container
, and then you could use col
s for breakpoints:
<div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
<div class="row 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">
<div class="">
docs:
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side.
demo (add container
to scrol
):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
.scrol {
height: 400px;
overflow-y: auto;
}
.align-items-center {
align-items: center !important;
}
.justify-content-center {
justify-content: center !important;
}
.btn {
--bs-btn-padding-x: 0.75rem;
--bs-btn-padding-y: 0.375rem;
--bs-btn-font-family: ;
--bs-btn-font-size: 1rem;
--bs-btn-font-weight: 400;
--bs-btn-line-height: 1.5;
--bs-btn-color: #212529;
--bs-btn-bg: transparent;
--bs-btn-border-width: 1px;
--bs-btn-border-color: transparent;
--bs-btn-border-radius: 0.375rem;
--bs-btn-hover-border-color: transparent;
--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
--bs-btn-disabled-opacity: 0.65;
--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
display: inline-block;
padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
font-family: var(--bs-btn-font-family);
font-size: var(--bs-btn-font-size);
font-weight: var(--bs-btn-font-weight);
line-height: var(--bs-btn-line-height);
color: var(--bs-btn-color);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
border-radius: var(--bs-btn-border-radius);
background-color: var(--bs-btn-bg);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #64a19d;
--bs-btn-border-color: #64a19d;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #558985;
--bs-btn-hover-border-color: #50817e;
--bs-btn-focus-shadow-rgb: 123, 175, 172;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #50817e;
--bs-btn-active-border-color: #4b7976;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #64a19d;
--bs-btn-disabled-border-color: #64a19d;
}
</style>
<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="container scrol">
<div class="row">
<input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
</div>
<div class="row">
<input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
</div>
<div class="row">
<input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
</div>
<div class="row">
<input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
</div>
<div class="row">
<input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
</div>
<div class="row">
<input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
</div>
<div class="row">
<input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
</div>
<div class="row">
<input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
</div>
</div>
</div>
</div>
</div>
Answered By - traynor
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.