I am trying to use vuetify v-stepper but I want to remove the icon in v-stepper-step. How do I remove the icon in v-stepper-step? I have tried adding. I have tried doing a combination of adding edit-icon, append-icon, and even selecting it in style scoped with a property of display: none.
Code that I tried is something like this:
<v-stepper-step
:key="`${stepHeader}-step`"
:step="index + 1"
editable
class="stepper"
complete
edit-icon=""
append-icon=""
>
...
</v-stepper-step>
You can add this to your styling:
.v-stepper__step__step {
display: none
}
I have solved it. I put a color="transparent" prop in v-stepper-step
You can still inspect the icon though. For my case, it's enough.
Related
I made a navigation drawer WITHOUT borders but a thin line on the left just can't seem to go away.
I tried doing a border : none to remove any border around the component, it won't work.
I also tried inspecting the element, and the problem is a <div class="v-navigation-drawer__border"></div> so I tried removing it by calling it in the CSS but it's still there. I even added the !important propriety.
Does anyone know how to remove a border next to a v-navigation-border ?
What it looks like
You have to use a deep selector for scoped CSS to select inner elements of components.
<style scoped>
.v-navigation-drawer >>> .v-navigation-drawer__border {
display: none
}
</style>
https://vuetifyjs.com/en/api/v-navigation-drawer/#sass-navigation-drawer-border-width
According to the vuetify doc, you could set the variable #$navigation-drawer-border-width to 0
$navigation-drawer-border-width: 0
I'm using Vuetify trying to approach this textfield style. I'm using outlined textfield provided them with a simple custom style, but I can't change its label position. Is there any way I could change the label position and the "interval" where the line starts and ends?
I was trying searching in their documentation and found this session, but no luck while changing $text-field-outlined-label-position-x or $text-field-outlined-label-position-y.
edit: this is the best I could reach, which is actually the default outlined textfield with rounded borders.
Thanks in advance!
I figured it out by myself.
We can change the margins on the Vuetify classes of v-text-field to change its position. Just change it by your own margin and everything works!
.v-text-field__slot {
margin-left: 20px;
}
.v-input__slot > fieldset > legend {
margin-left: 20px;
}
I want to change carousel-item.active display property block to flex.I change it in css but when I change slider it first gives display:block than make my cude run.display:flex,I want that bootstrap doesn't give display:block than display:flex.Give only display:flex
Set your CSS like this:
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: flex;
}
The carousel-item-next and carousel-item-prev classes are temporarily assigned to your slides during the transitions, so you have to make sure they have the same display property as the active slide.
If this isn't working, what version of Bootstrap are you using? I have tested it in a JSFiddle.
In elementUI the default background-color is white ; when choosing the them:dark , it is black, but how can I customise the bg-color by myself?
I have tried to add the style property at the el-menu tag , but it didn't work
<el-menu style="{background-color: rgb(36,36,36)!important}"
I try to find the source code of the css file of el-menu tag and I try to change some setting relating to background-color, don't work either
the menu component just like
somebody told me I can code like this
<el-menu style="{backgroundColor: yello}.." but it didn't work
The class for that particular element is not modifiable, have a look:
:class="{
'el-menu--horizontal': mode === 'horizontal',
'el-menu--dark': theme === 'dark',
'el-menu--collapse': collapse
}"
So your choices are:
Wrap it in a custom <div class="my-specific-selector and target it with .my-specific-selector .el-menu
Override the CSS for the dark theme
Copy + paste contents of component into your own file, adjust accordingly, use that instead.
you can try put background color directly like this
<el-menu
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409EFF"
style="height: 61px;"
></el-menu>
Is there a way to set the background colour of a div in blueprint?
I noticed that class=error will set the colour to pink (notify/success are similar):
<div class="error">
<p>whatever</p>
</div>
But I want to know if there is a way to set the div to some arbitrary color?
EDIT: I don't actually care about error/notify/success. I just want to be able to set the color of a div in a similar way that they do, but using a color of my choice.
Time to state the obvious - why can't you just override the div.error rule with your own?
div.error { background:black; color:#fff; } .. or are you not trying to break some sort of weird convention? If so you can use a different classname.
Just... define your own CSS class and set the background and/or (for font color) color properties to color values; then set a div to have that as one of its classes?
Yes, you can easily over-ride the CSS by specifying a rule for error in your main CSS file.
That should ideally over-ride the default colors. Else, just ensure that you use a higher specificity in your rule, something like: div.container div.error { color: red; }
You can set any color on this particular div by adding an id attribute:
<div class="error" id="myblueprint">
<p>whatever</p>
</div>
Then add in your CSS file:
#myblueprint { background:blue; }