I want to remove the .modal-backdrop class from my ionicModal but as the class is automatically added, I am unable to remove it.
I don't want to permanently remove the class. But want to remove it and then add later on.
I tried this:
angular.element(document.querySelector('div')).removeClass("modal-backdrop");
but it is not working.
Can you plz suggest how to do it?
Thanks in advance for any help.
One solution to hide the backdrop is changing the opacity of the backdrop modal when this is active! For that, put the following CSS Styles:
.active .modal-backdrop-bg {
opacity: 0;
}
Related
I am using import TimePicker from '#mui/lab/TimePicker'; time picker, and I need ability to manually confirm or cancel the selection. In the documentation I see cancelText and okText options, but there are no ability to show those buttons (showToolbar is not relevant). Maybe I missed something, could somebody please help me?
`
nowiko
I had same issue, thats how i resolved it !!!
.css-1e6y48t-MuiButtonBase-root-MuiButton-root {
display: none !important;
}
Just add this class, this will hide whole div of buttons..
Here is my fiddle:
https://jsfiddle.net/jemrfomy/
Once I click on a checkbox, it should change that particular tr's background color using the highlight class below:
.ui-table-highlight {
background-color:#ffefbb;
}
I tried several solutions on stackoverflow but I think it perhaps is a problem in my css?
Yes its a problem with the hierarchy of your highlight CSS class it should be:
.ui-table tr.ui-table-highlight {
background-color:#ffefbb;
}
As ".ui-table tr:nth-child" will override it otherwise
Just add !important after the color in your css as
.ui-table-highlight {
background-color:#ffefbb !important;
}
Updated your fiddle
https://jsfiddle.net/jemrfomy/1/
Best of luck for future :-)
I'm new at angularjs/bootstrap and I'm trying to create a SPA that uses bootstrap accordion lists. I'm trying to change the color of the whole entire accordion tab, however, it's only changes part of the accordion space. I looked online and this question (Add class to accordion heading using angualr ui bootstrap?) and it's Jsfiddle (http://jsfiddle.net/Zmhx5/3/) represent my problem perfectly, but does not explain the solution.
I tried using firebug to find out what's going on behind the scenes, and it says the whole entire accordion tab is "". I have a css class that overwrites that style, but for some reason, something is overriding it.
.panel-heading {
background-color: red;
}
This website has a tutorial on accordions and its css simply overwrote it (http://patternry.com/p=accordion/). I tried doing the same but it did not work, please help :/
The reason why your override doesn't work is because of CSS Specificity. Since the Bootstrap style is more specific than yours, it is the one that's being applied. You'll need to override as follows
.panel-default >.panel-heading {
background-color: red;
}
Here is the JSFiddle for reference.
You should use scss in this case.
<div class="custom">
<accordion>
...
</accordion>
</div>
In css you will need to define.
.custom {
.panel-heading: {
background-color: red !important;
}
}
Since I couldn't add a comment to #AdityaSethi in #BartJedrocha's answer I will put an answer here since I think that it is useful.
.panel-default >.panel-heading {
background-color: red;
}
worked for me where
.custom {
.panel-heading: {
background-color: red !important;
}
}
Did not. Perhaps it is the use of SCSS? I read somewhere that SCSS uses the extension .scss. I didn't have the patience to change my stylesheet extension or create a new one. Sooo I tried the 2nd answer.
My comment however is more toward the #AdityaSethi comment that noted the issue of that solution affecting the entire app since panel classes are widely used. Understandable. I figure though the easy solution to that is:
div.custom .panel-default>.panel-heading {
background-color: red;
}
And that did the trick for me..as far as still changing the styles. The rest of my bootstrap page must not have had other panels in use because nothing else was change before I added div.custom to the CSS. But I imagine that with what little logic occurs in CSS, no other panels outside of div.custom should be affected. :)
Is there a way to remove the :hover from a css inline in angular without removing the whole class?
Like the following removes the whole class:
ng-class="{'option-selected' : option.chosen}"
But say option-selected had a option-selected:hover
Is there a way to remove :hover inline within the ng-class?
Attach the hover to another class that you can toggle.
Somethign like
ng-class="{'option-selected': option.chosen, 'option-hover': option.hover }
Then in your css for when setting up the hover you would have
.option-selected.option-hover:hover{
...
}
That way, the only way the hover will work is if both classes are on it.
Besides that, no there is no way to get around the hover from css unless you start dropping in !important's everywhere.
The cycle button has some empty space in front of the text they show, probably because the menu items can have icons, is it possible to remove it?
Either display:none the "x-btn-icon" for the control, or use the "iconAlign" property inside of your config to move the icon div to the right of the control label.
Apply css to solve the problem,
{
white-space: normal;
}
Thanks