I have this template for a Vue component (See it in CODEPEN):
<div class="some-class">
<v-form >
<v-container #click="someMethod()">
<v-row>
<v-col cols="3" sm="3" v-for="p in placeholders" :key="p">
<v-text-field :placeholder="p" single-line outlined >
</v-text-field>
</v-col>
</v-row>
</v-container>
</v-form>
</div>
where placeholders is an array like:
['Title 1', 'Title 2', 'Title 3',...'Title 21']
and some-class is in the style section of the component:
<style>
div.some-class {
display: inline-block;
max-width: 100%;
overflow-x: auto;
}
</style>
I would like to have them all on one line so I can scroll horizontally. But instead I get this:
How can I tweak the style to see all the text fields on one line?
Vuetify uses a flex grid. The reason that it's not overflowing is that you have to set the flex-wrap to nowrap.
Basically, just add the styles below to your v-row:
.nowrap-overflow {
flex-wrap: nowrap;
overflow-x: auto;
}
Modified codepen here:
https://codepen.io/CodingDeer/pen/zYYGOGd
Related
I'm trying to write a landing page, and I'm attempting to use a v-parallax element that covers the whole page and can be scrolled down.
In my code, I have a view named LandingPage.vue, a component named TopPageParralax.vue, and then my main App.vue.
LandingPage.vue:
<template>
<v-container>
<top-page-parralax />
</v-container>
</template>
<style></style>
<script>
import TopPageParralax from "#/components/TopPageParralax.vue";
export default {
name: `LandingPage`,
components: {TopPageParralax},
};
</script>
<style>
</style>
TopPageParralax.vue:
<template>
<v-container>
<v-parallax height="100vh" src="https://braydenjohnsondevlandiing.s3.amazonaws.com/Complex+Square+Grid+With+Drop+Shadows.png">
<v-row class="fill-height" align="center" justify="center">
<v-col cols="12" class="text-center">
<h1 class="display-2 font-weight-bold mb-3">Brayden Johnson</h1>
<h2 class="display-4 font-weight-light">Front End Web Developer</h2>
</v-col>
</v-row>
</v-parallax>
</v-container>
</template>
<style>
v-parallax {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
</style>
<script lang='ts'>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'TopPageParralax',
});
</script>
App.vue
<template>
<v-app>
<v-main>
<router-view/>
</v-main>
</v-app>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'App',
})
</script>
<style> </style>
I'm expecting no margin, however I get the following result:
For some information:
I'm using Chrome V108.0.5359.126 and Vue 3 with Vuetify 3
You need to add the fluid property to v-container which fully extends the width.
To remove the default margin add ma-0 property to component class property
To remove the default padding add pa-0 property to component class property
Actually, the theme installed site is distracting. If you want to define your custom property then use !important suffex to css property. e.g margin: 10px !important;
I'm using a Vue Filepond and would like to make it fill the height of its container. I'm also using Vuetify.
If I try setting the values in the CSS it gets overridden by 76px.
fill-height is making the file-pond outer container fill the area but not its content.
<template>
<file-pond
class="fill-height"
name="filePond"
height='100%'
ref="filePond"
label-idle="Drop files here or <span class='filepond--label-action'>Browse</span>"
accepted-file-types=".csv"
v-bind:files="files"
#processfile="updateUploadedFiles"
#error="errorLoadingFile"
:server="serverOptions"
:allow-multiple="true"
:allow-process="false"
:allow-revert="false"
:drop-on-page="true"
:drop-on-element="false"
:maxParallelUploads="3">
</file-pond>
</template>
I've tried setting the styling to this but it's not making a difference.
.filepond--root,
.filepond--root .filepond--drop-label {
height: 200px;
}
My workaround:
Encircle that on a vuetify v-card
Use the background color that filepond is using
Set min and max height of the working filepond area (file--root) (do not scope the CSS file)
<template>
<v-card flat class="pa-0" style="background-color: #f1f0ef;height: 421px;">
<file-pond
ref="pond"
name="filePondImages"
#init="handleFilePondInit"
:files="imagenesAnuncioFilePond"
#processfile="imagenesAnuncioOnProcess"
#removefile="imagenesAnuncioOnDelete"
/>
</v-card>
</template>
<style lang="scss">
.filepond--root {
display: flex;
flex: column;
min-height: 421px;
max-height: 421px;
}...
i copied the code from async part of the documentation, because that's the 'X' to remove value i want.
here is my general component that i use in other vue components
<template>
<div>
<multiselect
v-model="items"
:options="filteredList"
:multiple="multiple"
:close-on-select="multiple ? false : true"
:show-labels="false"
:placeholder="placeholder"
track-by="id"
:label="label"
#input="inputChanged"
:internal-search="false"
#search-change="searchItems"
>
<template slot="clear" slot-scope="props">
<div class="multiselect__clear" v-if="items.length" #mousedown.prevent.stop="clearAll(props.search)"></div>
</template>
</multiselect>
</div>
</template>
<script>
export default {
model: {
prop: 'parentItems',
event: 'change',
},
props: ['multiple', 'list', 'placeholder', 'label', 'parentItems'],
data() {
return {
items: this.parentItems,
filteredList: this.list,
}
},
methods: {
searchItems(query) {
let q = latinize(query.toLowerCase().replace(/\s/g,''))
this.filteredList = this.list.filter(li => latinize(li[this.label].toLowerCase().replace(/\s/g,'')).includes(q))
},
inputChanged() {
this.$emit('change', this.items);
},
clearAll() {
this.items = this.multiple ? [] : null
},
},
}
</script>
everything works as desired, except the X to clear selection is never displayed.
i found the clear element in console, it has width of 255 and height of 0. i tried to put X between the div tags, like this
<template slot="clear" slot-scope="props">
<div class="multiselect__clear" v-if="items.length"
#mousedown.prevent.stop="clearAll(props.search)"
>
X
</div>
</template>
but it would display above the select input field. also changing the height attribute in dev console just made clear space above input field.
what am i missing?
vue-multiselect does nothing special with the clear slot other than render it before the input tags. It leaves the styling and behavior/implementation entirely up to the end user.
In addition, the example from the docs you linked poorly implements the slot, as the provided slot has no contents, so the div won't be visible or clickable, making it effectively useless. Not to mention, it uses the obsolete (pre-2.6) slot syntax of Vue, which would cause warnings on the browser console if using the development build of Vue.
Solution
The clear slot should look like this:
<multiselect v-model="value"
:options="options"
multiple
taggable
#tag="addTag">
<template v-slot:clear>
<button v-if="value.length" class="multiselect__clear" #click="clearSelectedTags">
Ⓧ Clear selection
</button>
</template>
</multiselect>
demo
Thanks to tony19 I went and inspected the part of documentation I mentioned in the question.
I found out that they use different code for the example, so to attain desired effect, I need to add following code to my css.
.multiselect__clear {
position: absolute;
right: 41px;
height: 40px;
width: 40px;
display: block;
cursor: pointer;
/*z-index: 2;*/
}
.multiselect__clear:after, .multiselect__clear:before {
content: "";
display: block;
position: absolute;
width: 3px;
height: 16px;
background: #aaa;
top: 12px;
right: 4px;
cursor: pointer;
}
.multiselect__clear:before {
transform: rotate(45deg);
}
.multiselect__clear:after {
transform: rotate(-45deg);
}
I am trying to change the color of a paper-button that is created dynamically through the <template is="dom-repeat"> element. Let's say I have this piece of code:
<template is="dom-repeat" items="{{items}}" as="item">
Itemnumber: [[item.number]] is [[item.height]].
<paper-button on-click="setHigh">High</paper-button>
<paper-button on-click="setLow">Low</paper-button>
</template>
Now when I click the button "High" for example, I want the background-color of that button to change and I want to background-color of the "Low" button to change as well. The Array items is stored locally and I have been able to do something similar to this using this code:
<template is="dom-repeat" items="{{items}}" as="item">
Itemnumber [[item.number]] is [[item.height]].
<template is="dom-if" if="[[isHigh(item)]]">
<paper-button on-click="setHigh" class="active">High</paper-button>
<paper-button on-click="setLow">Low</paper-button>
</template>
<template is="dom-if" if="[[!isHigh(item)]]">
<paper-button on-click="setHigh">High</paper-button>
<paper-button on-click="setLow" class="active">Low</paper-button>
</template>
</template>
Now every Item that returns isHigh(item) as true will be part of class active (which I use to style the background-color), and false will not be part of that class. This works when I first load the page, however when I press the buttons and the Items array changes, I have to first reload the page for the styles to take effect. The attribute item.height DOES update immediately.
I would suggest adding a container around the two buttons on which you add a class which colors the buttons. Doing this with css is a lot lighter for your application, since it doesn't need to call getHigh when the buttons are pressed.
<template is="dom-repeat" items="{{items}}" as="item">
<div class="button-container">
Itemnumber [[item.number]] is [[item.height]].
<paper-button on-click="setHigh" class="high">High</paper-button>
<paper-button on-click="setLow" class="low">Low</paper-button>
</div>
</template>
Then make the functions add and remove a class on the div around them
setHigh(e) {
e.currentTarget.classList.add("high")
}
setLow(e) {
e.currentTarget.classList.remove("high")
}
And in your css:
.button-container .high {
background-color: green;
}
.button-container .low {
background-color: red;
}
/* When high is pressed */
.button-container.high .high {
background-color: red;
}
.button-container.high .low {
background-color: green;
}
I'm trying to use the slot API in this example:
<tabs-s>
<tab-c>
<tab-c>
</tabs>
where tabs-s is the component that wraps other components.Inside it I'm using the tag to render its dom but if I want the assigned nodes I also get the whitespaces (text nodes).
Is there a manner to avoid getting the text nodes when calling assignedNodes() method? This was not happening in Polymer 1.x
Thanks
Let say you want to create a featured section to present new items
the section needs to have some basic information and change colors.
The element will take the title, count and class from his parent
<featured-section class="blue">
<span slot="count">3</span>
<h1 slot="title">The title of the element go here</h1>
</featured-section>
Inside the element featured-section
<dom-module id="featured-section">
<template>
<section>
<div class="vertical-section-container">
<div class="circle-container">
<div class="circle">
<slot name="count"></slot>
</div>
</div>
<slot name="title"></slot>
<feature-box></feature-box>
<feature-grid></feature-grid>
</div>
</section>
</template>
But who is in charge of the class detail? The element itself featured-section
<custom-style>
<style include="shared-styles">
:host {
display: block;
background-color: var(--my-section-color);
}
:host(.blue) {
--my-section-color: #03A9F4;
}
:host(.green) {
--my-section-color: #8BC34A;
}
:host(.pink) {
--my-section-color: #FF6EB6;
}
::slotted(h1) {
color: #fff;
padding-bottom: 1.5em;
line-height: 48px;
}
</style>
</custom-style>