We Keep Coding

CSS is breaking in vuejs on reload of page

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>

How to changing a style in node_modules in its own vue <style> tags

I want to make changes to the css file inside the multiselect package. But I don't want to change it from within node_modules, all I want is to write it between style tags of my page that I created with vue. I want to change the white-space property But I can't see any change when I write as below. Can you help with this?
Default.css (Node_modules)
.multiselect-tag {
align-items: center;
background: var(--ms-tag-bg,#10b981);
border-radius: var(--ms-tag-radius,4px);
color: var(--ms-tag-color,#fff);
white-space: nowrap;
}
My template
<template>
<div class="filters">
<Multiselect
class="multiselect"
v-model="value"
mode="tags"
placeholder="Customer"
:close-on-select="false"
:filter-results="false"
/>
</div>
</template>
My CSS code
<style scoped>
.multiselect {
--ms-tag-bg: #dbeafe;
--ms-tag-color: #2563eb;
--ms-radius: 0.475rem;
--ms-dropdown-radius: 0.475rem;
--ms-spinner-color: #2563eb;
--ms-tag-ml: 0.85rem;
}
.multiselect,
.multiselect-tag {
white-space: normal !important;
}
</style>

I think you need to remove the scoped from your <style scoped> style tag, as this will let the styles only apply for the current component (and the root node of the child). But you want to style an element the Multiselect component.
<style>
.multiselect {
--ms-tag-bg: #dbeafe;
--ms-tag-color: #2563eb;
--ms-radius: 0.475rem;
--ms-dropdown-radius: 0.475rem;
--ms-spinner-color: #2563eb;
--ms-tag-ml: 0.85rem;
}
.multiselect,
.multiselect-tag {
white-space: normal !important;
}
</style>
Beware that removing the scoped will make the styles apply globally, so all Multiselect instances will be affected. If this is not what you need, you might try to use deep selectors.
See vue style docs.
Hope this helps.

So if I have got you right, you want to change / overwrite your default CSS from your stylesheet with new values in your hmtl.
To do this, simply insert "style" within your tag.
For example:
<Multiselect class="multiselect" style="color: black;"/>

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.

Unable to override css class of Awesome-slider-react

I am using Awesome-Slider-React to build a small web-app. I am facing an issue in styling my content. Awesome-Slider gives default styling to all the div defined inside <AwesomeSlider> which reduces the div you have access to very small size as seen here. I want to be able to place my components in the full screen. I tried overriding the class awssld__content but this only works if I supply !important in App.css. What is the best way for me to have access to the div which spans the whole viewport.
JSX
<AwesomeSlider cssModule={AwesomeSliderStyles}>
<div className = "main" style = {{ backgroundColor: "white" }}> <About/></div>
<div className = "main" style = {{ backgroundColor: "white"}} >
<BarChart
data={data}
title={"check"}
color="#70CAD1"
/>
<LineChart
data={data1}
title={"check"}
color="#70CAD1"
/>
</div>
<div>
<Col lg="8" md="12" sm="12" className="mb-4">
<UsersOverview />
</Col>
</div>
</AwesomeSlider>
App.css
.main {
display: grid;
justify-content: left;
}
.awssld__content {
align-items: left ;
justify-content: left !important;
}
SCSS file from Awesome-Slider. The complete code for the SCSS file can be seen here.
&__content {
#extend %fill-parent;
background-color: var(--content-background-color);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
> img,
> video {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
&--enter {
// On content enter
}
&--exit {
// On content exit
}
}

I had the same challenge.
One way is to refer to the .scss (SASS) stylesheet instead of the .css in the /dist folder. The latest is the uglified build version of the SASS stylesheets.
//import 'react-awesome-slider/dist/styles.css';
import 'react-awesome-slider/src/styles.js';
You also need to configure a sass-loader in your React app (install node-sass and sass-loader).
The downside of this, I guess, is that the SASS file gets tranpsiled reel-time. This probably costs performance ... so not sure if this is the best practise for production.
It should also be possible to transpile the customized SASS file, so the /DIST version will be updated. I tried this myself, but didn't manage to get this to work. Maybe someone knows how to do this?
One last thing: I use webpack for building and loading my react app. There was an error due to a conflict in the versions of webpack (4.41.5) and sass-loader (8.x). The error was TypeError: this.getResolve .... The fix I found was downgrading sass-loader to 7.3.1.
Good luck

How do I implement a dynamic theme in an ionic app?

I am making an ionic application and I have a view that allows users to change the color scheme of the app. How would I implement this? If I use ng-class on every element in the app to dynamically change the colors it might lead to overloading the main UI thread since each ng-class will add a new watcher and there are a lot of pages and elements in this app.

Maybe an ng-class on only the body and using inheritence would do the trick !
HTML
<body ng-class="vm.color">
<div class="title">
</div>
</body>
CSS
.red .title {
background: red;
}
.blue .title {
background: red;
}