How to remove shadow from ionic 4 ion-search bar?
i already tried no-border no-shadow but didn't achieve what i want.
<ion-searchbar
no-border>
</ion-searchbar>
ion-searchbar{
--box-shadow:none;
}
You have to force it through !important
.searchbar-input {
border: 0 !important;
box-shadow: none !important;
}
From this post
Related
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
how to make transition of background-color of ion-toolbar?
The problem is, in Ionic 4 the background-color is set by --background.
This is my NOT working .scss code:
ion-toolbar.transparent{
--background: red;
transition: 1000ms linear;
}
ion-toolbar.transparent:hover{
--background: green;
}
Please check the below codes, remove the transparent class name from the ion-toolbar, also don't use color attribute in ion-toolbar
<ion-toolbar>
<ion-title>
Ionic Title
</ion-title>
</ion-toolbar>
For style
ion-toolbar{
--background: red;
transition: 1000ms linear;
}
ion-toolbar:hover{
--background: green;
}
In elementUI, I've got a el-menu component and there is a el-submenu in it,
I can change the bg-color of el-menu-item when I hover it and I code like
.el-menu-item:hover {
background-color: black;
color:white
}
however when I do the same to the el-submenu, it failed
.el-submenu:hover{
background-color: black;
color:white;
}
I tried another way
.el-submenu.is-opened {
background-color: black;
color:white;
}
also can't work
it appears like that
and I want to change the bg-color when I hover the submenu and when it is open
I had the same problem and found that you can do the following to change the background color when hovering over a el-submenu:
.el-submenu__title:hover {
background-color: #000 !important;
}
Is there a way to remove plus icon on Choose button in primefaces component.
I tried #Darka's approach but it failed with Primefaces 3.5.10.
This worked for me.
.ui-fileupload-choose .ui-icon {
visibility: hidden !important;
}
.ui-fileupload-upload .ui-icon {
visibility: hidden !important;
}
.ui-fileupload-cancel .ui-icon {
visibility: hidden !important;
}
I hope it helps also.
if still no luck. You can put this css code (tested) to remove icon:
.fileupload-buttonbar .fileinput-button .ui-icon-plusthick{
display: none !important;
}
And this code to move Choose more left:
.fileupload-buttonbar .fileinput-button .ui-button-text{
padding-left: 1em!important;
}
I hope this helped.
In Primefaces 5.3 use:
span.ui-fileupload-choose > span.ui-icon-plusthick{
display: none !important;
}
span.ui-fileupload-choose > span.ui-button-text{
padding-left: 1em !important;
}
In Primefaces 6.1 use:
.ui-fileupload-simple .ui-icon-plusthick {
display: none !important;
}
.ui-fileupload-simple .ui-button-text{
padding-left: 1em !important;
}
For file upload in advanced mode (tested on PrimeFaces 6+):
.ui-fileupload .ui-icon-plusthick {
display: none !important;
}
.ui-fileupload .ui-icon-arrowreturnthick-1-n {
display: none !important;
}
.ui-fileupload .ui-icon-cancel {
display: none !important;
}
the file primeicons.css has all the icons classes.
Overwrite the property content value with the respective chosen icon code.
For example, if you want to replace the icon for the papper-clip:
/* \e97b is the papper-clip code found in primeicons.css */
.pi-plus:before {
content: "\e97b";
}