I am not that familiar with CSS and have a very basic question. I simply want to remove right and left padding from the following "div":
<div id="__grid2" data-sap-ui="__grid2" class="noPaddingRightLeft sapUiRespGrid sapUiRespGridHSpace1 sapUiRespGridMedia-Std-LargeDesktop sapUiRespGridVSpace1">
"sapUixxx" classes are provided by a framework and cannot be adjusted directly. Therefore I declared a new css class "noPaddingRightLeft" and added it to the div:
.sapUiRespGridHSpace1 .noPaddingRightLeft{
padding: 0 0; }
When I check the result in the Chrome debugger tools it looks like this:
CSS at Runtime
There is no sign of my class "noPaddingRightLeft" though it's in the class list of the element. How can I override sapUixxx css files correctly?
Thanks for help
Tobias
Add the important flag to your css
.class {
padding-right: 0 !important;
padding-left: 0 !important;
}
Do:
<div id="__grid2" data-sap-ui="__grid2" class="noPaddingRightLeft sapUiRespGrid sapUiRespGridHSpace1 sapUiRespGridMedia-Std-LargeDesktop sapUiRespGridVSpace1" style = "padding: 0">
Or create the css class as following:
#__grid2{
padding: 0 !important;
}
Add this to your css:
.sapUiRespGrid.sapUiRespGridHSpace1 {
padding: 0;
}
Related
I am using wordpress and some plugin theme.Currently my default template contain this attribute.
html {
margin-top: 32px !important;
}
I need to set it to margin 0px.How to override it? I tried to set in in my specific css but can't.
!important carries the highest level of specificity.
As such, there are only two ways to overwrite it:
Add another !important declaration later on in the stylesheet: html { margin-top: 0; }
html {
background: red !important;
}
html {
background: blue !important;
}
<html></html>
Or add an inline !important declaration: <html style="margin-top: 0 !important;">
html {
background: red !important;
}
<html style="background: blue !important;"></html>
If you put your custom css file below template default css file then browser will affected below css first so template css properties will be replaced by your custom css. so you can write
html {
margin-top: 100px !important;
background-color:red !important;
}
html {
margin-top: 0 !important;
background-color:blue !important;
}
<html>
<h1> hello</h1>
</html>
In my project, my item's padding-left is set by previous stylesheet
And we can see there is padding-left 15px:
If I uncheck the padding-left:
Uncheck the padding-left is my requirement, so I write a css:
.lml-list-item {
background-color:#111111;
padding-left:0px; // I set padding-left:0px;
}
Then I check the html in the firefox, but found my css did not use:
Why my css do not work? and no matter I set lml-list-item in front or after the class, it always not work.
<a href="#" class="lml-list-item item-link item-content ">
<li class="item-content lml-item-content">
<div class="item-media black"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">info</div>
</div>
</li>
</a>
Seems your 15px padding impacts deeper than just .lml-list-item Try:
.list-block>ul>.item-content.lml-list-item {
padding-left: 0;
}
Or as last alternative an !important override:
.lml-list-item {
padding-left: 0 !important;
}
As you can see from the pictures you've included, the padding-left: 15px is set on .list-block .item-content, so assigning a rule for .lml-list-item will of course not work.
Using .list-block .item-content.lml-list-item will, and perhaps also .list-block .lml-list-item as long as it's included after the existing stylesheet. Also, if you want to override just a few rules, you could just add a <style>-block to <head> in the actual file (instead of adding another stylesheet), as inline / declared styles will override stylesheet-styels.
I'm just curious to know if it is possible to have specific stylings based on the name of of a class.
For example, Bootstrap 4 has a helper class for margins and padding like:
<div class="m-t-1 p-a-0"></div>
This gives the div 1em of margin to the top, and removes padding from all sides.
I am sure they have pre-styled this class in their CSS to achieve this.
But I am curious if there is a way to use the class as a variable.
for example:
<div class="fs-x"></div>
where x can be any number, this class would then give the styling the font-size: x to the div.
Is this possible to do?
Thanks.
You can use a CSS pre-processor such as SASS or LESS to achieve this however it generates static classes within a specified range below is an example from the SASS documentation:
$class-slug: for !default
#for $i from 1 through 4
.#{$class-slug}-#{$i}
width: 60px + $i
Which emits this CSS:
.for-1 {
width: 61px;
}
.for-2 {
width: 62px;
}
.for-3 {
width: 63px;
}
.for-4 {
width: 64px;
}
All CSS classes must be explicitly defined. So every variation if X would need to exist in a .css file
you can use constant in css for example
$x = 10px;
img{
margin-bottom : $x;
}
but however you can declare variables with this way
:root {
--color-principal: #06c;
}
#foo h1 {
color: var(--color-principal);
}
I am using AjaxToolkit combobox in my page... I am trying to change the width of combo-button . But I couldnot. Because it has inline style by default..
I tried the following code to add style
//Combo css
.ComboClass .ajax__combobox_buttoncontainer button
{
border-radius: 0px;
box-shadow: 0px;
width :12px; height:12px;
}
But border-radius and Box-shadow styles are applying but Width& height is not applying ..
Because ComboBox Button got default inline styles.. I cant remove that line styles too..
Please post me some suggestions....
Add a javascript function to search for and strip the attributes on document ready.
The jquery way is:
$(document).ready(function()
{
document.find(".ajax__combobox_buttoncontainer").removeClass("ajax__combobox_buttoncontainer").addClass("myAwesomeClassWithCoolDimensions");
});
Make sure your css has a myAwesomeClassWithCoolDimensions class.
Finally it works.. Little change on my css. I just added !important property to override the default element (Inline styles)..
<style type="text/css">
.ComboClass .ajax__combobox_buttoncontainer button
{
box-shadow: 0px;
width: 14px !important;
height: 15px !important;
}
</style>
Now I can change width & height of the combo-button.
I have main style.css and the one provided with third party
// Include main CSS
<link charset="utf-8" media="screen" type="text/css" href="http://test.style-hunters.ru/wp-content/themes/style-hunters/style.css" rel="stylesheet">
// Include third party CSS, we have put it to css folder
<link href="http://test.style-hunters.ru/wp-content/themes/style-hunters/css/style.css" rel="stylesheet">
In the second style.css
body {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
margin: 0;
padding: 20px;
}
This makes all body elements to have padding.
How to resolve it?
Include the third party CSS file first so that you can override undesirable rules in your own file.
You have three good options, two of which are mentioned:
1: Use the !important flag. This is the least desirable, because you forever overwrite the padding rule--what if a page needs to overwrite it?
body {
padding: 0 !important;
}
2: Flip the order; put the third party style sheet first.
3: Use the html tag:
html > body {
padding: 0;
}
/* OR */
html body {
padding: 0;
}
If don't you care about IE6, use the first, if you do, use the second.
Because second css file overwriting to first one. Because of this you have to delete padding : 20px; line from second css file.
If you can't edit second css file you can add !important to first css file. I mean like this :
padding : 0 !important;
In your first CSS file:
html body {
padding: 0;
}
Add more selectivity to your styling rules.
if you add !important after the rule it will override other rules regardless of order.
body{
padding: 0 !important;
}
Don't flip the order bcos in that case other attributes of the second css file can be overwritten by the first css file. So uuse the important flag.