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



  • I would like to have an option :width="" and :heigh="" too


Log in to reply