How to resolve 3 overlapping buttons? - html

Question

I have 3 dropdown buttons, on mobile view instead of displaying horizontally they are overlapping on each other. I think .filter-check:checked+label class properties needs to be reviewed. What changes can I make in my code so that buttons are displayed horizontally?
Here is my scss code
#media (min-width: 700px) {
.filter-button {
display: none;
}
.filter-check {
display: none;
}
}
#media (max-width: 700px) {
.filter {
display: none;
}
.filter-check {
display: none;
}
}
#media screen and (max-width: 700px) {
.filter-button {
background: white;
border: 1px solid black;
border-radius: 2px;
color: dark-gray;
float: right;
font-family: font-family-nimbus-sans-bold;
font-size: 18px;
height: 48px;
text-align: left;
width: 100%;
}
}
// sass-lint:disable force-pseudo-nesting
.filter-check:checked+label { ---------------> I think this class properties needs to be checked
+.filters {
.filter {
background-color: white;
display: block;
height: 100%;
left: 0;
overflow-y: auto;
padding-bottom: 65px;
position: fixed;
top: 0;
width: 100%;
}
::ng-deep {
.overlay-drop {
height: auto;
position: relative;
}
.open {
ul {
position: relative;
top: auto;
}
}
}
}
}
.filters {
display: flex;
flex-wrap: wrap;
#media screen and (min-width: 700px) {
.filter {
background-color: white;
border: 1px solid black;
border-radius: 2px;
flex-basis: 100%;
flex-grow: 1;
flex-shrink: 1;
height: 72px;
margin-right: 10px;
max-width: 224px;
&.disabled {
border-color: silver-chalice;
color: silver-chalice;
opacity: .4;
pointer-events: none;
&:hover {
cursor: no-drop;
}
}
}
}
}
Here is my html code
<ng-container>
<label class="filter-button" for="button" (click)="xy()">Coders</label>
<div class="filters">
<div class="filter">
<overlay-drop [dropdownLabel]="i18nService"
[modelDropdown]="a">
</overlay-drop>
</div>
<div class="filter">
<overlay-drop [dropdownLabel]="i18nService"
[modelDropdown]="b">
</overlay-drop>
</div>
<div class="filter">
<overlay-drop [dropdownLabel]="i18nService"
[modelDropdown]="c">
</overlay-drop>
</div>
<div class="filter">
<overlay-drop [dropdownLabel]="i18nService"
[modelDropdown]="shareClassData"></overlay-drop>
</div>
</div>
</ng-container>
/ng-container>

Answer 1

Try this code for scss
#media (min-width: 700px) {
.filter-button {
display: none;
}
.filter-check {
display: none;
}
}
#media (max-width: 700px) {
.filter-check {
display: none;
}
}
.filter-button {
background: white;
border: 1px solid black;
border-radius: 2px;
color: dark-gray;
float: none;
font-family: font-family-nimbus-sans-bold;
font-size: 18px;
height: 48px;
text-align: left;
width: 100%;
}
// sass-lint:disable force-pseudo-nesting
.filter-check:checked+label {
+.filters {
.filter {
background-color: white;
display: block;
height: 100%;
left: 0;
overflow-y: auto;
padding-bottom: 65px;
position: fixed;
top: 0;
width: 100%;
}
::ng-deep {
.overlay-drop {
height: auto;
position: relative;
}
.open {
ul {
position: relative;
top: auto;
}
}
}
}
}
.filters {
display: flex;
.filter {
background-color: white;
border: 1px solid black;
border-radius: 2px;
flex-basis: 100%;
flex-grow: 1;
flex-shrink: 1;
height: 72px;
margin-right: 10px;
max-width: 224px;
&.disabled {
border-color: silver-chalice;
color: silver-chalice;
opacity: .4;
pointer-events: none;
&:hover {
cursor: no-drop;
}
}
}
}
<ng-container>
<label class="filter-button" for="button" (click)="xy()">Coders</label>
<div class="filters">
<div class="filter">
<overlay-drop [dropdownLabel]="i18nService"
[modelDropdown]="a">
</overlay-drop>
</div>
<div class="filter">
<overlay-drop [dropdownLabel]="i18nService"
[modelDropdown]="b">
</overlay-drop>
</div>
<div class="filter">
<overlay-drop [dropdownLabel]="i18nService"
[modelDropdown]="c">
</overlay-drop>
</div>
<div class="filter">
<overlay-drop [dropdownLabel]="i18nService"
[modelDropdown]="shareClassData"></overlay-drop>
</div>
</div>
</ng-container>