Don't set overlay width/height via JS (it fails if window is resized)

[ibc]

When the intro starts a layout is created as follows:

<div class="introjs-overlay" style="width: 859px; height:806px; top:0px;left: 0px;opacity: 0.8;"></div>

If the user resizes the window the overlay just "fails" and does no longer fill the entire screen, which becomes really annoying.

I've just verified that, instead of setting inline style parameters via JavaScript, it's much better to define the CSS as follows:

.introjs-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;

  // remaining CSS

Just that. It works and it works better.

Of course, the opacity can be still set via JS as it depends on an API call.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.