simulate width: calc(100%) - with jQuery not working

Question

I am using HTML, CSS, mediaQuery, Javascript, jQuery and PrimeFaces, and I want to use the css property

calc(100% - 100px)

I've implement a javascript work around for old browsers, which do not support this property.

After reading several related questions, such as:

An excerpt from my code:

1.) my 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.) My 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 */
   }

Minimal working example:

https://github.com/alexmivonwien/pf.css

When I load my page in any browser, I see that the javascript gets executed and the width of the element is set properly. However, after the javascript alert() shows up and I confirm it, the browser applies the css from the media query and the width of the element set with javascript is overwritten.

How can I make my JavaScript take precedence over the media query in the CSS?

Current result:

Normal CSS rules should not overwrite inline styles set via JS in the first place. Instead of setAttribute, can you try `[element].style.width = "583px !important"`? If that doesn’t work either, then you should show us a [mre]. // You are aware that doing this only once one page load, would not really be the equivalent of using `calc`, right? And support is pretty broad, so unless you really have to support browsers like IE < 9 (and can’t live with a “static” fallback value either), I would not bother too much with such workarounds in the first place … — 04FS, Sep 18 '19 at 06:39
@04FS I tried your suggestion, but it did not work. I also added a minimal working example and adjusted my question accordingly. You can download it from here: https://github.com/alexmivonwien/pf.css — Alex Mi, Sep 19 '19 at 04:32
@Kukeltje I added a minimal working example here: https://github.com/alexmivonwien/pf.css Any help will be appreciated! Thank you! — Alex Mi, Sep 19 '19 at 04:35

score 0 · Answer 1 · edited Sep 19 '19 at 09:54

0

Have you tried setting an important value:

$('#homeDetailsPanelId').css('width', ''); //Remove width
var styles = $('exampleDiv').attr('style');
styles += 'width: ' + width + ' !important;'
$('#homeDetailsPanelId').attr('style', styles);

edited Sep 19 '19 at 09:54

Kukeltje

12,223
4
24
47

answered Sep 18 '19 at 04:42

MomasVII

4,641
5
35
52

I have just tried : document.getElementById("homeDetailsPanelId").setAttribute("style","width:583px !important;"); - nothing changed – Alex Mi Sep 18 '19 at 04:46

score 0 · Answer 2 · answered Sep 20 '19 at 05:18

it might be a problem with presidency of id and class.try to give class in jquery and id in CSS like

css

    @media only screen and (min-width: 1200px) {

    #homeDetailsPanelId {
        width:calc(100% - 395px);
    }

     /* more styles here */
   }

Jquery :

   document.getElementByClassName("col-7").setAttribute("style","width:583px !important;");

simulate width: calc(100%) - with jQuery not working

2 Answers2

Linked