Override min-width q-btn-dropdown

[roylans]

Hi friends.

I have the following q-btn-dropdown

<q-btn-dropdown
  :menu-offset="styleContentMenu.menuOffset"
  :menu-anchor="styleContentMenu.menuAnchor"
  :menu-self="styleContentMenu.menuSelf"
  :dropdown-icon="styleContentMenu.icon"
  :no-icon-animation="!styleContentMenu.iconAnimation"
  :content-style="{
     'min-width':  styleContentMenu.width +'px',
     'width': styleContentMenu.width +'px',
     'height': styleContentMenu.height +'px',
     'display': 'flex',
     'justify-content': 'center'
  }"
  class="full-width full-height no-border-radius"
  no-caps flat
>
</q-btn-dropdown>

By default, the minimum width of the menu content is the width of the q-btn dropdown, but I need to override this value with a smaller value.

is posible to do this?

I need to set the min-width red box to 200px

Thanks in advance...

[metalsadman]

@roylans use content-class with min-width set to !important.

[roylans]

Hi @metalsadman , thanks by your reply.

:content-style="{
        'min-width': `${styleContentMenu.width}px !important`,

not working. Quasar override this value.

[metalsadman]

.some-class {
  min-width: 100px !important;
}

...
  content-class="some-class"

[roylans]

Hi, not working correctly.

This is the component:

This is my class

Here can you see the class is applied, but not working

Can you think of anything else
Thanks

[metalsadman]

Make a codesandbox reproduction of your code, as I've tried this in codepen and it works.