Dynamically adding media queries to the page and overriding the styles from generated html from Application Side

Question

I have code where i dynamically add custom css to my html on the application side like this:

C# code:

html = html + string.Format("<div id='{0}' class='sectioncon SectionComp 
responsiveSectionClass_{0}'>", sectionGUID);

This html variable gets returned to the UI and i then use (someselector).append(html)

Then client side i retrieve this information and spit out the media query using jquery like this:

Jquery code:

var stylesheetXS = $("<style id='" + this.responsiveClass + "'>")

var txtAll = "";
txtAll += "@@media screen and (max-width : 480px) {";
txtAll += "." + this.responsiveClass;
txtAll += "{";
txtAll += this.Style;
txtAll += "}";
txtAll += "}";

$(stylesheetXS).html(txtAll);

$("head").append(stylesheetXS);

So this.responsiveClass is the reference to responsiveSectionClass_{0} where {0} is a GUID.

The Jquery code gets added first before the c# code gets appended to the UI, so why is my Dynamically generated Media query not taking affect to the class in the html code?

Also when i select the element using chrome developer tool i cant see the media query that has been generated thats why i think that im doing something wrong here.

This is the generated html or part of it:

Media Query:

@media screen and (max-width : 480px) {.responsiveSectionClass_d7099673a3924894bec0bdb59f6ad0b0{padding-top:30px;padding-bottom:30px;width:auto;height:auto;}}

HTML:

<div class="sectioncon SectionComp responsiveSectionClass_d7099673a3924894bec0bdb59f6ad0b0" style="padding-top:30px;padding-bottom:30px;width:auto;height:auto;"></div>

This is all i see in the code inspector:

element.style {
    padding-top: 30px;
    padding-bottom: 30px;
    width: auto;
    height: auto;
}
.sectioncon {
    padding-top: 30px;
    padding-bottom: 30px;
    width: auto;
    height: auto;
}

To Nathans response i tried this:

var txtAll = "";
                txtAll += "@@media screen and (max-width : 480px) {";
                txtAll += "." + this.responsiveClassXS;
                txtAll += "{";
                txtAll += this.Style;
                txtAll += "}";
                txtAll += "}";

                var css;
                css = document.createElement("style");
                css.id = this.responsiveClassXS
                css.type = 'text/css';
                css.media = "all";
                css.textContent = txtAll;
                document.getElementsByTagName("head")[0].appendChild(css);

but still not recognising the media query.

This might help: https://stackoverflow.com/questions/805384/how-to-apply-inline-and-or-external-css-loaded-dynamically-with-jquery — Nathan Hawks, Jan 01 '20 at 00:55
Apologies, the content or media query needed to be applied inside an iframe, should i delete this question? — redoc01, Jan 01 '20 at 01:36
I don't think it's possible to talk to the interior of an iframe from the parent document. The content being loaded in the iframe will have to handle its own styles. — Nathan Hawks, Jan 01 '20 at 01:55

score 1 · Accepted Answer · answered Jan 01 '20 at 04:58

For some reason I can't get it to work in a stack snippet, but you can view a live demo here (or just save the code below as .html file and open it in a browser..) I made the background blue so that it would stand out more..

Here is a video of this working:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

</body>
<script>
    let iframeEl = document.createElement("iframe");
    iframeEl.setAttribute("style", "height: 100%; width: 100%;");
    document.body.appendChild(iframeEl);
    iframeEl.contentDocument.open();
    iframeEl.contentDocument.write('<div class="sectioncon SectionComp responsiveSectionClass_d7099673a3924894bec0bdb59f6ad0b0" style="padding-top:30px;padding-bottom:30px;width:auto;height:auto;"></div>');
    iframeEl.contentDocument.close();
    let styleSheet = `
        @media only screen and (max-width : 480px) {
            .responsiveSectionClass_d7099673a3924894bec0bdb59f6ad0b0 {
                padding-top: 30px;
                padding-bottom:30px;
                width:auto;
                height:auto;
                background-color: blue;
            }
        }`;
    let style = '<style type="text/css">' + styleSheet + "</style>";
    iframeEl.contentDocument.head.innerHTML += style;
</script>

</html>

Dynamically adding media queries to the page and overriding the styles from generated html from Application Side

1 Answers1