Can't change the right margin

General
1

Hi, I've tried setting the UI-Theme and direct class in the v-card with class="ma-3" and individually with "mr-3". I can't seem to inset the right margin.
The ui-template is page scoped because I also can't adjust the padding/margin of the component inside the widgets - Obviously the widget margins are set in ui-theme.
.
Screenshot 2024-02-17 at 11.00.36 am

2

What I see is, that if you do make page scoped ui_template, the class filed in config doesn't apply anywhere. And that seems to be intentional. Because of the container of your ui-template is not same as for regular widgets. You don't have surrounding card or other sort of styled container but you are in plain div in main (v-main). And that is great for creating your own page, even if it will be the complex layout system or plain paragraph. So everything must be created as tailorwork.

For example something like this:

<template>
    <div class="my-layout ma-3">
        <p>P1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>P2 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>P3 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>P4 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>P5 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</template>
<style>
    .my-layout {
        --min: 10ch;
        --gap: 1rem;        
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
    }

    .my-layout p {
        border:thin solid red;
        padding: 1em;
    }
    .my-layout > * {
        flex: 1 1 var(--min);
    }
</style>
3

Yes, I was missing the div before the v-card. It went straight form template to v-card...
I'm very new to front end.
7 years of Node-RED and I got away with the basic front end.
Now I'm learning html/css/js-vue&vuetify from scratch. Worth it though.
Thank you.

1 Like
4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.