Is it possible to reduce the height of the v-select in Vuetify ?
I don't understand why this elements are so big / fat...
My code is :
<template>
<div>
<v-select
outline
dense
v-model="filtresActivites"
:items="activitesGroupees"
item-text="activiteNomComplet"
item-value="activiteCode"
multiple
>
<template v-slot:selection="{ item, index }">
<span v-if="index === 0" class="deep-orange--text">{{ filtresActivites.length }} activités</span>
</template>
</v-select>
</div>
</template>
"You can add height property to your v-select like this:" : it dosn't work
I added .v-select__selections { min-height: 30px } in the style of the component and it dosn't work.
You can add height property to your v-select like this:
<v-select
:items="items"
height=50
></v-select>
If you want to change the css property of v-select, you can do so by adding this class
.v-select__selections {
min-height: 30px
}
The min-height is 42px by default
It is also hard to understand your problem when we cannot see your code
You don't have to use outline style in v-select. Remove it.
Image example from vuetify:
Related
I'd like to increase the height of the Vuetify v-autocomplete, which is fixed at 304px (might be a calculated value, YMMV).
<v-autocomplete
class="flex-grow-0 ml-16 mr-6 largecontent"
prepend-inner-icon="mdi-magnify"
v-model="select"
:items="items"
item-text="name"
item-value="id"
:search-input.sync="search"
hide-no-data
label="Search anything (press /)"
>
<template #item="{ item }">
<v-list-item to="item.route">
<v-list-item-content>
<v-list-item-title v-text="item.name"/>
<div
v-if="item.desc"
v-html="item.desc"
/>
</v-list-item-content>
</v-list-item>
</template>
<v-autocomplete/>
These both work, but would apply the style to ALL v-autocomplete, which we don't want:
<style>
.v-autocomplete__content {
max-height: 600px !important;
}
</style>
<style>
.v_menu__content {
max-height: 600px !important;
}
</style>
So, I'd like to either scope it
<style scoped>
.v-autocomplete__content {
max-height: 600px !important;
}
</style>
Or add an entry to my global css file, something like:
.largecontent.v-autocomplete__content {
max-height: 600px !important;
}
But nothing seem to work, also tried the Vuetify deep selectors, but they seem to only work when there's a parent-child hierarchy, which is not the case here.
There is a menu-props property, that you can pass to v-autocomplete in order to customize its dropdown menu (including max-height).
<v-autocomplete :menu-props="{ maxHeight: 500 }">...
Did you tried put the lang=scss and use ::v-deep?
Maybe "deep" helps you to change the style in the way you want
In Ionic, the ion-title component has the content encapsulated in an extra div within its shadow-dom.
This div has the class .toolbar-title set. How can i select this div via scss-selector to change its overflow behavior?
I tried:
.toolbar-title { ... }
ion-title .toolbar-title
ion-title::shadow .toolbar-title { ... }
ion-title::shadow(div) { ... }
and a lot other combinations including :host & ::ng-deep selectors.
And, yes i know , ::shadow and ng-deep is deprectaded.
I also know that ionic has introduced css-variables for this purposes, but unfortunatley not for the overflow attribute.
THX in advance!
The concept of shadowDOM is you can't touch its content with CSS from the outside.
It is an open shadowDOM, so you can change it with JavaScript.
document.querySelector("ion-title")
.shadowRoot
.querySelector(".toolbar-title")
.style
.overflow = "initial";
Ionic v6 allows you to target and modify shadowDOM contents with CSS. See https://ionicframework.com/docs/theming/css-shadow-parts
However, the element you want to select inside the shadowDOM needs to expose a part attribute. For instance the ion-select element:
<ion-select>
#shadow-root
<div part="placeholder" class="select-text select-placeholder"></div>
<div part="icon" class="select-icon"></div>
</ion-select>
You can select the placeholder element with:
ion-select::part(placeholder) {
color: blue;
opacity: 1;
}
Unfortunately, the ion-title element does not expose any shadow parts. You need to wrap the contents of ion-title in a container to be able to modify them:
<ion-title>
<div class="content">
<img src="..." />
Hello World!
</div>
</ion-title>
CSS:
.content {
display: flex;
align-items: center;
}
StackBlitz example: https://stackblitz.com/edit/ionic-title-modification-8a1qst
Hello I am trying to create scrollable content in card with flex util classes and components of Vuetify but I am unsuccessful. He is my last version of code which I tried:
https://codesandbox.io/embed/sharp-kilby-g3e4t?fontsize=14&hidenavigation=1&theme=dark
This is my expectation is this:
I found some samples with pure flex but I am not able did it with Vuetify? Can you help me edit codesandbox to make it working? Thank you.
Uses the component=v-virtual-scroll built in Vuetify will be one solution.
for example:
<v-card class="flex-grow-0">
<v-virtual-scroll
:items="Array.from({length: 100}).map((_, index) => index)"
:item-height="50"
height="300"
>
<template v-slot="{ item }">
<v-list-item>
<v-list-item-content>
<v-list-item-title>Item {{ item }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-virtual-scroll>
</v-card>
Updated CodeSandBox
This question is much related to CSS than Vuetify, so let me explain you how you can fix it. Say that your markups render in the browser like below html, either style v-card__text or add your custom class my-list, if you are using v-card__text to style then make sure to add scoped to style tag in your component else this will effect entire project.
<div class="v-card v-sheet theme--light">
<div class="v-card__title">You Title goes here</div>
<div class="v-card__text my-list">
<ul>
<li>Text</li>
...
</ul>
</div>
</div>
<style scoped>
.my-list {
// For eg. here 200px is MainNavBar + TitleBar and some padding/margins
// keep on increasing height if you have more items placed above the v-card
height: calc(100vh - 200px);
overflow-y: auto;
}
</style>
You can set the height to the v-list then make it scrollable using overflow-y: scroll;
<!-- Set height to your `<v-list>` and add `overflow-y: scroll` -->
<v-list style="height: 250px; overflow-y: scroll">
<v-list-item-group color="primary">
<v-list-item v-for="(n) in 100" :key="n">
<v-list-item-content>
<v-list-item-title>Item {{ n }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
I've edited your code and here is a working example at codesandbox.
Here is a sample output of what you want based on your sketch.
I have a textarea and I found that it has top margin.
like this..
this is my code:
<v-flex d-flex xs12>
<v-textarea
v-model="test"
outline
type="text"
color="primary"
v-validate="{required: true}"
data-vv-name="test"
:error-messages="errors.collect('test')"
> </v-textarea>
</v-flex>
I tried adding class="mt-0" to v-textarea but it did not work.
Does anyone know how to remove and why I have this top margin?
I am using version 1.5.x
Thanks!!
Not the best practice but you can inspect elements and find which class adds the margin.
Then add custom class on textarea.
.your-class >>> .textarea-class-that-you-found {
margin-top: 0
}
I need to set a style for entire div but it doesn't work for child components:
<div class=“myClass” [ngStyle]="{'cursor': 'not-allowed'}">
<button class=“myButton”>
OK
</button>
</div>
How can I do that? And same for this case:
<div class=“myClass” [ngStyle]="{'cursor': 'not-allowed'}">
<button class=“myButton” [ngStyle]="{'cursor': 'default'}">
OK
</button>
</div>
Edit
In your first example, the problem is just that the browser's default CSS style for the button is more specific than your div's not-allowed cursor. If you want the not-allowed cursor to apply to both div and child elements, you can apply a notAllowed class to your div and have a rule like this
component.css
.notAllowed, .notAllowed *
{
cursor: not-allowed;
}
Now, if you want to be able to change the cursor dynamically, depending on some condition, just add the class dynamically by binding it to the condition variable
component.html
<div class="myClass" [class.notAllowed]="notAllowed ">
<button class="myButton">
OK
</button>
</div>
component.ts
public notAllowed = true;
I created a stackblitz for this
https://stackblitz.com/edit/angular-5z9ru4?file=app%2Fapp.component.html
Initial answer
Why don't you set it in your css?
myClass, myClass>*{ cursor: not-allowed;}
Or using
<div [style.cursor]="'not-allowed'"