Quasar: QBtnDropdown with split and padding is not working properly

Created on 31 Jan 2020  路  1Comment  路  Source: quasarframework/quasar

I discovered that when QBtnDropdown has a split, the padding is broken:

https://codepen.io/ajcastro/pen/dyPBRdR?editors=1010

My current fix/workaround is add class .fix-split then add the padding size:

.fix-split .q-btn.q-btn-dropdown__arrow-container{
  padding-right: 8px;
}
.fix-split .q-btn:not(.q-btn-dropdown__arrow-container){
  padding-left: 8px;
}

bug

Most helpful comment

You need to pad the buttons in CSS, something like this (add that class on the split QBtnDropdown):
It would look horible otherwise anyway.

.q-btn-dropdown--split--padded
  > .q-btn:first-child
    padding-left: 18px
    padding-right: 15px
  > .q-btn:last-child
    padding-left: 7px
    padding-right: 7px

>All comments

You need to pad the buttons in CSS, something like this (add that class on the split QBtnDropdown):
It would look horible otherwise anyway.

.q-btn-dropdown--split--padded
  > .q-btn:first-child
    padding-left: 18px
    padding-right: 15px
  > .q-btn:last-child
    padding-left: 7px
    padding-right: 7px
Was this page helpful?
0 / 5 - 0 ratings