We Keep Coding

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.

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.

Nothing can go in between custom tags - <myTag_vue> ... </> in vue js?

The structure of my vue app is this:
root.vue:
<template>
<header-yo> <h1> visible? or not? </h1> </header-yo> //content btw tags is invisible
<footer> </footer>
</template>
<script>
import Footer from "./components/footer";
import Header from "./components/header";
export default {
components: {
"footer": Footer,
"header-yo": Header // header-yo is "custom tag" now!
}
};
</script>
<style> ...</style>
header:
<template>
<h1>rrrrr</h1> //this is visible
</template>
<script> </script>
<style scoped> </style>
When we create this custom tag "" - it only serves as declarator of a component?
Nothing can be added in btw custom tags?
Because I can only see on the webpage what's inside my actual header.vue file, not inside my own custom tags. Is this the vue-idiomatic style?
the root.vue that has all other components is only there to put things together, and nothing can go in btw custom tags - they only show what components\other vue files are there? If I want to add something in header- it should go in corresponding separate header.vue file?
The js fiddle is here

What your trying to do is comparable to AngularJS transclusion mechanism. You need to actually tell vuejs where the content will be inserted in the template by using a <slot></slot> element:
<template>
<h1>rrrrr</h1> // this is visible
<slot></slot> // this is where "<h1> visible? or not? </h1>" would be inserted
</template>
You can find more about this in vuejs component guide or the dedicated Slot documentation page.