CODEWITHSUNDEEP
javascripthtmlcss
Ben
Ben

Reputation: 607

when/how do css styles get applied for dynamically added element?

On a webpage I am working on, I have a simple html table with one row and two cells. These occupy the entire page

<table>
  <tr>
    <td id="svg-cell">
      <div id="svg-container">
        <!-- the svg is going to go in here -->
      </div>
      <!-- a hidden
           <div id="block-svg"><div>
           will be inserted here in the JS code to prevent further user interaction
           on the svg until the user does something else on the page
      -->
    </td>
    <td> 
      <!-- some other not relevant stuff goes in here-->
    </td>
 </tr>
</table>

The cell on the left will have an SVG in it and when the user clicks on the SVG I want to cover the whole cell up with a transparent gray overlay and block any interaction with that SVG until they have selected something else in the right cell. Using the below javascript:

let blockSVG = document.createElement('div')
blockSVG.id = "block-svg"
blockSVG.innerHTML = "Please select an item on the right"

document.getElementById("svg-cell").appendChild(blockSVG)

and then I have this corresponding css:

div#block-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    text-align: center;
}

now all of this is working great as expected, except sometimes the SVG is very large. It can take up more space than is on the page and when this happens even though I can see in the browser console that my div was correctly added to the page and does indeed have "block-svg" as its ID.. the CSS which covers the div with a gray overlay does not appear to take effect. If I then scroll around the page the css does take effect. My best guess is that the browser has somehow determined that my div#block-svg is not visible and therefore it doesn't bother computing/applying the css to it.

Any suggestions would be greatly appreciated.

As a side note, there is definitely no possibility that this css is somehow conflicting with some other css.

Upvotes: 0

Views: 158

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

I can't reproduce your problem. However, I think you can do the same overlay technique with a pseudo element, and your JS can just add/remove a class that enables or disables the overlay.

document.getElementById('svg-cell').classList.add('overlay');
#svg-cell {
  position: relative;
}
.overlay:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  content: 'Please select an item on the right';
}
<table>
  <tr>
    <td id="svg-cell">
      <div id="svg-container">
        <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
        </svg>
      </div>
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions