I am utilizing a combination of HTML, CSS, mediaQuery, Javascript, jQuery, and PrimeFaces in my project. One particular css property I want to use is:
calc(100% - 100px)
To handle old browsers that do not support this property, I have implemented a javascript workaround.
In seeking solutions, I came across several relevant questions on Stack Overflow, such as:
css width: calc(100% -100px); alternative using jquery
Run JavaScript function when the DOM is "ready"?
Getting the width and height of a div after it finished loading
A snippet from my code includes:
1.) The JavaScript function in my facelet:
<ui:define name="search_results">
<h:outputStylesheet name="primeicons/primeicons.css" library="primefaces"/>
<h:outputStylesheet library="css" name="results.css" />
<h:outputScript library="primefaces" name="jquery/jquery.js"/>
<h:outputScript library="js" name="results.js"/>
<script>
// we need to execute the js function after the page load:
// @see https://stackoverflow.com/questions/8996316/how-to-execute-javascript-after-page-load
jQuery(document).ready(function() {
jQuery(document).ready(function() {
// twice in document.ready to execute after Primefaces callbacks
document.getElementById("homeDetailsPanelId").setAttribute("style","width:583px !important;");
var width = document.getElementById("homeDetailsPanelId").style.width;
alert (width);
});
});
</script>
2.) The HTML and CSS code for the element in question:
<div id="homeDetailsPanelId" class="col-7">
<!-- more code here -->
</div>
3.) My css file:
@media only screen and (min-width: 1200px) {
.col-7 {
width:calc(100% - 395px);
}
/* more styles here */
}
For a minimal working example, visit:
https://github.com/alexmivonwien/pf.css
Upon loading the page in various browsers, the javascript successfully executes and sets the width of the element correctly. However, once the javascript alert() appears and is acknowledged, the browser applies the css from the media query, thus overriding the previously set width through javascript.
How can I ensure my JavaScript overrides the media query in the CSS?
Current outcome displayed here: