CSS is breaking in vuejs on reload of page - javascript

when i reload the page the css is breaking in vuejs
I tried to change the css from my app.vue but nothing happened it is having the same problem..

To avoid this, you can use v-cloak. This directive is used to hide an element until the Vue instance has finished compiling. This is useful when dealing with dynamic content that is generated by the Vue instance, and we want to avoid any flickering or jumping of the page as the content is being loaded.
Check the official docs.
const app = Vue.createApp()
app.mount('#app')
#app[v-cloak] {
display: none
}
section {
width: 200px;
height: 200px;
background-color: lightcyan
}
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
<div id="app" v-cloak>
<section></section>
</div>

Related

My q-btn elements are not rendering appropriately in Quasar

I am new to Quasar and I don't know why, but my q-btn component buttons render as white backgrounds sometimes, ignoring the background-color I added to them, using external stylesheets.
The following are examples of this baffling problem
The above button should look like below
Another example is
The above one should look like
The buttons render properly some times, but just like that, without any clear pattern, they render with the white backgrounds.
It was suggested that the reason this was happening is because the buttons are being rendered before the external scss files are parsed. I changed the style of importing external scss files from
<template>
...
</template>
<script>
import './_custom-style.scss // initial import style
...
</script>
to
<template>
...
</template>
<script>
...
</script>
<style lang="scss" src="./_custom-style.scss"></style> // new css import style
This didn't work.
It was suggested that I use q-btn's color prop, (which is less than ideal, because I won't be able to use a custom hex color for my background), however I tried adding the color prop to it, using one of quasar's colors (in the color palette) and it still isn't rendering appropriately all the time. I don't know what else to do.
EDIT:
These are the scss file and one of the templates that use the q-btn component.
airtime {
...
&__redeem-btn {
margin-top: 1rem;
width: 80%;
padding: .5rem;
background-color: $purple-dark-3;
color: $primary-white;
font-size: 1.7rem;
}
}
<template>
<div class="airtime text-center">
<h1 class="..">Congratulations!</h1>
<p class="..">You got <strong>7</strong> questions correct</p>
<q-img
src="icons/...svg"
transition="fade"
class=".."
alt=".."
/>
<p class=".."></p>
<q-btn
class="airtime__redeem-btn"
rounded
label="Redeem"
no-caps
#click="$emit('selectNetworkProvider')"
/>
</div>
</template>
I have discovered the error. It turns out that there was a clashing style in my application
.q-btn__wrapper {
background-color: $primary-white;
}
This style overrode the background-color of the q-btn components.

How to make the v-stepper steps always visible on top of the page?

In a Nuxt.js app using Vuetify.js framework, I have a v-stepper component which, when scrolling any page down, its steps become unvisible (I put the stepper component inside pages/index.vue). I want them to remain always visible on top.
For this purpose, I think only putting the v-stepper inside a v-toolbar component can achieve the goal, but not really: no idea how to open the v-stepper component inside layouts/default.vue and close it inside pages/index.vue:
<template>
<v-app>
<v-toolbar>
<!-- open v-stepper here -->
<v-stepper>
</v-toolbar>
<v-content>
<nuxt /> <!-- closing v-stepper here does not work, -->
</v-content>
</v-app>
</template>
How to achieve this goal? (I am not asking for an implementation, just a hint/idea/alternative)
wrap your v-stepper component with a div like <div class="sticky"><v-stepper/></div>
and add the following rules to your css :
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.v-stepper__wrapper {
height: auto !important;
}

unable to set buefy modal width

I am using vuejs with bulma and buefy. I am using buefy modal and trying to set the modal width using its 'width' property. I tried to specify it in the html as well as using javascript to open the modal.
this.$modal.open({
parent: this,
component: dummyComponent,
width: 720
})
Can someone please help me out.
You also need to set style="width: auto" in your component, then the width you set when opening the modal is taken into account.
Then the js part would stay
this.$modal.open({
parent: this,
component: dummyComponent,
width: 720
})
and your component would be
<template>
<div class="modal-card" style="width: auto">
<!-- Content comes here... -->
</div>
</template>
Examples in the buefy documentation include it as well but they don't explicitly state that you need it to make setting the width work.
Actually, for me it doesn't work.
this.$modal.open({
parent: this,
component: dummyComponent,
width: 1200
})
It produces modal with 640px in width. If I set
<template>
<div class="modal-card" style="width: auto">
<!-- Content comes here... -->
</div>
</template>
It produces even narrower modal, 460px. Not sure why.
My solution was:
<style lang="stylus" scoped>
.modal-card
width: auto
#media (min-width: 1200px)
.modal-card
width: 1200px
</style>
Not a prettiest solution, but it works.
I also had to add z-index to .modal, as some parts of my html cover modal backdrop.

