Menu
I'm working with a javascript grid plugin (jqWidget's grid). It allows me to apply a custom style to a cell when defining its columns:
{ "text": i, "width": 1, "cellclassname": "custom-column" }
This is useful to me because I am trying to reduce the width of the columns to exactly 1em.
.custom-column {
width: 1em;
}
Unfortunately they included an extra DIV without an id or class in each cell:
<div role="gridcell" style="left: 725px; z-index: 1171; width:25px;" class="jqx-grid-cell jqx-item custom-column">
<div style="overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;">M</div>
</div>
In the HTML above you can see my custom class custom-column but the inserted child DIV includes padding and margins which I believe is affecting the grid cell by making it much larger than 1em (it appears closer to 3em).
Is there anything I can add in my custom-column class that would override or counter the padding and margin settings in the child?
Update : More info after change
Based on comment and the first answer I changed my custom-class to look like this:
.custom-column > div {
width: 1em;
margin: 0;
padding: 0;
}
As far as I can tell this made no difference. I'm including a screenshot of Chrome's debugging tool which I hope shows enough information to help.
742
An !Important declaration is a great way to override the styles you want. When an important rule is used on a style declaration, this declaration will override any other declarations. When two conflicting declarations with the !important rules are applied to the same element, the declaration with a greater specificity will be applied.
When an important rule is used on a style declaration, this declaration will override any other declarations. When two conflicting declarations with the !important rules are applied to the same element, the declaration with a greater specificity will be applied. Let’s see how you can use the !important declaration to override inline styles.
An ID selector only takes precedence over a Class selector if they are both used in the same element. Let’s now see how we can make one class override another. If that class has a background-color of blue, and you want your <div> to have a red background instead, try to change the color from blue to red in the class itself.
The CSS entered and saved gets added to the document head which, like the art direction method we discussed, gives you the opportunity to override other styles on that particular page. WordPress 4.7 introduced a new feature in the WordPress Customizer that adds a CSS editor:
just add this CSS rule:
.custom-column > div{
margin: 0 !important;
padding: 0 !important;
}
If the div is not an immediate child, replace > with a blank space.
You will have to add the keyword !important after every rule because the styles are inside the div element.
Note: But adding too much of this rule is not a good practice.
191
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
