Is it possible to remove dropdown arrow from md-select component of Vue Material?
i.e.to make it from this:
To this:
Suppose the class of your md-select is md1, then the arrow is a descendant of md-select you can do the following in your css file:
md1 .md-select-icon {
display: none;
// rest of your style below
}
Related
So I've looked through stackoverflow and the documentation in Vue 3 but can't quite find what I'm looking for.
I'm trying to find a way to target a named slot, penetrate the scoped element within that slot, and override one of its children's styles. I assume I need the ::slotted selector and the :deep selector for this mission. Does anyone know how to do this?
Here is an example of the situation I am trying to solve for (LayoutContainer Component):
<section>
<slot name="text"></slot>
<slot></slot>
<slot name="sidebar"></slot>
</section>
the component that will go into the "text" slot (Eyebrow Component):
<section class="eyebrow-container">
<h1>{{title}}</h1>
<h6>{{description"}}</h6>
</section>
a completed view of the code on a page component:
<LayoutContainer>
<template #text>
<Eyebrow :title='test' :description="this is a description"></Eyebrow>
</template>
<PageBody></PageBody>
<template #sidebar>
<PageSideBar></PageSideBar>
</template>
</LayoutContainer>
Solutions I have tried in SCSS with no success:
::slotted(h6) { color: red }
::slotted(text){
:deep(.eyebrow-container) {
h6 { color: red; }
}
}
::slotted(text) {
:deep(h6) { color: red; }
}
and a few others I have forgotten at this point.
Does anyone have any ideas on how to get to the h6 tag inside of the Eyebrow Component from the Page Component's SCSS?
The slot content is owned by the parent passing them in.
So you don't need to use :slotted. You can simply use the :deep selector
<style scoped>
:deep(h6) {
color: red;
}
</style>
See it live
If you are wondering how to use :slotted then in your case it would be used in LayoutContainer component trying to style what the parent component passes in.
Scoped styling and styling child components from a parent don't work as you might think if you use multi-root node components.
So if you use mutli-root node component and :deep doesn't work, See my other answer
I'm using scoped style for most of my components to not interfere with other components.
Some of my views/components need body { overflow: hidden; }, but others don't.
I can't use
<style scoped>
body {
overflow: hidden;
}
...
</style>
How can i apply this style when specific components are loaded? (i am using vue router if that helps)
You may send a prop to your component like described in here: https://v2.vuejs.org/v2/guide/components-props.html
Let's call you prop isOverflowHidden, and create .hidden class in your css.
After that, you can add your wrapper element (first tag in component) :class="{ hidden: isOverflowHidden }"
Or you can move it to a method.
If you want you can use this this action for inline-styling.
<div :style="{ overflow: (isOverflowHidden ? 'hidden' : '')}"></div>
You can read extended information in here: https://v2.vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles
I'm trying to keep the v-select menu attached to the v-select but in the meantime also have it over the dialog when open, in the bellow codepen you can see that the Age dropdown is hidden inside its container and I can't figure out how to make it visible
I have this hierarchy of v-dialog -> v-stepper -> v-select
<v-select
attach
:items="['0-17', '18-29', '30-54', '54+', '60', '77']"
label="Age*"
required
></v-select>
https://codepen.io/amaieras/pen/VwWRzpL?editors=101
P.S. I don't want to remove the attach, the client wants it to be glued to the v-select :)
Stepper component in vuetify has overflow: hidden style by default. You can change this property to visible in CSS:
.v-stepper,
.v-stepper__wrapper,
.v-stepper__items {
overflow: visible;
}
You can visit this codepen too.
Because Modal has a fixed size.
And your v-select is almost at the bottom of modal.
If you move that field to top or middle, it will work for you.
Or you can make modal height larger than now.
Please add this css.
.v-menu__content .theme--light .menuable__content__active {
position: initial !important;
}
this will work for you.
I need to use v-carousel without the bottom control panel. It's useless when number of images more than 20. Is it possible to hide it?
You just need to add the hide-delimiters prop. You can find all carousel props here: VuetifyJS API
<v-carousel hide-delimiters>
[...]
You can do that with css:
.carousel .carousel__controls { display: none; }
I have two pages:
search.php that contains a vuejs component called search.vue
person.php that contains another component called person.vue.
In search.vue, I have links to person.php.
How come the styles set in the component search.vue also affect the DOM in person.vue?
The style tag in my search.vue component:
<style>
.row {
background-color: red;
}
</style>
There is nowhere I connect these two views except through the href link to open the person.php page.
Styles defined in the style tag of a Vue single-file-component will be compiled to a singular file, affecting all components.
But, you can specify a scoped attribute on the component's style tag:
<style scoped>
.row {
background-color: red;
}
</style>
From the Documentation:
The optional scoped attribute automatically scopes this CSS to your component by adding a unique attribute (such as data-v-21e5b78) to elements and compiling .list-container:hover to something like .list-container[data-v-21e5b78]:hover.
Note that the scoped attribute is a Vue feature for single-file-components, different from the general scoped style tag attribute, which has a similar effect but is currently only supported by Firefox.