How to make a side panel in a component with Quasar Vue Framework 14.3

I have a working left side panel using Quasar version 14.3. Now I want to make it a component. When I use this:
<template>
<q-layout ref="layout"
:left-breakpoint=0>
<q-scroll-area slot="left" style="width: 80%; height: 100%>
<div>
<left-panel></left-panel>
</div>
</q-scroll-area>
</q-layout>
</template>
It kind of works, however:
the width gives css issues
do I really have to keep the q-scroll-area out of the component? When
I include it the side panel does not hide but is in the page and then
the actual page is below it when you scroll down.
Any suggestion to how to make a solid side panel in a component with Quasar?
You can use q-layout-drawer for creating the left panel in q-layout
<template>
<q-layout ref="layout" :left-breakpoint=0>
<q-layout-drawer v-model="flag" side="left">
<q-scroll-area slot="left" style="width: 80%; height: 100%">
<div>
<left-panel></left-panel>
</div>
</q-scroll-area>
</q-layout-drawer>
</q-layout>
</template>
Set flag true in data of Vue component.You can also open/close drawer on button click by setting flag true false

Footer template blinks even using ng-cloak in AngularJS

I'm sucessful create and display templates with some data retrieved from REST service using AngularJS but, when JSON response is still loading, the browser show the footer template at the top and, when response return the JSON data, the footer goes to the bottom.
This occurs very quickly, but the footer template blinks at the top of the page before goes to the bottom.
I've tried using the ng-cloak approach, unfortunately, the problem still happening. I put the CSS to ng-cloak as the API Reference recommend.
Here is my app code:
<body>
<div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div>
<div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div>
<div ng-view="main" ></div>
<footer class="nav" data-ng-include="'app/partials/footer.html'" ></footer>
I try put the ng-cloak on body tag, ng-view, footer, and also inside the ng-view html template. This code represents all attempts (Note: I've try to use separately and together, with ng-cloak class and not)
<body ng-cloak class="ng-cloak">
<div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div>
<div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div>
<div ng-view="main" ng-cloak class="ng-cloak"></div>
<footer class="nav" data-ng-include="'app/partials/footer.html'" ng-cloak class="ng-cloak"></footer>
Unfortunately after all these changes, the footer template still blink on top before loading is complete.
Anyone can help me to fix this?
Is any Bootstrap trick to put the footer on bottom, even when the main div is without height? I've tried use the nav-fixed-bottom tag but I dont want to have the bottom fixed on screen when the page has high height values.
Thanks!!!
Have you double checked whether you have any CSS rules that may be conflicting with the ng-cloak rule? This could happen with other styles, libraries etc.
If you have any rules that conflict, just adding display:none; may not be enough.
See Angularjs - ng-cloak/ng-show elements blink
If this is the case, the solution is to use !important to overcome this:
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
ng-cloak and/or ng-bind can't help solve this problem, because this is not a "flash of uncompiled content" problem. Those directives are meant to hide content until Angular has had a chance to compile the HTML.
The problem you are trying to solve is more like: "I'm adding stuff to the page dynamically and stuff is moving around". If you want to show the footer only after the main content is loaded, I like the solution #Alex presented in his comment.
As Alex and Mark said, ng-cloak doesn't provide any benefit in this case. However I used something that worked for me and may also help others.
Initially, I don't display the footer.
.footer {
display: none;
}
then after the Angular is done with loading the content, the footer appears.
var app = angular.module('app', [...])
.run(function($rootScope) {
$rootScope.$on('$viewContentLoaded', function(event){
$('.footer').fadeIn(500);
});
});

Categories