MuzMatch Posts - Answer Overflow

MuzMatch

•Created by MuzMatch on 10/6/2024 in #❓・help

CSS being carried to a different page that uses a different layout

I am using a layout that is specifically for the login page of my app. This is because I want the page to take up the entire screen (remove the navbar etc.). An issue im having is that the CSS that im using to remove the body margin and whatever is being carried back out of the login screen and into the rest of the app Here's the CSS in the layout:

<style>
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}
.login-layout {
  height: 100%;
  min-height: 100%;
}
.app-wrapper {
  height: 100%;
  min-height: 100%;
  padding: 0px;
  min-width: 100%;
}
#__nuxt {
  height: 100%;
  min-height: 100%;
}
</style>

<style>
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}
.login-layout {
  height: 100%;
  min-height: 100%;
}
.app-wrapper {
  height: 100%;
  min-height: 100%;
  padding: 0px;
  min-width: 100%;
}
#__nuxt {
  height: 100%;
  min-height: 100%;
}
</style>

.app-wrapper is applied to the body etc. so that when I go to the login screen it just applies those styles. When I go back to / for example, the .app-wrapper style is still applied to the page, and so the body loses its margin etc. that it had originally. How can I fix this?

6 replies

NNuxt

•Created by MuzMatch on 9/28/2024 in #❓・help

Can't validate SelectMenu or UInputMenu NuxtUI components using Yup

I'm trying to validate a SelectMenu and UInputMenu NuxtUI components using Yup. Here's the usage:

<UFormGroup label="Product Type" name="productTypeId">
                <UInputMenu v-model="listing.product.productTypeId!" :options="productTypeOptions" value-attribute="id"
                    option-attribute="label"
                    :change="productTypeChange(productTypeOptions.find((productType: ProductType) => productType.id === listing.product.productTypeId))" />
            </UFormGroup>

<UFormGroup label="Product Type" name="productTypeId">
                <UInputMenu v-model="listing.product.productTypeId!" :options="productTypeOptions" value-attribute="id"
                    option-attribute="label"
                    :change="productTypeChange(productTypeOptions.find((productType: ProductType) => productType.id === listing.product.productTypeId))" />
            </UFormGroup>

<UFormGroup label="Auction Duration" name="duration">
                <USelect type="number" v-model="listing.duration" :options="durationOptions">
                    <template #leading>
                        <UIcon name="i-heroicons-clock" class="w-5 h-5" />
                    </template>
                </USelect>
            </UFormGroup>

<UFormGroup label="Auction Duration" name="duration">
                <USelect type="number" v-model="listing.duration" :options="durationOptions">
                    <template #leading>
                        <UIcon name="i-heroicons-clock" class="w-5 h-5" />
                    </template>
                </USelect>
            </UFormGroup>

const newAuctionSchema = object({
    title: string().required('Required'),
    description: string().required('Required'),
    duration: number().required('Required'),
    startingPrice: number().required('Required'),
    reservePrice: number().required('Required'),
    images: mixed().required('Required')
        .test({
            message: '6 images maximum',
            test: (file, context) => {
                const isValid = listing.value.images.length < 6;
                if (!isValid) context?.createError();
                return isValid;
            }
        }),
    Year: number()
        .min(1900, 'Year must be 1900 or later')
        .max(new Date().getFullYear(), 'Year cannot be in the future')
        .required('Required'),
    Model: string().required('Required'),
    Make: string().required('Required'),
    Color: string().required('Required'),
    buyNowPrice: number().notRequired(),
    productTypeId: number().required('Required'),
    productName: string().required('Required')
})

const newAuctionSchema = object({
    title: string().required('Required'),
    description: string().required('Required'),
    duration: number().required('Required'),
    startingPrice: number().required('Required'),
    reservePrice: number().required('Required'),
    images: mixed().required('Required')
        .test({
            message: '6 images maximum',
            test: (file, context) => {
                const isValid = listing.value.images.length < 6;
                if (!isValid) context?.createError();
                return isValid;
            }
        }),
    Year: number()
        .min(1900, 'Year must be 1900 or later')
        .max(new Date().getFullYear(), 'Year cannot be in the future')
        .required('Required'),
    Model: string().required('Required'),
    Make: string().required('Required'),
    Color: string().required('Required'),
    buyNowPrice: number().notRequired(),
    productTypeId: number().required('Required'),
    productName: string().required('Required')
})

Everything except the Select and UInputMenu seem to validate correctly, not sure whats going on!

4 replies

Gaming

Programming