Is there any way to change onsen-ui lists (ons-list) to look like a CardView as the below picture.
The borders are set in background and I tried to change them and setting padding and margin with no chance.
By changing these styles I have achieved the below picture
.list__item{
border-style:solid !important;
border-width:1px !important;
border-color:#ddd !important;
box-shadow:2px 2px 1px #eee !important;
margin:10px !important;
}
Related
in my current project I encountered the problem that I need to change the color of the underline with SCSS, before I did this using the palette in themes.
For now I got a line to display using the following code.
.input {
border-bottom: 1px solid red !important;
}
But this is obvisously only a workarround. has anyone any idea how to disable the underline (the snippets utilizing the input props didn't work for me) or changing the color palette?
Edit:
I found a solution. I just added
div::after{
border-bottom: 2px solid red !important;
}
div::before{
border-bottom: 1px solid grey !important;
}
to the code and now it works :D
Kind regards,
Frodo
I've tried changing the Background-color of tristatecheckbox as shown below. The said codes will work if I directly update the CSS in the web console. But when I applied it in my codes. it won't work.
.fa-check:before {
Background-color: green !important;
}
.fa-close:before {
Background-color: red !important;
}
Can anyone, help me with this?
You need to prepend your CSS with :host >>>:
:host >>> .fa-check::before {
background-color: cyan !important;
}
:host >>> .fa-close::before {
background-color: magenta !important;
}
Note that I've changed the colors since green & red are the defaults.
Plunker example
I am working on md-slider, Here my question is how can we have the color of the slider as own, as default the having two classes md-warn(for red), and md-primary(for white). I want white color slider.
How can I achieve this?
Visores' answer was very useful, however this didn't quite match the functionality of the default slider insofar as the right hand side of the md-thumb ends up the same colour as the rest of the slider. By changing the
.md-track to .md-track-fill, you will match the default functionality. The code will therefore look as follows:
#red-slider .md-thumb:after, #red-slider .md-track-fill{
background-color: greenyellow !important;
border-color: greenyellow !important;
}
#red-slider .md-focus-thumb, #red-slider .md-focus-ring{
background-color: greenyellow;
}
CodePen example
you can achieve a custom color by overwriting the css-class of the slider.
codepen example
#red-slider .md-thumb:after, #red-slider .md-track{
background-color: greenyellow !important;
border-color: greenyellow !important;
}
#red-slider .md-focus-thumb, #red-slider .md-focus-ring{
background-color: greenyellow;
}
css classes to overwrite:
.md-thumb:after
.md-track
.md-focus-thumb
.md-focus-ring
I didn´t tested all the functionality of the slider. But basically you have to overwrite all the styles from the slider. You can find them at the git repo
Additional, you can custom the color of balloon on the md slider by this code:
#red-slider .md-sign, #red-slider .md-sign {
background-color: blue;
border-top-color: blue;
}
#red-slider .md-sign:after, #red-slider .md-sign {
border-top-color: blue;
}
This can change the color of balloon as you neeeded
I have four buttons which are right-aligned on the navigation bar and title in center. The title text is bigger and it's overlapping with right buttons. How can I set title width so that it shows the three ellipses when text is overflowing?
You can use CSS like the example below:
#wrapperDiv {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
I arrange a fiddle: https://jsfiddle.net/svpbe351/
Hi i am using some bower packages but there are some css rule defined like below:
.rn-carousel-indicator {
width: 100%;
text-align: center;
height: 20px;
background-color: black;
I want to override it into my common.css to remove the background-color, I can successfully set it as red but it cannot apply with none:
.rn-carousel-indicator {
background-color: none;
}
Anyway I can do with this? Thanks a lot!
background-color:
The background-color CSS property sets the background color of an element, either through a color value or the keyword transparent.
So none is invalid, you should use:
background-color: transparent;
You have a couple of options
background: none;
or
background-color: initial;
Note, initial has some dodgy browser support.
(No support in IE apparently)
background-color: none is invalid. you have to use background color transparent property.
For example:
background-color: transparent;