-2

All,

I have the following selector which doesn't apply my desired background color to the td.

table.reportviewer-report td#oReportCell{
background: red; }

Here's the catch. I have a a frame where a table lives. I add the class "reportviewer-report" using jquery to the table sitting inside a frame when the frame loads using this code:

$('div#oReportDiv > table', reportFrame.document).addClass('reportviewer-report');

... and upon inspection the class is there. When the class is added, no styles are applied.

Interestingly, I take the markup + css rule to scratchpad and it works, my tds background turn red.

Btw, this also works but I want to use a stylesheet instead of hard-coding css rules using JS.

$('div#oReportDiv > table', reportFrame.document).css('background', 'red');

What's going on?

EDIT: Looks like the cause is (as indicated by the comments) that the applied stylesheet rules do not apply to nested HTML documents inside frames. Workaround is to add stylesheet dynamically using JS.

ActiveX
  • 1,064
  • 1
  • 17
  • 37
  • 1
    Can you add a fiddle? http://jsfiddle.net – Andrew Bone Nov 19 '15 at 16:55
  • 2
    Parent CSS will not affect elements in an iFrame. See: http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe – Marcelo Nov 19 '15 at 16:56
  • *"... and upon inspection the class is there"* Then this has absolutely nothing to do with jquery. – Kevin B Nov 19 '15 at 16:57
  • Added link to HTML in scratch pad (which works there). – ActiveX Nov 19 '15 at 17:02
  • "Parent CSS will not affect elements in an iFrame." So, you mean if I have a style sheet defined for the site, it will not be applied to anything inside the frames? If that's the case, is there a trick I can use to make HTML content inside a frame use a style sheet? One option comes to mind is to use jquery to append it to the DOM of the HTML inside the frame. Any other option? – ActiveX Nov 19 '15 at 17:03
  • make it part of the iframe's source? – Kevin B Nov 19 '15 at 17:04
  • @ActiveX The question I linked in my comment discusses several options. – Marcelo Nov 19 '15 at 17:05
  • Not that easy, the entire HTML structure w/ frames appended to the original HTML document is dynamically generated by asp.net, I have no control over it. May have to resort to JS after all. – ActiveX Nov 19 '15 at 17:05
  • since you are adding class in your `td` shouldn't you use `td.oReportCell` instead of `td#oReportCell` in css selector? – maksbd19 Nov 19 '15 at 17:08
  • The 'oReportCell' is auto-generated id by asp.net code, the rules is correct. It's a bit of my classes + auto-generated ids and classes by asp.net – ActiveX Nov 19 '15 at 17:11

1 Answers1

0

As answered by others :

Looks like the cause is (as indicated by the comments) that the applied stylesheet rules do not apply to nested HTML documents inside frames. Workaround is to add stylesheet dynamically using JS.

ActiveX
  • 1,064
  • 1
  • 17
  • 37