Reputation: 167
I new at angualr2 and i am trying to build a webpage using clarity.
I am trying to set the height of the main container clr-main-container
to min-height: 100vh;
in the style.css
file that i placed in ~/src/style.css
this is where I set the global styles.
in the default clarity css file the styles are set to
.main-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100vh;
background: #fafafa;
overflow: hidden;
-webkit-transform: translateZ(0);
As i mentioned, I am trying to change height: 100vh;
to min-height: 100vh;
so in the style.css file i tried setting
.main-container {
min-height: 100vh !important;
}
to override the default clarity css file but this isnt working with me.
I did include the style.css in the angilar-cli.json file.
"styles": [
"styles.css",
"../node_modules/clarity-icons/clarity-icons.min.css",
"../node_modules/clarity-ui/clarity-ui.min.css",
"../node_modules/handsontable/dist/handsontable.full.css",
"../node_modules/nouislider/distribute/nouislider.min.css",
"../node_modules/intro.js/introjs.css"
],
but i am still having this issue. What am i missing?
Upvotes: 7
Views: 1885
Reputation: 2728
You can override CSS rules either by being more specific, or by adding !important
as @SangeethSudheer suggested.
It is always more elegant and flexible to use the first option, being more specific, and only use !important
as a last resort.
More specific CSS rules
/* global (less specific) */
.active {
height: auto;
}
/* more specific, will override the above */
div.active {
height: 50vh;
}
header div.active {
height: 10vh;
}
Upvotes: 2