I'm using Bootstrap Vue library for my columns, I display 3 cards per row and it looks fine on desktop but it's looking way too small on mobile so I want to display those 3 cards one below the other just on mobile. How can I do this?
new Vue({
el: "#app"
});
.card{
background-color: #BAE5FF !important;
border: none !important;
border-radius: 0px 0px !important;
}
.work-link{
color: #172e54;
}
<link href="https://unpkg.com/bootstrap#4.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue#2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue#2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.0.0-rc.11/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-row>
<b-col cols="4" sm="4" md="4">
<b-card no-body style="max-width: 20rem;" img-src="https://placekitten.com/380/200" img-alt="Image" img-top>
<template v-slot:header>
<h5 class="mb-0"><strong>1</strong></h5>
</template>
</b-card>
</b-col>
<b-col cols="4" sm="4" md="4">
<b-card no-body style="max-width: 20rem;" img-src="https://placekitten.com/380/200" img-alt="Image" img-top>
<template v-slot:header>
<h5 class="mb-0"> <strong>2</strong></h5>
</template>
</b-card>
</b-col>
<b-col cols="4" sm="4" md="4">
<b-card no-body style="max-width: 20rem;" img-src="https://placekitten.com/380/200" img-alt="Image" img-top>
<template v-slot:header>
<h5 class="mb-0"><strong>3</strong></h5>
</template>
</b-card>
</b-col>
</b-row>
</div>
Bootstrap layout always has 12 columns, the cols, sm, md, lg, and xl attributes specify how many of those columns you want an element to take up at various sizes. Somewhat confusingly, the smallest breakpoint (xs) is specified using the cols attribute. If the total size of columns exceeds 12, it will start a new row.
So if you want them to stack on mobile, you need to set the the colsattribute to 12 so that each card takes up the full row on mobile.
Related
I have a sidebar menu where I am trying to put my social media section at the bottom of the sidebar but I am struggling to get flex to work and do so. I tried item-stretch on the second row but the issue is the row does not expand the entire scroll area. The closest example which is not quasar per say can be found here https://preview.colorlib.com/#elen
Sidebar Component:
<template>
<div class="navigation-links q-pa-lg">
<q-list padding>
<q-item clickable v-ripple class="q-pa-md q-ma-md menu-item">
<q-item-section avatar>
<q-icon name="fa-solid fa-house" style="font-size:1.25rem"/>
</q-item-section>
<q-item-section>
HOME
</q-item-section>
</q-item>
<q-item active clickable v-ripple class="q-pa-md q-ma-md menu-item active-menu-item">
<q-item-section avatar>
<q-icon name="fa-solid fa-shirt" style="font-size:1.25rem"/>
</q-item-section>
<q-item-section>
SERVICES
</q-item-section>
</q-item>
<q-item clickable v-ripple class="q-pa-md q-ma-md menu-item">
<q-item-section avatar>
<q-icon name="fa-solid fa-envelope" style="font-size:1.25rem"/>
</q-item-section>
<q-item-section>
CONTACT US
</q-item-section>
</q-item>
</q-list>
</div>
<div class="socialmedia-links q-pa-lg text-center column no-wrap flex-center self" style="">
<div class="row">
<q-btn flat size="sm" color="primary" round icon="fa-brands fa-google" aria-label="google" class="float-right q-ma-sm no-shadow"/>
<q-btn flat size="sm" color="primary" round icon="fa-brands fa-facebook-f" aria-label="facebook" class="float-right q-ma-sm no-shadow"/>
<q-btn flat size="sm" color="primary" round icon="fa-brands fa-instagram" aria-label="instagram" class="float-right q-ma-sm no-shadow"/>
</div>
<h2 class="text-h5 text-weight-bolder q-mb-xs">CONNECT WITH US</h2>
<h6 class="text-subtitle1 text-accent text-weight-normal q-my-none">If you like what you have seen so far we can guarentee you will appreciate our print quality.</h6>
</div>
<script setup>
import { ref } from 'vue'
const searchText = ref('')
</script>
<style lang="scss" scoped>
.block-wrapper{
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
.active-menu-item{
background-color: $background-accent;
}
.menu-item{
letter-spacing: .15rem;
font-weight:500;
border-radius: 7px;
}
</style>
Layout Component
<q-drawer
v-model="navigationDrawer"
bordered
side="left"
behavior="mobile"
:width="$q.screen.width >= 400 ? 400 : $q.screen.width"
>
<q-scroll-area class="fit q-pa-lg">
<div class="row justify-end">
<q-btn flat round icon="fa-solid fa-xmark" aria-label="Menu" #click="toggleNavigationDrawer"/>
</div>
<div class="row" style="min-height: 100%;">
<div class="col-12">
<HomeSidebar/>
</div>
</div>
</q-scroll-area>
</q-drawer>
Turn q-scroll-area's content container into a flex column. You can apply CSS classes directly to the container with :content-style prop
<q-scroll-area
class="fit q-pa-lg"
:content-style="{ display: 'flex', 'flex-direction': 'column' }"
>
Also make the div surrounding the sidebar a flex column with justify-content: space-between. The row surrounding it should also have flex-grow: 1
<div class="row" style="min-height: 100%; flex-grow: 1">
<div class="col-12 flex column justify-between">
<HomeSidebar/>
</div>
Here's a sandbox that shows the result
I can't figure out why my v-list won't update the color whatever i do.
here is my code
<template>
<v-app>
<v-navigation-drawer app>
<div style="background-color: grey;" class="d-flex justify-center pa-4 ">
Fichiers chargés
</div>
<div class="d-flex flex-column ">
<v-btn prepend-icon="mdi-folder" class="mt-4 mb-2 mx-auto text-black bg-green hidden-sm-and-down"
plain>Parcourir
..</v-btn>
<v-checkbox class="mx-auto" label="Ajout auto. en base"></v-checkbox>
</div>
<v-divider></v-divider>
<v-list class="my-list" color="primary" >
<v-list-tile v-for=" f in fichiers">
<v-card-text class=" mx-5 px-5 bg-red">
{{ f.nom }}
</v-card-text>
</v-list-tile>
<v-divider></v-divider>
<v-list-item style="width: 0100%;">
<div style="text-align: center;">
{{ fichiers.length }} Fichiers Chargés
</div>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
</template>
<style>
.my-list {
background-color: red;
}
</style>
<script setup>
let fichiers = [
{
nom: "Fichier1",
taille: "2ko",
contenu: "jhbjm",
etat: [],
}
]
</script>
in my devtools i can see that the v-list took the bg-transparent. I tried everything to force it but nothing happened
sorry for my bad english XD
The Solution :
Don't forget to give a feedback.
Use "!important" in your "background-color" value
.my-list {
background-color: red !important;
}
Use the "id" selector if you don't want to use "!important"
#the-list {
background-color: red;
}
<v-list id="the-list" color="primary" >
<v-list-tile v-for=" f in fichiers">
...
</v-list-item>
</v-list>
The reason of your problem :
If you look at the browser developer tool, you'll find that the class "v-list" is written before your custom class "my-list". That means, the priority is not for your custom class.
I have an outer Vue template:
<template>
<v-container fluid>
<div>
<v-row>
<v-col md="4" class="pa-1" v-for="i in allComponents" :key="i.id">
<gokb-reviews-title-card
:id="i.id.toString()"
#keys="addkeyFields"
/>
</v-col>
</v-row>
</div>
</v-container>
</template>
and an inner Vue template (gokb-reviews-title-card)
<template>
<v-card class="elevation-4 flex d-flex flex-column" v-if="!!title?.name">
<v-card-title primary-title>
<h5 class="titlecard-headline">{{ title.name }}</h5>
</v-card-title>
<v-card-text class="flex" v-for="(i, count) in title.identifiers" :key="i.id">
<div v-if="count == 0">{{ $tc('component.identifier.label', 2) }}</div>
<div class="titlecard-ids" :class="i.namespace.value">{{ i.namespace.value }}: {{ i.value }}</div>
</v-card-text>
<v-card-text class="flex" v-if="!!title?.history">
<div class="titlecard-history">{{ $t('component.title.history.label') }}</div>
<div class="titlecard-history">{{ title.history }}</div>
</v-card-text>
</v-card>
</template>
The row consists of 3 gokb-reviews-title-cards. I want to have it 4 cards.
I've tried to change it by adding cols="3" to the v-col as discussed in this question. This did not show any effect.
Adding a CSS .grid to the outer-most <div> (discussed here) can change the width of a card, but the maximum number of cards per row stays 3. The row is "half-filled" then. The CSS I tried is:
.reviews-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
};
How can I make the <v-row> contain 4 <v-col>s thet each contain 1 card?
I think it is because you have md="4" in
<v-col md="4" class="pa-1" v-for="i in allComponents" :key="i.id">
if you change it to 3 it should work since it's a 12-based grid
<v-col md="3" class="pa-1" v-for="i in allComponents" :key="i.id">
in addition, your cols="3" might not be working because it only applies to widths narrower than the md breakpoint.
If you are using responsive layouts keep the md, but also define other widths, either through cols or xs. Otherwise just use cols
I want these two cards to be in the center but they appear in the top left corner. What am I missing?
<template>
<div>
<v-layout justify-center>
<v-card color="#132939" height="500" width="200"></v-card>
<v-card color="#a3a4a4" height="500" width="800"> </v-card>
</v-layout>
</div>
</template>
<script>
export default {};
</script>
<style></style>
The most possible reason for this behaviour can be the limited width and height of the parent element (of v-layout), just like in the first example, where I made the div's width to be equal to two cards' width.
If the parent element has a width greater than two cards justify-center prop works as intended (second example - in this case, I set width to auto because it takes the width of the window).
If you want to make cards in the centre on a vertical axis you can use align-center prop but mostly you will have to set the height property for parents elements (third example).
new Vue({
el: '#app',
vuetify: new Vuetify(),
});
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<template>
<div style="width: 100px;">
<v-layout justify-center align-center style="border: 1px solid black">
<v-card color="#132939" height="50" width="20"></v-card>
<v-card color="#a3a4a4" height="50" width="80"> </v-card>
</v-layout>
</div>
</template>
<template>
<div style="width: auto;">
<v-layout justify-center align-center style="border: 1px solid black">
<v-card color="#132939" height="50" width="20"></v-card>
<v-card color="#a3a4a4" height="50" width="80"> </v-card>
</v-layout>
</div>
</template>
<template>
<div style="width: auto; height: 100%">
<v-layout justify-center align-center style="border: 1px solid black; height: 100%">
<v-card color="#132939" height="50" width="20"></v-card>
<v-card color="#a3a4a4" height="50" width="80"> </v-card>
</v-layout>
</div>
</template>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
Good day,
This way I have the template in one component.
<template>
<v-card fluid>
<div class="text-xs-center">
<v-btn outline small fab color="indigo" #click="abrirmodalBusqueda()">
<v-icon>search</v-icon>
</v-btn>
</div>
<div id="map">
<l-map style="height: 500px; width: 100%" :zoom="zoom" :center="center" #update:center="centerUpdate">
<l-tile-layer :url="url"></l-tile-layer>
<l-marker :lat-lng="marker" >
<l-popup>Estoy en estas coordenadas asadsad {{latitud}}</l-popup>
</l-marker>
<l-marker v-for="marker in markers" :lat-lng="marker">
<l-popup>Estoy en estas coordenadas asadsad {{marker.lat}}
<v-flex xs12 sm4 text-xs-center>
<div>
<v-btn small color="primary" #click="dialogParqueos = true">Seleccionar</v-btn>
</div>
</v-flex>
</l-popup>
</l-marker>
</l-map>
</div>
</v-card>
</template>
When using the property of height in px and not in% I can already visualize the map l-map style = "height: 500px" since if I use 100% the map can not be seen. The problem that when making use of v-navigation-drawer the map is assembled in the following way:
As you notice, it overlaps the left panel. For the map I am using the Vue2Leaflet library. Thank you in advance.
SOLUCION:
<v-container>
<v-card
class="pa-3"
flat
height="550px"
width="100%"
>
<l-map style="height: 100%; width: 100%; position: sticky !important;" :zoom="zoom" :center="center">
<l-tile-layer :url="url"></l-tile-layer>
<l-marker :lat-lng="markerLatLng" ></l-marker>
</l-map>
</v-card>
</v-container>
add position:sticky !important; in the style.