I have a .cshtml file which contains search/upload/download/save buttons that uses materialize.min.css for styling of these buttons and a ag-grid in the same page to show the uploaded file data in the grid.
So the page is referred to both materialize.min.css and ag-grids javascript community edition file i.e. ag-grid-community.min.js.
I wanted to select each rows of ag-grid and then send it to backend for processing. So i have enabled ag-grids column property checkboxselection. But unfortunately the checkbox in ag-grid is not working (i.e. not able to check the checkbox) since CSS of materialize.min.css are getting applied to checkbox element instead of ag-grids checkbox CSS.
I have tried below ways to sort this out but none helped,
Changed the order of CSS files in my page.
Wrote a separate CSS file and copied ag-grids checkbox related CSS and added !important tag to each of its properties.
Tried using ag-grids cellclass property.
As per my project structure, I can't have separate CSS file for search/upload/download/save buttons because its written as a separate framework.
Is there any way to bypass materialize.min.css file getting applied to ag-grid?
I came across the same issue recently and the following worked for me, inspired by this answer.
Add the following CSS to undo the Materialize formatting as per the link above:
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1 !important;
position: relative !important;
pointer-events: inherit !important;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none !important;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 10px !important;
}
Add the following to your ag-grid. This will add the class to all the checkboxes. It needs to called dynamically on the scroll event because ag-grid use DOM Virtualisation.
gridOptions.onBodyScroll = function(){
var inputs = document.querySelectorAll(".ag-checkbox-input");
for(var i = 0; i < inputs.length; i++) {
inputs[i].classList.add('reset-checkbox');
}
}
After many trial and error method, having the below css code in new css file and then refereeing it in working page worked for me.
[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
position: initial;
left: initial;
opacity: initial;
background-color: initial !important;
cursor: default !important;
appearance: checkbox !important;
box-sizing: border-box !important;
margin: 3px 3px 3px 4px !important;
padding: initial !important;
border: initial !important;
left: 0px !important;
}
input[type="checkbox"], input[type="radio"] {
box-sizing: initial;
padding: initial;
background-color: initial !important;
cursor: default !important;
appearance: checkbox !important;
box-sizing: border-box !important;
margin: 3px 3px 3px 4px !important;
padding: initial !important;
border: initial !important;
}
Related
I am working on project vujs add vutify but I should to use commponent.
.horizontal{
border-color: #F4F4F4 !important;
border-width: 2px ;
/*border-width: none !important;*/
}
<v-divider horizontal class=" horizontal hidden-md-and-up" ></v-divider>
I have try to use this code but nothing doesn't happend.
If I try to use inspect element on web divider display as you can see.
Anyone can Idea?
You probably run into specificity issue with your css, meaning other css is to "powerful". You can try this code below that makes it more specific targeted. Note I did changes to both the component class name and the css.
.theme--light.v-divider.v-divider--horizontal {
border-color: #F4F4F4 !important;
border-width: 2px;
/*border-width: none !important;*/
}
<v-divider horizontal class="v-divider--horizontal hidden-md-and-up"></v-divider>
In the dynamic login button i've ._4z_d ._4z_f class with some padding . And i'm giving him padding through styling tags as
._4z_d ._4z_f {
padding: 9px 24px !important;
}
so as expected my padding is not implemented because button is dynamic and it's original padding is also dynamic . Any help will be quite appreciatable
The fact that the button is dynamic shouldn't be a problem for you, try giving it a block box model, I suspect that the button is still inheriting its default box model.
._4z_d ._4z_f {
display: inline-block;
padding: 9px 24px !important;
}
I am trying to change the border color of a textarea. I have used jQuery for doing so. Previously, I was using .css("border-color","rgb(250,0,0)"), and it was working fine. Now I am told not to use CSS in Javascript and use Class.
So I created one class named:
.redBorderColor{
border-color:rgb(255,0,0);
}
and in jQuery I used:
.addClass("redBorderColor")
When I checked it in browser, then I find class name is there in textarea's class attribute, but border color does not change. I have seen in firebug following class, from Pure CSS which was already implemented in project:
.pure-form select, .pure-form textarea {
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 3px #ddd inset;
box-sizing: border-box;
display: inline-block;
padding: 0.5em 0.6em;
}
Question is that, I want my new style class to be implemented and previous one should be not considered or ignored. As of now, my style is cut off by firebug
Firstly note the typo; redBorderClass in your JS code should be redBorderColor.
That said, you also need to make the redBorderColor CSS class more specific so that it over-rules the other CSS styling. You can use either !important:
.redBorderColor {
border-color: rgb(255, 0, 0) !important;
}
Or you can make the selector more specific:
.pure-form textarea.redBorderColor {
border-color: rgb(255, 0, 0);
}
Note that the latter is better practice.
You have
.redBorderColor
while you are adding:
redBorderClass
Issue seems to me is a simple typo. You have defined your css selector as .redBorderColor, here you can see Color.
On the otherside when you are adding the class with js/jquery you have used redBorderClass not redBorderColor.
If you wanna ignore or not considered the previous class, then remove the current class and add your class.
.removeClass('pure-form').addClass("redBorderColor");
Then, put this into your class to keep the other configuration.
border-radius: 4px;
box-shadow: 0 1px 3px #ddd inset;
box-sizing: border-box;
display: inline-block;
padding: 0.5em 0.6em;
A 3rd party plugin/widget injects this CSS into my html page.
* {
margin: 0px; padding: 0px;
}
html {
margin: 0px; padding: 0px;
}
body {
margin: 0px; padding: 0px;
}
Is there any way i can override that CSS and undo all the damage that it does?
I have to have that widget on my page. I cannot just remove it.
EDIT:
As per one of the comments, this CSS is good because it normalises the rendering, but it breaks my tags. Particularly, the '*' tag rule breaks it.
This is how the list looks without the '*' rule.
This is how it looks with it.
Elaborating on #j08691 's answer, specifically point nr 2, you can use the following to override the widget's css for the list:
html ul{
margin: 1em 0;
padding: 0 0 0 40px;
}
The values used are from Nicholas Gallagher's (#necolas) "normalize.css"
Either:
Add your own CSS after it to override the CSS you don't want.
Create more specific CSS rules as CSS rules with higher specificity will override those with lower specificity.
Use the !important keyword to override the styles you don't want.
Use inline CSS.
Yea, as #j08691 says, adding your css with the !important keyword might be the cleanest way:
* { margin: YOUR VALUE !important; padding: YOUR VALUE !important;}
html {margin: YOUR VALUE !important; padding: YOUR VALUE !important;}
body {margin: YOUR VALUE !important; padding: YOUR VALUE !important;}
i made a chrome extension, and my extension will show popup on webpage. I create popup by div tag like this:
var myPopupDiv = document.createElement('div');
myPopupDiv.className = "popup";
document.body.appendChild(myPopupDiv);
And css for popup class as following:
div.popup {
color: #fafafa !important;
border-color: #000000 !important;
border-width: 0px !important;
-webkit-border-radius: 10px !important;
background-color: #363636 !important;
font-size: 16px !important;
padding: 8px !important;
overflow: visible !important;
z-index: 999999 !important;
text-align: left !important;
cursor: default;
position: absolute !important;
}
I dont know why my popup sometimes show up on some pages and sometimes it is not shown up on some others. For a specific case, my popup cannot be shown up when my extension work on stackoverflow webpage.
what is wrong with my javascript code?how can i make a popup display on any webpages?
Thanks for your help.
I just checked, and StackOverflow's CSS defines a popup class with display: none. Use the Chrome "Inspect Element" panel to check if your div is added to the DOM, and if it got the display: none style applied. I'd fix this by coming up with a unique name for your CSS class.