I am using tooltip from ngx-bootstrap with this code
<button tooltip="Add column before" container='body' placement='bottom' containerClass='tooltipClass'>
<i class="plus"></i>
</button>
and code for tooltipClass is
.tooltipClass{
z-index:100;
color:green
}
The tooltip is beneath the row Numbers and that is because of the z-index on rowNo. but I am adding greater z-index to the tooltip but the class is not getting added to it.
Any ideas what should I do?
Place .tooltipClass class in the root style-file it will work!
I was hitting this same issue, but the solutions above weren't working. Updating the global scss variables of ngx-bootstrap was how I fixed it.
This updates your inner tooltip.
.tooltip-inner {
background-color: #333 !important;
color: green !important;
}
This updates your arrow depending on position.
.bs-tooltip-bottom .arrow::before{
border-bottom-color: #333;
}
Related
I am using Menu with icons component in my project.On mouse hovering the menu items(ex: edit) i want to change both the text and icon color,something like this.
But i am able to give only background-color on mouse hover but unable to change the text-color on mouse hover.
I tried giving color: !important; also, still no result.
Here is the stackblitz link.
Use code as below:
.mat-menu-item:hover{
background-color:grey;
color: purple;
}
.mat-menu-item:hover .mat-icon{
color: purple;
}
output:
see here:https://stackblitz.com/edit/angular-gytsqs-hh8mtq?file=app/menu-icons-example.html
put on your css man! here's the code.
.mat-menu-item:hover{
color: blue;
}
Use the simple code change background color..
.mat-menu-item:hover{
background-color:blue !important;
}
I'm using ui-bootstrap-tpls-2.5.0.min.js. I changed dropdown-menu's backgorund color like this in specific html.
.dropdown-menu {
background-color: transparent;
box-shadow: none;
}
But it makes datepicker's background transparent too. I know why it happened, so I cleared that line but nothing changed.
So I want to change datepicker popup's background using CSS selector like this,
.datepicker .ul{
background-color: white;
}
//this is an example code.
what selector do I have to choose to change datepicker's background?
If this is what you require, you need to add these two styles that are highlighted.
Happy coding :)
I am using plugIn Select2 and I wanna do 2 customize in CSS:
Change size ScrollBar of Single select. (I want resize search input -width:80%-, and make bigger scrollbar -occupy the space that has left the SearchBar-)
Change disabled CSS Styles.
Anybody know what are their respective ClassNames? I have searching but I did not found nothing.
(eg: .select2-search input {} ; It is for Search Input)
PD: Anybody knows where can I find all CSS classes of Select2?
Thank you.
SOLVED:
Change size SearchBar Input:
.select2-dropdown .select2-search .select2-search__field {
width: 50% !important;
}
Change Disabled Styles:
.select2-container--disabled .select2-selection--single {
cursor: not-allowed !important;
}
.select2-container--disabled .select2-selection--multiple {
cursor: not-allowed !important;
}
If anyone knows where I can found all CSS ClassNames Select2 I will be grateful.
I already set textfield background colour into transparent but not working in Ionic.
.item .item-input {
background-color: transparent;
}
I already read the Ionic documentation but it's not working. It's still white colour.
http://ionicframework.com/docs/components/#forms-inline-labels
Are you sure your css rule matches the correct element?
Your rule:
.item .item-input {
background-color: transparent;
}
Matches an element with class item-input, which is a descendant of an element with class item. Perhaps you meant the following?:
.item.item-input {
background-color: transparent;
}
This rule matches an element with class item and item-input.
In Angular (as your question has an Angular tag), the answer is to use --background
--background: transparent !important; // example
see https://ionicframework.com/docs/api/input#css-custom-properties (select : Angular from the list to see Angular related docs)
Maybe a bit of a hack, but could you put the text inside another div and give the div a special background colour.
So, something like this:
.text {
background-colour: red; // or colour: red; I don't know
}
and then put the text between this div. Hope it helps.
.label {
background-color: reba(255, 255, 255, 0.0);
}
Then put the CSS rule on the ion-item element like this:
<ion-item class="label">
I would like to set custom icon (ionicons) size for this code:
<button class="button button-icon icon ion-stop customIconSound"></button>
For class customIconSound i tried following:
button.customIconSound,button.button-icon {
font-size: 52px !important;
color: #fff;
line-height: 55px!important;
}
But without luck. If i tried icon class without the button button-icon class i fount that it is working but without button class icons has not pressed state (because is it not a button).
How can i solve it please?
Thanks for any advice.
Lucas was close but the correct syntax is this one
button.customIconSound:before {
font-size: 22px !important;
}
If you didn`t solve your problem yet or for people dealing with it in future.
You have to change css style for i pseudo element :before
button.customIconSound i:before {
font-size: 52px !important;
}
Your example is working here.
Maybe your problem is caused by something else.
PS: If you want only to resize the icon this css line is enough.
.customIconSound {
font-size: 52px;
}
Try ruling button-icon class out. That css class was the trouble in my case. Likewise, as a result, css styles worked on button tag too. For example:
<button class="button button-clear ion-edit" style="color:#fff; font-size:22px"></button>