Topic: How to set the width of a 'mdb-select '?
davout free asked 4 years ago
Newbie question, how do I set the width for a 'mdb-select' tag?
By default it seems to take up all available horizontal space
Lee Logan Steiner pro answered 4 years ago
Hello! How could I change the width of the dropdown-content block ONLY? I have a table and in its head, I have a plethora of filters, based on the mdb-select pro control. But width for the control itself and for the drop-down block with the filter options has to be different. Is it achievable somehow? As far as I can see all the style for the 'options' and 'dropdown-content' blocks are calculated automatically somewhere inside the control code, so, a trivial solution like the follow doesn't work: .dropdown-content { width: 1000px !important; .options { width: 1000px !important; } }
Please, help.
Konrad Stępień staff commented 4 years ago
Please add these styles for your global file styles.scss
. It seems everything works correctly
davout free answered 4 years ago
How do I set the vertical alignment of a 'mdb-select' ?
By default it seems to be aligned by 'top'
Arkadiusz Idzikowski staff commented 4 years ago
Could you specify what exactly do you want to customize?
Konrad Stępień staff answered 4 years ago
Hi @davout,
These are my ways:
HTML
<!-- Add styles in your app.component.scss -->
<mdb-select
class="my-select"
[options]="optionsSelect"
placeholder="Choose your option"
></mdb-select>
<!-- Inline styles -->
<mdb-select
style="width: 50%;"
[options]="optionsSelect"
placeholder="Choose your option"
></mdb-select>
<!-- Set width wrapper of select -->
<div class="row">
<div class="col-md-6">
<mdb-select
[options]="optionsSelect"
placeholder="Choose your option"
></mdb-select>
</div>
</div>
SCSS
mdb-select.my-select {
width: 50%;
}
Best, Konrad.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.8.1
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No