Custom sizing of qDate component



  • Hello,

    First of all - the qDate feature with range-selector is awesome and arrived just as I’m about to do a release of my project.

    One thing though that has been bugging me, is the size of the qDate-element. The default is too big for my project.

    I’ve tried :
    Putting it as a child of a parent div with a set width and height.
    Adding a style to the qDate element itself
    Played around in chrome devtools to change style of the quasar elements

    My code looks like this, nothing fancy :
    <q-card-section>
    <div class=“q-pb-sm”>
    {{ $t(‘reportsPageMessages.reportsPageDateRangePicker’) }}
    </div>

              <div style="width:300px;height:400px;">
                <q-date
                  landscape
                  minimal
                  v-model="chosenDates"
                  color="blue"
                  range
                  mask="YYYY-MM-DD"
                />
              </div>
            </q-card-section>
    

    And the end-result looks like this :

    Screenshot 2020-08-25 at 16.27.21.png

    Feels like I’m missing something simple here, but spent enough time already on it. So I’m turning towards someone more experienced with this framework.

    Thanks in advance


Log in to reply