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 would like to have a card that look pretty much like the attached image. It's seems to me that all the button ( circular ones) are on top of a card. I have tried fabs but it doesn't work even if it did i would still encounter the beneath label problem
Edit:
template:
<ion-card class="noSpacing niceAngles" >
<ion-card-content class="noSpacing">
<div class="container">
<div class="scroll" scrollX="true">
<ion-fab-button color="primary">Primary</ion-fab-button>
<ion-fab-button color="secondary">Secondary</ion-fab-button>
<ion-fab-button color="danger">Danger</ion-fab-button>
<ion-fab-button color="light">Light</ion-fab-button>
<ion-fab-button color="dark">Dark</ion-fab-button>
</div>
</div>
</ion-card-content>
</ion-card>
and the scss
.container {
overflow: hidden;
white-space: nowrap;
.scroll {
overflow: auto;
}
ion-chip{
--background:0000ff;
}
&::-webkit-scrollbar {
display: none;
}
}
ion-fab-button {
.fab { display: inline-block !important}
}
i think something like this would do
<ion-row style="padding-bottom:15px;">
<ion-col class="ion-text-center" style="background:orangeredg">
<ion-fab-button style="background:blueg;" color="primary" fill="clear" class="ion-text-center">
<ion-icon style="background:redg;" style="fill: white;" [src]="list.image" color="customcolor"></ion-icon>
</ion-fab-button>
<ion-row style="padding-top:10px;">
<h4>primary</h4>
</ion-row>
</ion-col>
<ion-col class="ion-text-center" style="background:orangeredg">
<ion-fab-button style="background:blueg;" color="secondary" fill="clear" class="ion-text-center">
<ion-icon style="background:redg;" style="fill: white;" [src]="list.image" color="customcolor"></ion-icon>
</ion-fab-button>
<ion-row style="padding-top:10px;">
<h4>secondary</h4>
</ion-row>
</ion-col>
<ion-col class="ion-text-center" style="background:orangeredg">
<ion-fab-button style="background:blueg;" color="danger" fill="clear" class="ion-text-center">
<ion-icon style="background:redg;" style="fill: white;" [src]="list.image" color="customcolor"></ion-icon>
</ion-fab-button>
<ion-row style="padding-top:10px;">
<h4>danger</h4>
</ion-row>
</ion-col>
</ion-row>
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>
This is happening to one of the final components
This is what I want it to look like
This is the code for the card, I'm not sure why the upload is getting cut off I've tried adding a fixed height for the avatar-uploader class and for the div around it but so far nothing has helped.
<el-card>
<el-form class="form" :model="ruleForm" :rules="rules" ref="ruleForm" role="form">
<h1>Editando Curso</h1>
<el-form-item label="Nombre del curso" class="labels" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="Seleccione la materia requerida">
<el-select style="width: 80%;" v-model="matery" prop="materia" name="materia"
placeholder="Seleccionar la materia"
clearable>
<el-option
v-for="item in materia"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-checkbox v-model="strict" prop="strict" name="strict">Obligatorio</el-checkbox>
<el-checkbox v-if="matery" v-model="remover" prop="remover">Remover</el-checkbox>
</el-form-item>
<el-form-item label="Resumen" prop="resumen">
<el-input type="textarea" v-model="ruleForm.summary"></el-input>
</el-form-item>
<el-form-item label="Descripcion" prop="description" class="vue-editor-form">
<vue-editor v-model="ruleForm.description">
<el-input v-model="ruleForm.description"></el-input>
</vue-editor>
</el-form-item>
<el-row :gutter="20">
<el-col :md="8">
<el-form-item label="Precio" prop="price">
<el-input-number controls-position="right" class="full-width" :min="1"
v-model="ruleForm.price"></el-input-number>
</el-form-item>
</el-col>
<el-col :md="8">
<el-form-item label="Horas" prop="hours">
<el-input-number controls-position="right" class="full-width" :min="1"
v-model="ruleForm.hours"></el-input-number>
</el-form-item>
</el-col>
<el-col :md="8">
<el-form-item label="Nota mínima" prop="min_grade">
<el-input-number controls-position="right" class="full-width" :min="1"
v-model="ruleForm.min_grade"></el-input-number>
</el-form-item>
</el-col>
</el-row>
<div class="line">
<el-upload
class="avatar-uploader"
action="/api/courses/upload-image"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img class="avatar" v-if="imageUrl" :src="imageUrl"/>
<img class="avatar" v-else :src="ruleForm.image"
#error="this.src='https://www.logistec.com/wp-content/uploads/2017/12/placeholder.png'">
</el-upload>
</div>
<el-row class="text-right">
<a href="/courses">
<el-button type="danger" plain>Cancelar</el-button>
</a>
<el-button icon="el-icon-check" type="danger" plain #click="submit(ruleForm)">
Guardar Edición
</el-button>
</el-row>
</el-form>
</el-card>
relevant css, the <el-card> had a class on it but that class doesn't exist so I removed it
.text-right {
text-align: right;
}
.full-width {
width: 100% !important;
}
.labels {
text-align: center;
padding-top: 2%;
}
.line {
text-align: center;
width: 100%;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
height: 250px;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
I know I can change the template for the option slot, but can we do the same for the label slot? Like for option:
<v-select inputId="originsId" :options="origins" label="city" placeholder="Search...">
<template slot="option" slot-scope="origin">
<div class="flex">
<div class="col">
<span>{{ origin.city }}</span>
</div>
<div class="col">
<span>{{ origin.country }}</span>
</div>
</div>
</template>
</v-select>
Is there some way I can style the label when the option is selected? Now it only shows the label="city" value. I need something like:
<v-select inputId="originsId" :options="origins" label="city" placeholder="Search...">
<template slot="label" slot-scope="origin">
<div class="flex">
<div class="col">
<span>Selected city: {{ origin.city }}</span>
</div>
<div class="col">
<span>Selected country: {{ origin.country }}</span>
</div>
</div>
</template>
<template slot="option" slot-scope="origin">
<div class="flex">
<div class="col">
<span>{{ origin.city }}</span>
</div>
<div class="col">
<span>{{ origin.country }}</span>
</div>
</div>
</template>
</v-select>
Basically I need some custom styling and additional info other then label="city" when the option is selected.
As Vue-select Github: L324 and Vue-select Github: L539, uses <slot name="selected-option"> will be one solution.
Updated: from Vue-select Github you will see there is one parent slot = selected-option-container, but I found it hasn't been deployed to the dist. In future, you should be able to use this slot to custom the whole container and the selected options.
Like below demo:
Vue.component('v-select', VueSelect.VueSelect)
new Vue({
el: '#app',
data: {
options: [
{
title: 'Read the Docs',
icon: 'fa-book',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View on GitHub',
icon: 'fa-github',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View on NPM',
icon: 'fa-database',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View Codepen Examples',
icon: 'fa-pencil',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
}
]
}
})
body {
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}
h1,.muted {
color: #2c3e5099;
}
h1 {
font-size: 26px;
font-weight: 600;
text-rendering: optimizelegibility;
-moz-osx-font-smoothing: grayscale;
-moz-text-size-adjust: none;
}
#app {
max-width: 30em;
margin: 1em auto;
}
#app .dropdown li {
border-bottom: 1px solid rgba(112, 128, 144, 0.1)
}
#app .dropdown li:last-child {
border-bottom: none;
}
#app .dropdown li a {
padding: 10px 20px;
display: flex;
width: 100%;
align-items: center;
font-size: 1.25em;
}
#app .dropdown li a .fa {
padding-right: 0.5em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-select#latest"></script>
<div id="app">
<h1>Vue Select - Custom Option Templating</h1>
<v-select :options="options" label="title">
<template slot="selected-option" slot-scope="option">
<div class="flex">
<div class="col">
<span class="fa" :class="option.icon"></span>
<span>Selected item: {{ option.title }}</span>
</div>
</div>
</template>
<template slot="option" slot-scope="option">
<span class="fa" :class="option.icon"></span>
{{ option.title }}
</template>
</v-select>
</div>