Is it possible to show the next step directly after clicking continue within the Vuetify Stepper? (or in other words: how to remove the transition slide out effect)
It doesn't look like there is any provided option to change the transition effect in the Vue component itself.
But, you can disable it by setting the transition css property to none for the .stepper-content elements.
For example, you could create a no-transition class:
.no-transition .stepper__content { transition: none; }
And then add it to the <v-stepper> component tag:
<v-stepper v-model="e1" class="no-transition">
...
</v-stepper>
Here's a codepen with a working example.
Mine worked with
.no-transition .v-stepper__content { transition: none; }
In case somebody didn’t succeed with #thanksd's answer.
This worked for me:
.v-stepper__wrapper {
transition:none !important;
}
Vuetify version 2.2.8
Remove the Vuetify stepper transition:
.v-stepper__content, .v-overlay {
transition: none !important;
}
Remove the Vuetify stepper transition only from stepper-header (which I was looking for). I added a class "stepper-body" to :
.stepper-body {
position: relative;
}
I'm working with modifying a Wordpress theme. The theme is named glare and i would like to do the following. (URL: http://tofsti.no/letsbuzz/)
Remove the background from the menu, so that only text shows. I have tried:
div.row.transparent{
visibility: hidden;
}
#navigation .nav a {
color: #fff;
font-size: 20px;
}
But the visibility:hidden; hide the menu...
What to do?
I would like to push the gallery images up (testgallery url: http://tofsti.no/letsbuzz/?galleries=test ) - a couple of px below the menu.
How to do this? I have tried:
div.row.col-listing{
top: 200px
}
Use the following CSS for the menu and it should work:
header .transparent, #navigation .nav a {
background:none;
}
Everything in your theme that has a class of .normal has a very large margin-top value (232px):
.container .normal {
margin:0; /* or add whatever value works for you */
}
question 1: Since the div contains both the text/links and the background it all disappears when visibility is "hidden".
I'm guessing there is an opacity: setting somewhere, set to something like 0.5.
Does removing the background-color value and setting the opacity to 1 work?
I know that has been asked before, but I find no clean way of overriding this CSS:
.ui-input-search:after {
content: "";
height: 18px;
left: 0.3125em;
margin-top: -9px;
opacity: 0.5;
position: absolute;
top: 50%;
width: 18px;
}
I need to leave ui-input-search on the element, but can add my own class, like:
.ui-input-search-no-pseudo:after {
content: "";
}
Question:
Is there an easy way to remove "pseudo-css" without having to overwrite the CSS line by line?
Thanks!
As far as I can tell there is no other way than to override all properties. The styles are defined on the element, they won't just disappear because of another selector that targets the element.
If you only want to remove the pseudo element from the page you can do content: none.
Added from comments below:
The difference between content: "" and content: none is that content: "" produces a pseudo-element with no content (i.e. an empty pseudo-element), whereas content: none prevents the pseudo-element from being generated at all.
Here content: ""; doesn't affect at all if you want to remove that pseudo you have to use content:none; it will remove previously added pseudo content.
content:none;
If that doesn't help you can also try :
display:none;
if still, it doesn't work then you could try the below, but I never suggest you use !important
display:none !important;
here is working jsfiddle
https://jsfiddle.net/ganeshswami99/52duu0x8/1/
I am trying to print a part of my entire html document. I am using the below css to do that.
#media print { body * {
visibility: hidden;
}
#print-area * {
visibility: visible;
}}
It is working but as visibility:hidden reserves the space, it is printing a blank page and my content. I was trying to use :not selector from css3 to set all other divs but "print-area" to display:none as below,
div:not(#print-area){ display:none; }
This will result into a print of blank page. Looks like :not selector is not working with media print. Any suggestions/solutions for this will be most welcome.
Thanks
visibility: hidden; holds the space and it is hidden only. Show use display: none; to your body.
#media print { #wrapper {
visibility/: hidden;
display: none;
}
#print-area {
visibility/: visible;
display: block;
}}
Edit you should also declare for screen
#media screen { #wrapper {
display: block;
}
use this :
:not(#print-area){ display:none; }
Change the style rule for print media to be
:not(#print-area){ display:none !important; }
It's likely that any standard css reset in play on the page is outranking this style rule.
I have the following CSS for my print style:
* {
display:none;
}
#printableArea {
display:block;
}
I expected this to hide all elements, and only show the printableArea, however everything gets hidden. In print view, all I get is a blank page.
I have it included properly in the HEAD, with media="print" on this particular stylesheet.
If an element is not displayed, then none of its children will be displayed (no matter what their display property is set to).
* matches the <html> element, so the entire document is hidden.
You need to be more selective about what you hide.
You're taking the right general approach, but you want to use visibility: hidden instead of display: none so that you can set child elements to be visible.
See Print <div id=printarea></div> only?
html body * {
display:none;
}
#printableArea {
display:block;
}
Also, you may need an !important on #printableArea, but probably not.
Answering because I found this question while searching for this
Instead of 'display: none' you can use :
* {
visibility: hidden;
margin:0; padding:0;
}
#printableArea * {
visibility: visible;
}
source : https://www.concrete5.org/community/forums/5-7-discussion/need-to-print-a-certain-div-and-ignore-everythign-else-on-the-pa
You might try popping it up on top of everything. This solved 90% of my problems, then I just had to make a .noprint class and add it to a few straggling elements.
.print_area{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 9999;
background-color: #ffffff;
}
If you want to use JavaScript, you can try this simple snippet that doesn't even require jQuery:
document.body.innerHTML=document.getElementById('printableArea').innerHTML;
make a div wrap everything after the body tag. Before the wrap div, put the visible item's div.
I had to do this to make a simple username-password page, and needed to hide everything, except the half-opaque sign-in form's background. So, after the correct credentials were typed in, the form would animate out, and the half-opaque page cover would animate out, and finally, EVERYTHING aside would show up and you could use the page normally.
There is a one-line solution:
With JQuery
var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));
Without JQuery
var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });
In both examples, set the selector variable to the selector you want. For example, div#page:hover or p.class1,p.class2
#media print {
* {
visibility: hidden;
}
/* Show element to print, and any children he has. */
.svgContainer, .svgContainer * {
visibility: initial;
}
}
Make sure any children elements are also visible. Remember that invisible elements still influence positionning of other elements in the page. In my (simple) case, I just added position: fixed; on .svgContainer (somewhere else).
Simply you can use the following code and assign "hide" class to that specific element you dont want to display on print page
<style type="text/css" media="print">
img
{
display:none;
}
.hide
{
display:none;
}
</style>
There is another clean way to achieve this:
* {
visibility: hidden;
}
#printableArea {
visibility: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
That way you're going to get only the #printableArea element in the print view and all of the other elements will be hidden.