I am building an in-app walkthrough with Vuetify. And I need to be able to define the position of many dialogs on the same page. I am able to custom position one dialog with this CSS overriding the default:
>>> .v-dialog {
position: absolute !important;
bottom: 0px !important;
right: 45px !important;
}
And I've tried to use custom classes, with the same css, but they won't work. I'm having to redefine the built in class, and so it will end up placing ALL the dialogs in the same spot which isn't what I want.
Related
I use Vue-Editor.
<vue-editor id="editor" ref="editor" v-model="content" :use-custom-image-handler="true" #image-added ="added" #image-removed ="deleted" :key="componentKey"/>
On mobile devices, the icons are to small. I like to increase the icons size on mobile devices, but on medium devices, I like to keep the default size.
If I do it in this way, the size changes for all pages not only for the current page:
<style>
.p {
color: black
}
.ql-snow.ql-toolbar button {
height: 35px !important;
width: 35px !important;
}
.quillWrapper .ql-snow.ql-toolbar button svg {
width: 35px !important;
height: 35px !important;
}
</style>
If I do it with <style scoped> it doesn't pass the css to the plugin component.
How I can change the css for the plugin only in one Vue component without having a global effect?
You can keep scoped but then, you need to make a deep selector like >>> .ql-snow.ql-toolbar button to select the 3rd party library.
If using SASS, use ::v-deep, more details here.
I have a sidebar and a content inside a bootstrap row and I want to animate the toggle of the sidebar and to expand seamlessly the content container, I'm applying those transition classes:
.slide-fade-enter {
transform: translateX(100%);
position: relative;
}
.slide-fade-leave, .slide-fade-leave-to {
transform: translateX(-100%);
position: absolute;
}
but it flickers when expanding, you can see it here:
https://jsfiddle.net/kd6xpa32/16/
How can I prevent this?
Looks like you're doing some dirty stuff with flex and absolute positioning. I'd find a way to leave the sidebar as always absolutely (or relatively) positioned and figure out another way to collapse+expand it. The switch between absolute and relative is causing the rendering issue.
I am trying to give an element in my page a custom colour but all attempts are foiled by the Vuetify enforcing the important! on the component themes. I have followed the docs and tried:
v-list-item.selection(class="red--text")
and
v-list-item.selection(color="red")
then got desperate and tried
.selection {
color: red
}
and
.theme--light.v-list-item {
color: red
}
But the theme color just overrules everything by applying:
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
color: rgba(0, 0, 0, 0.87) !important;
}
What do?
You can overwrite it by adding the same rule in your App.vue:
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
color: red !important;
}
Or you can increase specificity by adding your own class to that element:
<div class="custom-list-item"></div>
...
.custom-list-item {
color: red !important;
}
Or you can specifically change color of all elements inside it, if it works for you:
.theme--light.v-list-item * {
color: red !important;
}
One might work (but not a good practice at all):
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled).selection {
color: red !important;
}
// it's more than Vuetify's style the `.selection` specificity
Edit:
The answer I gave above will not work if you use scoped style
As working around myself, and have read a comment here. I don't think change Vuetify's style in a Vuetify component is easy. Instead, by using a Vuetify's component, you should predefine the colors you'll ever use, and then you could use those colors in the components you want.
To workaround without configuring Vuetify, then you can:
Combine inline style + !important
<v-list-item style="color: red !important">Content</v-list-item>
Don't use Vuetify's component, use vanilla html (for this component) instead
I am working on location picker inside modal popup using Bootstrap3 CSS and JQuery location picker. Normally Bootstrap3's modal body size expands if content needs it.
What I need to do is to force modal to have relative to screen size because initial DOM content is empty and is filled via JQuery (Google maps initialization).
The problem is, that when setting relevant divs to have style= height:100%, body is overlapping its parent with the exact height of its sibling modal headers div.
How to prevent such behaviour and make modal body fill free space and not overlap parent component?
Here is working example
https://jsfiddle.net/qfqjq82r/
Ok after some consulting I have found the workaround/answer.
The trick was to threat divs like table and table rows. After adding some additional styling, dialog looks exactly like it should.
https://jsfiddle.net/qfqjq82r/7/
And the css:
#location-picker .modal-content {
display: table;
width: 100%;
}
#location-picker .modal-dialog{
width: 80%;
height: 85%;
}
#location-picker .modal-body{
height: 100%;
display: table-row;
width: 100%;
}
#location-picker .row{
padding:15px;
}
.full-height{
height: 100%;
}
Using Sass/Bourbon/Neat, so mind the syntax.
I have a watcher for scroll events that adds a class to an element. I have transitions set to the element to have them ease in nicely.
In Safari, desktop and mobile, it's hit or miss, but it appears to not be rendering the styles when the class changes.
This does not happen on every view and it does not happen consistently. Sometimes it will load, sometimes it won't.
Could it not be related to the transforms at all? Maybe Safari just not paying full attention to the stylesheet all the time?
I have confirmed that the class is being added in safari and this works in all other browsers.
.header-box {
position: fixed;
z-index: 99999999999999999;
top: 0;
left: 0;
width: 100%;
padding-top: 1em;
padding-bottom: 0.3em;
#include transition(All 0.5s ease);
&.nav-scroll {
border-bottom: 2px solid $color__brand-light-grey;
background-color: $color__brand-white;
}
}
There is apparently a bug in safari with having multiple transitions applied to hierarchal elements. So, if the parent had a transition, it wouldn't always render the child transitions.
The solution was to insert a new BG element that was absolutely positioned and fit the width of the parent and apply the transition to it rather than the parent itself.