I have a issue with vue-leaflet and vuetyfy. I have simple template which show different layout depends on mobile or not. If app detect mobile I want to make 2 row layout, first map, second for input form. But the map occupy all screen space and input form show above this map. My second layout for desktop screen work fine, I just set w-50 class to map and that all. I've tried to set h-50 to the map, but it doesn't work as expected. How to fix this issue?
My layout looks like this:
<template>
<v-container fluid v-if="mobile">
<v-row class="mb-5">
<v-col class="pl-0">
<Map marker="true" />
</v-col>
</v-row>
<v-row>
<v-col>
<AddPlaceDescription />
</v-col>
</v-row>
<Footer />
</v-container>
<v-container fluid v-else>
<v-row>
<v-col class="px-0">
<Map class_attr="w-50" marker="true" />
</v-col>
<v-col>
<AddPlaceDescription />
</v-col>
</v-row>
<Footer />
</v-container>
</template>
This is my Map component
<template>
<l-map
id="themap"
:class="class_attr"
:zoom="zoom"
:center="center"
#update:zoom="zoomUpdated"
#update:center="centerUpdated"
#update:bounds="boundsUpdated"
>
<l-tile-layer :url="url" ></l-tile-layer>
<v-marker-cluster>
<l-marker
v-if="marker"
ref="marker"
draggable
#dragend="onDragEnd"
:latLng="center"
></l-marker>
<l-marker
v-for="marker in markersData"
:key="marker['latLng'][0]"
:lat-lng="marker['latLng']"
>
<l-popup>{{marker['description']}}</l-popup>
</l-marker>
</v-marker-cluster>
</l-map>
</template>
AddPlaceDescription component
<template>
<v-row>
<v-col class="ml-3">
<v-alert
v-if="showMsg"
border="left"
:color="msgColor"
outlined
text
type="error"
>{{ msg }} {{countDown}} </v-alert
>
<form action="">
{{ this.$store.state.Map.markerLatLng }}
<v-textarea
outlined
name="place-description"
label="Description"
v-model="description"
:disabled='showMsg'
></v-textarea>
<v-btn #click="sendPoint" :disabled='showMsg'>Send</v-btn>
<v-btn #click="clearForm" :disabled='showMsg'>Clear</v-btn>
</form>
</v-col>
</v-row>
</template>
and result like this
So I've break it yahoooo)) I just interchange the position of components and it works as expected. Of course I want to description component below the map, but anyway it is better than nothing.
Related
<template> <!--HomeView-->
<v-layout>
<v-col class="ma-0 pa-0">
<v-img
class="bg-white"
:aspect-ratio="1"
src="https://images7.alphacoders.com/952/952959.jpg"
cover
></v-img>
</v-col>
<v-col class="ma-0 pa-0 bg-something d-flex align-center justify-center">
<v-card>
<InputComp />
</v-card>
</v-col>
</v-layout>
</template>
Inputcomp
<template>
<v-sheet class="bg-something pa-12" rounded>
<v-card class="mx-auto px-6 py-8 bg-somethingElse">
<v-form v-model="form" #submit.prevent="onSubmit">
<v-text-field
v-model="email"
:readonly="loading"
:rules="[required]"
class="mb-2"
clearable
label="Email"
></v-text-field>
<v-text-field
v-model="password"
:readonly="loading"
:rules="[required]"
clearable
label="Password"
placeholder="Enter your password"
></v-text-field>
<br />
<v-btn
:disabled="!form"
:loading="loading"
block
color="something"
size="large"
type="submit"
variant="elevated"
>
Sign In
</v-btn>
</v-form>
</v-card>
</v-sheet>
</template>
div photo
I add d-flex and my Card element is restricted. I want to both align and center. I tried it with you, can you help me?
Error clears when removing d flex and align-items. When removing align-items, the bottom of the card becomes white. Separated from the Card Grid
I'm trying to center my auth component (v-card) horizontally and vertically. I tried all kinds of solutions like justify=center and align=center on the rows, fill-height on the v-container, class="fill-height" on the v-container but its not working. What am I doing wrong here ?
Code :
<script setup lang="ts">
import { useUserStore } from "../../stores/user";
const store = useUserStore();
</script>
<template>
<v-card width="800" >
<v-card-title>
Authentication
</v-card-title>
<v-card-subtitle>
login with username and password
</v-card-subtitle>
<v-card-text>
<v-row>
<v-col cols="12" md="6">
<v-text-field v-model="store.username" label="Username"></v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-text-field v-model="store.password" label="Password"></v-text-field>
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>
<script setup lang="ts">
import Auth from "../components/auth/Auth.component.vue"
</script>
<template>
<v-container>
<v-row style="border:1px solid red;" fill-height>
<v-col class="d-flex justify-center items-center">
<Auth/>
</v-col>
</v-row>
</v-container>
</template>
<template>
<v-app>
<v-main>
<router-view></router-view>
</v-main>
</v-app>
</template>
<script setup lang="ts">
</script>
Update
Check this codesanbox I made: https://codesandbox.io/s/stack71483246-center-login-p1u6zv?file=/src/views/Home.vue
Looks like by just adding the class fill-height to the root container you can center it vertically.
<template>
<v-container fluid class="fill-height">
<v-row style="border:1px solid red;">
<v-col class="d-flex justify-center">
<Auth/>
</v-col>
</v-row>
</v-container>
</template>
The following snippet will center the card vertically in the parent in Vuetify 3:
<v-row align="center" class="fill-height">
<v-col>
<v-card class="ma-3">
...
</v-card>
</v-col>
<v-row>
I am trying to get all of my links in three columns in my footer with the copyright line below that. However, my copyright line is showing up in a phantom fourth column and it overlaps the third column if the screen width gets too small. If I use the same layout in my content section, I get the three columns.
Here is my footer component:
<template>
<div>
<v-footer color="primary lighten-1" padless>
<v-row justify="center">
<v-col cols=4>
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
</v-col>
<v-col cols=4>
<div class="my-1">
<v-btn color="white" text rounded>
Data Sources
</v-btn>
</div>
</v-col>
<v-col cols=4>
<div class="my-1">
<v-btn color="white" text rounded>
Browse Maps
</v-btn>
</div>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<p class="text-center grey--text text--lighten-2">Copyright 2020, </p>
</v-col>
</v-row>
</v-footer>
</div>
<template>
On a possibly related note, why do I have to wrap each button in a div with a my-? class to get the buttons to stack vertically.
Edit:
I am using Vuetify v2.2.11.
Here is a screenshot of what it is doing:
Here is what I want:
My buttons that are within the same column are showing up side/side unless I either wrap them in the my-? classed div or there is not enough room in the column to display them side/side. I would like them stacked on top of each other in every screen size. And of course I only want the three columns for my buttons
A v-row only works as expected if wrapped in a v-container.
Add a <v-container fluid> around your v-rows and it should work just fine. Fluid is described as "Removes viewport maximum-width size breakpoints", thus removing the horizontal padding.
The whole thing would look like this in the end:
<template>
<div>
<v-footer color="primary lighten-1" padless>
<v-container fluid>
<v-row class="text-center">
<v-col cols="4">
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
</v-col>
<v-col cols="4">
<div class="my-1">
<v-btn color="white" text rounded>
Data Sources
</v-btn>
</div>
</v-col>
<v-col cols="4">
<div class="my-1">
<v-btn color="white" text rounded>
Browse Maps
</v-btn>
</div>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<p class="text-center grey--text text--lighten-2">
Copyright 2020,
</p>
</v-col>
</v-row>
</v-container>
</v-footer>
</div>
</template>
I started an internship, and they gave me an existing app to improve in VueJs. However I still a beginner in web dev.
Here's my problem: there is a form that is divided into many rows, each one contains a lot of inputs, so I added a scroll bar as the user can fill them all, but once I switch to mobile mode,
it appears in the first row, but when I go to others it disappears. After re-switching to the PC mode, and going to another row, it reappears.
<template>
<v-tab-item>
<v-container
id="scroll-target"
style="max-height: 400px"
class="overflow-y-auto"
>
<v-card flat>
<v-card v-if="##############">
<v-card-text>
<inputs v-bind="$props" />
</v-card-text>
</v-card>
<v-row v-for="########":key="#####">
<v-col>
<inputSectionCard :######" />
</v-col>
</v-row>
<v-row v-if="#####">
<v-col>
<localisationCard />
</v-col>
</v-row>
<v-row v-if="####">
<v-col>
<attachments />
</v-col>
</v-row>
</v-card>
<scrollbar />
</v-container>
</v-tab-item>
</template>
component scrollBar:
<template>
<v-row
v-scroll:#scroll-target="onScroll"
align="center"
justify="center"
style="height: 100%"
>
</v-row>
</template>
<script>
export default {
data: () => ({
offsetTop: 0
}),
methods: {
onScroll(e) {
this.offsetTop = e.target.scrollTop
}
}
}
</script>
Vuetify official example
I have, say copied the layout from the vuetify docs but I am not getting the same layout. I cannot figure out what is blocking me. Is there some default properties that I have to deal with?
Login.vue:
<template>
<v-app id="inspire">
<v-content>
<v-container
class="fill-height"
fluid
>
<v-row
align="center"
justify="center"
>
<v-col
cols="12"
sm="8"
md="4"
>
<v-card class="elevation-12">
<v-toolbar
color="primary"
dark
flat
>
<v-toolbar-title>Login</v-toolbar-title>
<v-spacer />
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field
label="Login"
name="login"
prepend-icon="person"
type="text"
v-model="username"
/>
<v-text-field
id="password"
label="Password"
name="password"
prepend-icon="lock"
type="password"
v-model="password"
/>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn #click="login" color="primary" >Login</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
app.vue:
<template>
<v-app id="app">
<v-content>
<v-container fluid>
<router-view />
</v-container>
</v-content>
</v-app>
</template>
<script>
I do not have any custom designed css. I am using vue-cli.
Here is what my layout looks like:
With no error in console.