Tabula_Rasa
Mitglied
Nabend zusammen,
ich habe derzeit ein Problem mit overflow-Attribut.
Ich habe einen Default-Button und andere Buttons. Der Default-Button soll stets angezeigt werden, wobei die anderen Buttons, wenn sie denn 100% des restlichen Platzes einnehmen, seitlich scrollbar sein sollen, ohne dass die Scrollbar selbst angezeigt wird und der Default-Button und die anderen Buttons sollen auf derselben Ebene liegen.
Der CSS-Code
Das Problem an dem CSS-Code ist, dass erstens die Button im <div class="user-filters"> nicht in einer Ebene mit dem Default-Button liegt und dass bei kleiner werdendem Bildschirm overflow-x: scroll; nicht greift. Die Button die nicht auf die Width passen, werden in der darauffolgenden Zeile angezeigt, was nicht erwünscht ist.
Wie bekomme ich folgendes hin:
1. Die Buttons sollen alle auf einer Ebene liegen
2. Der Default-Button steht für sich allein, die restlichen Buttons sollen sich in einem div-tag befinden, der scrollable ist, ohne dass die scrollbar selbst sichtbar ist.
Ist dieses Vorhaben möglich? Wenn ja, wie?
ich habe derzeit ein Problem mit overflow-Attribut.
Ich habe einen Default-Button und andere Buttons. Der Default-Button soll stets angezeigt werden, wobei die anderen Buttons, wenn sie denn 100% des restlichen Platzes einnehmen, seitlich scrollbar sein sollen, ohne dass die Scrollbar selbst angezeigt wird und der Default-Button und die anderen Buttons sollen auf derselben Ebene liegen.
Code:
<div class="user-defined-filters">
<div class="default-filter">
<button class="btn btn-secondary" (click)="filterOpened = !filterOpened">Default</button>
</div>
<div class="user-filters">
<button *ngFor="let filtername of userDefinedFilterNames" class="btn btn-secondary" (click)="filterOpened = !filterOpened" (click)="applyUserDefinedFilter(filtername)"> {{filtername}} </button>
</div>
</div>
Der CSS-Code
Code:
.user-defined-filters{
display: block;
width: 100%;
}
.default-filter button, .user-filters button {
padding: 7px;
margin-right: 1rem;
}
.default-filter{
display: inline-block;
max-width: 25%;
}
.user-filters{
display: inline-block;
max-width: 75%;
overflow-x: scroll;
}
Das Problem an dem CSS-Code ist, dass erstens die Button im <div class="user-filters"> nicht in einer Ebene mit dem Default-Button liegt und dass bei kleiner werdendem Bildschirm overflow-x: scroll; nicht greift. Die Button die nicht auf die Width passen, werden in der darauffolgenden Zeile angezeigt, was nicht erwünscht ist.
Wie bekomme ich folgendes hin:
1. Die Buttons sollen alle auf einer Ebene liegen
2. Der Default-Button steht für sich allein, die restlichen Buttons sollen sich in einem div-tag befinden, der scrollable ist, ohne dass die scrollbar selbst sichtbar ist.
Ist dieses Vorhaben möglich? Wenn ja, wie?