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:

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.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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