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
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
The default style for the p tag on my page has some bottom margin. My component uses p tags, and accordingly, the p tags in my component text show the corresponding bottom margin. How can I override/define new css style for the p tags in my component. I define my component like this:
Vue.component ('activity-component', {
props: {
customer_id:{},
is_admin:{},
isAdmin:{},
isKitsActionplan:{},
....
template:
`<div
class="row msDashboard-box"
style="cursor:default;padding-top:12px;
padding-bottom:12px;"
>
...
<p> ... </p>
});
Maybe u can try this approach,
Pass a variable with the class name to the component
<my-component v-bind:class="variable with class name"></my-component>
Then apply a rule to all p elements inside it, something like this i guess:
.test p{
your styles
}
U can see more here: vue api class and style bindings
I dont know for sure if this was what you wanted, but i gave it a shot :)
You have several options - choose your own adventure:
Use a global utility style
Somewhere globally, define a utility class like:
.u-margin-reset {
margin: 0;
}
Then in your template:
<p class="u-margin-reset">hello</p>
Use scoped CSS
If you are using single file components, you can use scoped css:
<template>
<p class="special-p">hello</p>
</template>
<style scoped>
.special-p {
margin: 0;
}
</style>
Use inline styles
Vue.component('activity-component', {
template: `<p style="margin:0;"></p>`,
});
or
Vue.component('activity-component', {
computed: {
myStyle() {
return {
margin: 0,
};
},
},
template: `<p :style="myStyle"></p>`,
});
As an aside, I'd recommend using a CSS reset that globally resets the margins of all elements to 0. Then each component should set the margins as needed for its child elements/components. This may not be reasonable if you already have a large codebase, however.
Assuming I am using a plugin that generates html at runtime where I cannot edit the CSS or JS code, leaving me with the only option of overriding certain CSS in particular classes. For instance, in such case I'd often do:
.video-player{
max-height: 500px !important;
}
In case such styling must be handled conditionally based on the props passes to the component, for instance:
<videoPlayer :goSmall="anotherColumn != null"></videoPlayer>
since the CSS in the videoPlayer components must go in the Style tag:
<style scoped>
.video-player{
max-height: 500px !important;
}
</style>
how can I render it conditionally?
It is such a bad idea to append it to the DOM using lifecyle hooks, so please do not suggest anything like that.
Why not apply a specific class to the component instead of passing a prop?
<videoPlayer :class="{ small: anotherColumn != null }"></videoPlayer>
And the css
<style scoped>
.video-player.small {
max-height: 500px !important;
}
</style>
If you are not okay with dynamically applying CSS using lifecycle hooks. You can always box your components. Make two components for your videoPlayer, we'll call them videoPlayerOriginal and videoPlayerSmall.
//videoPlayerOriginal.vue
<videoPlayer></videoPlayer>
Add your css in videoPlayerSmall.vue
//videoPlayerOriginal.vue
<videoPlayer></videoPlayer>
<style scoped>
.video-player{
max-height: 500px !important;
}
</style>
Now render either one of them conditionally.
I am using Vuetify and Electron to make an app to help me with certain tasks at my job. I have disable the browserWindow frame and made my header the draggable area with a button to close the window. I am using the electron vuetify template
vue init vuetifyjs/electron
My problem is the scrollbar reaches all the way to the top but I would like it below my fixed header.
I have tried playing with overflow properties on the html, body, app div, and content div tags but i have not been successful.
How would I accomplish this?
This is purely a CSS question really as you can see this behaviour in the browser too with similar layouts. The easiest way to fix this is using a flex layout:
HTML:
<div class="container">
<div class="titlebar"></div>
<div class="content">
<h1>So much content we scroll</h1>
<h1>So much content we scroll</h1>
<!-- etc -->
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.titlebar {
background-color: blue;
height: 35px;
flex-shrink: 0;
}
.content {
flex-grow: 1;
overflow-x: auto;
}
Check out this out in this CodePen
I'd like to offer a Vuetify specific answer for this question, this should apply whether or not Electron is involved.
Vuetify's default styles make this a bit more difficult than a simple CSS solution can give you, especially when the layout gets more complex.
For this example I'm using the complex layout from Vuetify's pre-defined themes here
Vuetify ships with an overflow-y: scroll on the html element so the first step is adding an override for this.
html {
overflow: hidden;
}
This will get rid of the bar on the right side that spans the whole height of the app.
Next you will want to set your v-content area as the scrollable area. There are a few gotchas to watch out for when you're setting this area:
Display flex is already declared
Vuetify sets padding in the style attribute so you'll need to override depending on your case
You'll need a margin the height of your header(only matters if you're changing header height from 64px)
You'll need to remove the header height from the height of the content container using calc(Same as above)
If you have a nav drawer on the right side you'll need to bind a class to take care of this.
My CSS for v-content looks like this, you will need an important to override the padding since it is set by Vuetify through style binding:
main.v-content {
width: 100vw;
height: calc(100vh - 64px);
flex-direction: column;
overflow: scroll;
margin-top: 64px;
padding-top: 0 !important;
}
I also have a class bound to the state of the temporary right drawer on the v-content tag in the template, this makes sure that the scroll bar doesn't disappear underneath the right nav drawer when it's open:
<v-content :class="{ draweropen: drawerRight }">
And the CSS for that bound class, once again you'll need an important to remove the default right padding Vuetify puts on v-content when the drawer is open:
.draweropen {
width: calc(100vw - 300px) !important;
padding-right: 0 !important;
}
You can optionally set the flex-direction to column-reverse if your content is bottom loaded like a chat which is what I'm doing in this CodePen Example
I built a little component that wraps the v-main and moves the scrollbar to the main container instead of the default (the entire html).
Simply replace v-main with this and you're done.
<template>
<v-main class="my-main">
<div class="my-main__scroll-container">
<slot />
</div>
</v-main>
</template>
<script>
export default {
mounted: function() {
let elHtml = document.getElementsByTagName('html')[0]
elHtml.style.overflowY = 'hidden'
},
destroyed: function() {
let elHtml = document.getElementsByTagName('html')[0]
elHtml.style.overflowY = null
},
}
</script>
<style>
.my-main
height: 100vh
.my-main__scroll-container
height: 100%
overflow: auto
</style>
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.