Nuxt•2w ago

weird issue with my components not lining up

Heres my page code:

<template>
    <div>
        <GoogleFontIcon name="language"/>
        <br/>
        <br/>
        <UIButton text="Fun button" :event="events.testing" icon="add_circle"/>
        <UIButton text="Fun button" :event="events.testing" disabled icon="add_circle"/>
        <UIButton text="Fun button" :event="events.testing" disabled icon="add_circle, both"/>
        <br/>
        <br/>
        <UIButton :event="events.testing" text="settings"/>
        <UIButton :event="events.testing" disabled icon="settings"/>
        <UIButton :event="events.testing" icon="settings"/>
        <UIButton :event="events.testing" disabled text="settings"/>
        <UIButton :event="events.testing" icon="settings"/>
        <UIButton :event="events.testing"/>
    </div>
</template>

<script>
    export default {
        mounted() {
            this.$bus.$on(events.testing, this.buttonPressed)
        },
        methods: {
            buttonPressed() {
                alert("Button Pressed")
            }
        }
    }
</script>

<style scoped>
    div {
        padding: 1rem;
    }
</style>

<template>
    <div>
        <GoogleFontIcon name="language"/>
        <br/>
        <br/>
        <UIButton text="Fun button" :event="events.testing" icon="add_circle"/>
        <UIButton text="Fun button" :event="events.testing" disabled icon="add_circle"/>
        <UIButton text="Fun button" :event="events.testing" disabled icon="add_circle, both"/>
        <br/>
        <br/>
        <UIButton :event="events.testing" text="settings"/>
        <UIButton :event="events.testing" disabled icon="settings"/>
        <UIButton :event="events.testing" icon="settings"/>
        <UIButton :event="events.testing" disabled text="settings"/>
        <UIButton :event="events.testing" icon="settings"/>
        <UIButton :event="events.testing"/>
    </div>
</template>

<script>
    export default {
        mounted() {
            this.$bus.$on(events.testing, this.buttonPressed)
        },
        methods: {
            buttonPressed() {
                alert("Button Pressed")
            }
        }
    }
</script>

<style scoped>
    div {
        padding: 1rem;
    }
</style>

6 Replies

Sloth•2w ago

heres GoogleFontIcon:

<template>
    <span class="material-symbols-outlined font-icon">
        {{ name }}
    </span>
</template>

<script>
    export default {
        props: ["name"]
    }
</script>

<style scoped>
    .font-icon {
        color: inherit;
        font-size: inherit;
    }
</style>

<template>
    <span class="material-symbols-outlined font-icon">
        {{ name }}
    </span>
</template>

<script>
    export default {
        props: ["name"]
    }
</script>

<style scoped>
    .font-icon {
        color: inherit;
        font-size: inherit;
    }
</style>

Sloth•2w ago

and UIButton which is too large to post in a message

message.txt

Sloth•2w ago

I don't get why the buttons aren't lining up and i don't know what the issue is or how to fix it

833930427080900608•2w ago

https://discord.com/channels/473401852243869706/1256482353606430762/1256482353606430762

IcyFoxer•2w ago

Remove your br and see how it looks. This is more of a css issue

Sloth•2w ago

removing the br didnt fix it it probably is just css but i was hoping someone would see something that im not that would cause the issue

Gaming

Programming

weird issue with my components not lining up