Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Quasar how I can change the height of q-select

I can’t change the q-select in the quasar framework, I tried a long time also can’t make it.

<q-select v-model="site1" outline dense class="selection" />

:deep(.selection .q-field__control) {font-size: 13px; width: 250px;}

:deep(.selection .q-field__outlined){ height: 28px;}

I want it the q-select of height will be 28px.

Tags:

2

Answers


  1. 0 
    .k-mini-input .q-field__control,
.k-mini-input .q-field__inner,
.k-mini-input .q-field__marginal,
.k-mini-input .q-field__control input {
    height: 28px !important;
    min-height: 28px !important;
}

.k-mini-input .q-field__control,
.k-mini-input .q-field__native {
    padding: 0 4px;
}

.k-mini-input .q-field__inner {
    min-height: 28px;
}

.k-mini-input .q-field__native {
    min-height: 28px !important;
}

    I have sometnig like this in my project. This example works with q-select and also for q-input. My version also requires k-mini-input class on q-select. You can probably replace that with q-select class if you want to change all selects in your application.

    Login or Signup to reply.
  2. 0

    I’ve had success in modifying some of the q-elements through the app.scss or app.css (whichever you use). Modifying them inline or via classes elsewhere does not seem to work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search