I need to change the padding of my dividers to 0, but can't access them even though they are list items
https://codepen.io/majesticpotatoe-the-bashful/pen/KKwXwBw
.v-breadcrumbs li {
padding: 0px;
}
This CSS above didn't do the trick
This CSS works:
.v-breadcrumbs__divider {
padding: 0 !important;
}
updated codepen
Related
I want to increase the size of whole vuetify v-switch component,as it is not listed in v-switch api
i tried to change the sass variables but it change the entire switches that the application have
click to see the current size
When you are changing SASS variables, it must affect all the elements in the application.
To change the only one v-switch, you can write something like:
<template>
<v-switch
v-model="switch1"
class="custom-switch"
:label="`Switch 1: ${switch1.toString()}`"
></v-switch>
</template>
<style>
.v-input--switch__track {
border-radius: 15px;
width: 48px;
height: 29px;
top: -2px;
}
.v-input--switch__thumb {
left: 6px;
}
.custom-switch .v-input__slot .v-label {
left: 6px !important
}
.v-input--selection-controls__ripple {
height: 0;
width: 0
}
</style>
CodePen demo is here.
I am using vue carousel and I want to change tge color of the pagination dots' borders. I don't know how and if it's even possible. I looked up the style of this buttons in dev tools and tried to rewrite the style. But nothing works
vue-carousel has two properties that control the color of the dots:
paginationColor - (default: #000000) The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationActiveColor - (default: #efefef) The fill color of pagination dots. Any valid CSS color is accepted.
For example:
<carousel paginationColor="gray" paginationActiveColor="red">
demo
Try this in your global CSS
.v-carousel__controls__item{
color: #FFC400 !important;
}
There is a work-around that can give you full control over the dots and their appearance with pure CSS, using pseudo-elements. Make the existing dots transparent, and use ::after to create new dots that you can style as you like.
.VueCarousel-dot {
position: relative;
background-color: transparent !important;
&::after {
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
border: 2px solid black;
background-color: gray;
position: absolute;
top: 10px;
left: 10px;
}
&--active::after {
background-color: red;
}
}
This is not an ideal solution, however the provided options for styling dots in Vue Carousel are quite limited, and if you have a strict style guide to follow, this solution can give you the control you need.
when changing the direction of Vuexy from ltr to rtl. bootstrap-vue data picker style will fail as illustrated in attachment image
.custom-timePicker {
width: max-content;
right: 0px !important;
}
[dir=rtl] .custom-timePicker {
right: 0px !important;
}
add to style.scss
I just want to change the size of Dojo Filtering Select design element via CSS.
I tried manual or CSS File. It did not work.
<xe:djFilteringSelect id="djselect1" value="#{document1.Language}" style="min-height: 8px;height:8.px;"></xe:djFilteringSelect>
Any suggestion is important
Cumhur Ata
You just need to override the dijitTextBox CSS class.
You might need to use CSS specificity to make sure that the CSS is picked up (instead of using !important).
Here's a simple example:
.dijitTextBox {
width: 40px;
height: 8px;
}
As you are using Bootstrap theme you need to adjust the arrow button too.
This works for me:
.dbootstrap .dijitTextBox {
height: 24px;
}
.dbootstrap .dijitComboBox .dijitButtonNode.dijitArrowButton {
height: 22px;
}
.xsp.dbootstrap .dijitInputContainer {
padding-top: 0px;
}
.dbootstrap .dijitComboBox input.dijitArrowButtonInner {
margin-top: -3px;
margin-left: -5px;
}
.dbootstrap .dijitMenuItem {
padding: 0px 10px;
}
I'm trying to achieve something very simple with WinJS. I want the items in a listView to occupy the full height of the viewport.
I can achieve this by overriding the default styles for the listView like this:
.win-itemscontainer {
width: 100% !important;
height: calc(100vh - 1px) !important;
}
.win-horizontal .win-gridlayout .win-container {
height: calc(20% - 1px);
margin: 0 0 1px 1px;
outline: none;
}
.win-listview {
height: 100vh;
margin: 0;
padding: 0;
}
.win-listview .item {
width: 250px;
}
This works fine and renders 5 rows of list items. The list then scrolls if the number of items exceeds the containers width.
However, there are some very odd behaviours occurring. If I scroll to the very end of the listView, something causes the scroll position to jump back making the last row in the listView unattainable because the jump prevents me from ever reaching it.
Is there a better way of achieving what I'm after or is there a way to fix what I've implemented?
I was never able to sufficiently answer this so I switched from a listView to a repeater which gave me greater control over the markup and CSS.