How to unset max-height?
Solution 1:
Reset it to none
:
pre {
max-height: 250px;
}
pre.doNotLimitHeight {
max-height: none;
}
Reference
Solution 2:
You can clear the max-height attribute by using the following css:
max-height:none;
Solution 3:
You can use
max-height: unset;
which resets a property to its inherited value if you are inheriting from its parent (will work as keyword inherit) and in case you are not inheriting it will resets to its initial value ( will work as keyword initial).
Solution 4:
Just a note, if you're using JavaScript to style the element like $el.style.maxHeight = '50px';
using $el.style.maxHeight = 'none';
will not "reset" or "remove" the 50px
, it will simply override it. This means that if you try to "reset" the max height of an element using $el.style.maxHeight = 'none';
it will apply the none
value to the max-height
property of the element, overriding any other valid max-height
properties in CSS selection rules that match that element.
An example:
styles.css
.set-max-height { max-height: 50px; }
main.js
document.querySelectorAll('.set-max-height').forEach($el => {
if($el.hasAttribute('data-hidden')){
$el.style.maxHeight = '0px'; // Set max-height to 0px.
} else {
$el.style.maxHeight = 'none'; // 'Unset' max-height according to accepted answer.
});
To actually "unset" an inline style, you should use $el.style.removeProperty('max-height');
.
To complete this for an entire style rule and not just a single element, you should first find the rule you want to modify, and then call the removeProperty
function on that rule:
for(let i = 0; i < document.styleSheets[0].cssRules.length; ++i){
if(document.styleSheets[0].cssRules[i].selectorText == '.set-max-height'){
document.styleSheets[0].cssRules[i].style.removeProperty('max-height');
break;
}
}
You can find the StyleSheet
and CssRule
objects however you want, but for a simple application I'm sure the above would suffice.
Sorry for putting this as an answer, but I don't have 50 rep so I can't comment.
Cheers.