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

Hi @Lee Logan Steiner,

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:


<!-- Add styles in your app.component.scss -->
  placeholder="Choose your option"

<!-- Inline styles -->
  style="width: 50%;"
  placeholder="Choose your option"

<!-- Set width wrapper of select -->
<div class="row">
  <div class="col-md-6">
      placeholder="Choose your option"

  width: 50%;

Best, Konrad.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • 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