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
Related
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 been searching for solution for my problem, but still not resolved :')..
Anyway, Thanks so much for the help, Masters :)
So,
I have a button for add new task with this code inside the q-item-section , but when I clicked it, it is not adding new item as a expected..
<q-btn
#click="addMore"
class="text-weight-bolder"
label="Add"
size="14px"
color="white"
flat
icon-right="mdi-plus-circle-outline"
/>
By clicking above button, it will shows a new item (by using following code below), which is needed to be filled by users
<q-item v-for="task in todoOthers2" :key="task">
<q-item-section avatar>
<div class="cursor-pointer size-16px">
{{ task.time }}
<q-popup-edit v-model="time" class="bg-grey-2 text-white" :cover="false" :offset="[0, 10]" v-slot="scope">
<q-input filled v-model="todoOthers2.time" mask="time" :rules="['time']">
<template v-slot:append>
<q-icon name="access_time" class="cursor-pointer text-primary">
<q-popup-proxy transition-show="scale" transition-hide="scale">
<q-time v-model="time">
<div class="row items-center justify-end">
<q-btn v-close-popup label="Close" color="primary" flat />
</div>
</q-time>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</q-popup-edit>
</div>
</q-item-section>
<q-item-section no-wrap >
<div class="cursor-pointer text-weight-bolder" style="width: 100px">
{{task.activity}}
<q-popup-edit v-model="todoOthers2.activity" class="bg-grey-2 text-white" :cover="false" :offset="[0, 10]" v-slot="scope">
<q-input v-model="scope.value" dense autofocus counter #keyup.enter="scope.set">
<template v-slot:append>
<q-icon name="edit" />
</template>
</q-input>
</q-popup-edit>
</div>
</q-item-section>
<q-item-section top side>
<div class="text-grey-8 q-gutter-xs">
<q-btn size="12px" color="secondary" flat dense round icon="mdi-check-circle" />
<q-btn size="12px" color="negative" flat dense round icon="mdi-delete" />
</div>
</q-item-section>
</q-item>
Here is the setup()
setup() {
const todoOthers2 = ref({
activity:"Add Your Task Here",
time:"08:00"
function addMore(){
todoOthers2.value.push({
activity: "Add Your Task Here",
time:"08:00"
})
return {
todoOthers2,
addMore,
}
}
I am trying to use https://vuetifyjs.com/en/components/tooltips in my rails app. I am not sure where I am going wrong but this is not working. Help me figure out the problem.
When I try to inspect the element this is how it shows
<div class="flex add-col-padding-left xs1 md6">
<span class="tooltip tooltip--bottom">
<div class="tooltip__content" style="left: 0px; opacity: 0; top: 12px; z-index: 0; display: none;">
<i dark="" class="material-icons icon-black">
question_answer
</i>
<span>Tooltip</span>
</div>
<span></span>
</span>
</div>
index.js
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify, {
theme: colors
});
index.vue
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<i dark v-on="on" class="material-icons icon-black">
question_answer
</i>
</template>
<span>Tooltip</span>
</v-tooltip>
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.
I have a card with form/ I want to place in the center of the page.
Here my layout 'empty':
<template>
<nuxt />
</template>
<script>
export default {
name: 'Empty'
}
</script>
<style></style>
I have next page with form:
<template>
<b-card>
<b-form #submit.stop.prevent="onSubmit">
...
</b-form>
</b-card>
</template>
I get next result:
<body data-gr-c-s-loaded="true">
<div id="__nuxt">
<!---->
<!---->
<div id="__layout">
<div class="card">
<!---->
<!---->
<div class="card-body">
<!---->
<!---->
<form class="">
...
</form>
</div>
<!---->
<!---->
</div>
</div>
</div>
...
</body>
On the screen, it looks like:
But I want to it looks like:
I can't find how to do it. Can you help me?
You can use a combination of bootstrap v4.3 flex utility classes and position utility classes with a sprinkling of custom styling:
<div
class="fixed-top d-flex align-items-center justify-content-center"
style="bottom: 0; overflow-y: auto"
>
<b-card style="max-width: 400px;">
<form>
<b-form-input class="mb-2"></b-form-input>
<b-form-input class="mb-2"></b-form-input>
<b-form-input class="mb-2"></b-form-input>
<b-form-input class="mb-2"></b-form-input>
</form>
</b-card>
</div>
You may need to tweak the above styles a bit.