I'm trying to create a v-row without gutters (red background) in Vuetify 3 and it's driving me insane. I'd like it to contain the entire width of the screen so there are no spaces between. Can anyone help out?
<template>
<v-container fluid>
<v-main>
<div class="maple">
<row no-gutters>
<v-col>
<h1>Have a Showmax Festive</h1>
<div v-for="image in images" :key="image">
<v-img :src="image"></v-img>
</div>
</v-col>
</row>
</div>
</v-main>
</v-container>
</template>
I've tried using the no-gutters props according to the documentation on Vuetify and container-fluid is still nogo.
I figured it out!!
I was supposed to use div class="row"
Instead of
Maybe its something wrong with my personal Vuetify setup though but this seems to work perfect for me.
You have a typo, instead of <v-row no-gutters> you have <row no-gutters>.
Just changes both instances of row, to v-row and you should be good to go :)
This typo was unfortunate, because <row> is still valid, if you had missed v and had <-row> your IDE/Browser should've let you know lol.
Related
In order to keep it simple i'm going to post a simplified version of what i need to do.
Assuming I've the following component
<template>
<div style="width: 50vw; height: 40vh;">
<v-container fluid>
<v-row style="background-color: #222222" class="fill-height">
<v-col cols="12" lg="8" xl="8" style="background-color: #ff0000"><h1>Breakpoint: {{$vuetify.breakpoint.name}}</h1></v-col>
<v-col cols="12" lg="4" xl="4" style="background-color: #00FF00"><v-img src="https://picsum.photos/256/256" min-height="256px" min-width="256px" max-height="256px" max-width="256px"/></v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
}
</script>
Here is how it looks like on the browser:
Here is where it starts to break.
I need to have a responsive column that have a inside component with a fixed width and height.
Is there any thing that i can do to solve it?
If you don't specify a number of col widths for the first column it'll automatically try and use all the remaining space. cols="auto" can be used on the second column which will provide enough space for whatever content is inside. Together I believe they will accomplish your desired responsiveness. See this codesandbox as an example. Note the example also uses overflow-wrap: anywhere; on the h1 text to further prevent wrapping columns until absolutely necessary
I have been trying to add image inside v-text-field, but it is causing an issue when I add it moves label to a bit of right side?
<v-text-field
ref="phone"
v-model="phone"
dense
outlined
disabled
color="black"
:rule="[requiredRule]"
:label="$t('10')"
>
<template #prepend-inner>
<v-img style="margin: auto 0" max-height="25" max-width="30" src="/images/KW.png"> </v-img>
</template>
</v-text-field>
as you can see label PHONE moves to right side it isn't staying on its place, I tried to add margin-top but didn't fix it.
This looks like an undocumented feature, which explains why the behaviour may be unexpected.
The cause of the seems to me is that the input calculates the width of the slot content at the time of rendering, which due to a race condition may resolve before or after the image is rendered. That's why if you render multiple times, you may not always see it behaving this way.
To get around it, I thing you should be able to wrap the image with another element of fixed width. (<div style="width:30px">)
<v-text-field
ref="phone"
v-model="phone"
dense
outlined
label="My Label"
>
<template #prepend-inner>
<div style="width:30px">
<v-img style="margin: auto 0" max-height="25" max-width="30" src="/images/KW.png"/>
</div>
</template>
</v-text-field>
I'm trying to create a group of selectable items using Vuetify.
Nevertheless, it is not working because inside the template I'm using a Vue.component called fm-card.
When you use a Vue.component you have to use #click.native instead of #click.
<v-item-group active-class="primary">
<v-container>
<v-row justify="center">
<v-col
class="fm-card-container"
cols="2"
v-for="item in items"
v-bind:key="item.id"
>
<v-item v-slot="{ active, toggle }">
<fm-card
#click.native="toggle;"
class="fm-card d-flex align-center"
:title="item.name"
:image="productImage(item.image)"
:imageHeight="95"
dark
height="200"
:color="active ? 'primary' : ''"
>
{{`hola soy el ${toggle}`}}
<v-scroll-y-transition>
<div v-if="active" class="text-h2 flex-grow-1 text-center">
Active
</div>
</v-scroll-y-transition>
</fm-card>
</v-item>
</v-col>
</v-row>
</v-container>
</v-item-group>
I have tried to use #click and #click.native but it seems that nothing is happening
First of all why don't you put your <fm-card> as an "real" component and reference it in your parent and pass all of your values you are using in there with it?
Like this
<fm-card :value1="value1" :value2="value2"/>
than you can put your complete code in this component - it's making your code much more clearer.
And than I think you don't need to use #click.native any more... #click should be enough, but than check that you have a semicolon after your toggle; - you have to delete this!
Than you can go to your methods and work with your click event like this:
methods: {
toggle() {
//your code in here
}
}
Hopefully this helps you out! Pls let me know!
I use Vuetify in my webapplication. The whole webapplication is responsive.
I have the problem that on smaller screens (Smartphone, Pad) I can zoom out of the website which means that I have a white space on the right of my website.
I don't know how this can happen and it is in every single page of my web application like that. What can I do that I use from beginning the whole space and the user can not zoom out from the website and gets this white space on the left?
Below a short example:
<template>
<v-app>
<v-main>
<v-container>
<v-row justify="center" align="center">
<v-col cols="12" xs="10" sm="10" md="10" lg="10" xl="10">
TEST_COL
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
<script>
export default {
data: () => ({
}),
}
</script>
<style>
</style>
Maybe the problem is in the App.vue file but I don't see any problem there. To be sure I post the app.vue below:
<template>
<v-app>
<Navbar />
<v-main>
<router-view></router-view>
</v-main>
<Footer />
</v-app>
</template>
I put two screenshots below so you see what i mean.
Thanks!
Chris
I got the answer. I used the <v-navigation-drawer> provided by Vuetify to create a drawer object. I used the following options:
<v-navigation-drawer v-model="drawer" absolute temporary right>
But absolute means it "Applies position: absolute to the component." which means that it takes extra space in the website. The option must be "fixed" instead of "absolute" then it works.
The good settings are:
<v-navigation-drawer v-model="drawer" fixed temporary right>
Now the drawer opens on the right side of the website (better for smartphones) and it doesn't take any absolute space!!
I need to place content inside v-app-bar inside container, so It goes in one line with other page content. All content inside app should have max width for each breakpoint instead of full page width. Placing all content iside container don't solve problem.
I marked with red box on screenshot where content should be.
Hey I am having the same issue. I came up with a rough work around, my question is here incase you found an answer as well.
Make vuetify app bar items align with <v-container> body content
My solution looks like so:
The colors show the nav bar width adjusted to match the body. The code looks like so:
<template>
<v-sheet color="red">
<v-container class="pa-0">
<v-app-bar
dense
flat
color="blue accent-4"
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in quickLinks" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</v-sheet>
</template>
For others looking to only constrain the content of the v-app-bar, I found a good example over at https://vuetifyjs.com/en/examples/wireframes/constrained/ (as Ari pointed out in the comment for the main question):
<template>
<v-app-bar app>
<v-container class="pa-0 fill-height">
<!-- [...] -->
</v-container>
</v-app-bar>
</template>
I got mine to work and also keep the navbar background extended to the edge of the screen. You can put a container inside the app-bar but it messes with the flexbox of the items so you just have to put a v-row inside for them to align properly.
<template>
<nav class="toolbar" align="center">
<v-app-bar app>
<v-container>
<v-row align="center">
<v-app-bar-title>
<!-- Title-->
</v-app-bar-title>
<div>
<!-- Left side content -->
</div>
<v-spacer />
<div>
<!-- Right side content -->
</div>
</v-row>
</v-container>
</v-app-bar>
</nav>
</template>
<style scoped>
.v-container {
max-width: 60% !important;
}
</style>