[Solved]How to set back ground color for Qmodal?



  • it seems not work neither you try to set it by set content-css in Qmodal nor by set content-class in QModalLayout, not work in style setting too,always show complete white background
    could any one help?thanks!
    the template is shown as below:
    <template>
    <q-item v-close-overlay>
    <q-item-main>
    <q-btn label=“spider” @click=“maximizedModal = true”></q-btn>
    <q-modal v-model=“maximizedModal” class=“bg-positive” maximized :content-css="{padding: ‘50px’}">
    <q-modal-layout content-style="{fontWeight: ‘bold’}">
    <div >please set date</div>
    <q-datetime v-model=“date_start” inverted color=“yellow” type=“date” placeholder=“start date”/>
    <q-btn color=“tertiary” @click=“maximizedModal = false” label=“Close” />
    <p>start</p>
    </q-modal-layout>
    </q-modal>
    </q-item-main>
    </q-item>
    </template>



  • Hi @justkkg,

    Move your class="bg-positive" in the <q-modal-layout> like that :

    <q-modal-layout content-style="{fontWeight: 'bold'}" class="bg-positive">
    

    It changes the full background of the modal in positive (no white anymore !). Hope it helps !



  • @sweetyy
    it works,thank you!



  • This isn’t working for me. I tried the class on both the modal and the modal layout, but neither worked. I see those two elements in the resulting HTML, and a DIV is inserted between them. If I manually change that DIV in dev tools in chrome, I can set the background on it and it behaves correctly. So why isn’t the DIV receiving the class from either component?