How do I create a layout like this?



  • I want to create a question and answer layout with four buttons and a question above. I don’t have idea how to leverage Quasar framework to come up with an image as shown in the picture. 1 question on top and four centered buttons with fixed sizes.
    0_1522515141507_quizapp.JPG

    This is what I have:

    <template>
    <q-layout
    ref=“layout"
    view=“hhh lPr fff”>
    <div align=“center” =>
    <div class=”">
    <q-btn color=“secondary” size=“sm” label=""> choice A </q-btn>
    <q-btn color=“secondary” size=“sm” label=""> choice B</q-btn>
    </div>
    <div class="">
    <q-btn color=“secondary” size=“sm” label=""> choice C </q-btn>
    <q-btn color=“secondary” size=“sm” label=""> choice D</q-btn>
    </div>
    </div>
    </q-layout>
    </template>

    0_1522515447482_fail.JPG
    I’m not a lazy ass. just a frustrated beginner who wants to develop VueJS apps using Quasar



  • You must read the documentation about flex (http://quasar-framework.org/components/flex-css.html). After you will build complex layout easily.
    See an example:
    https://jsfiddle.net/tL0qcfuL/



  • im not good to with flex


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.