CODEWITHSUNDEEP
javascripthtmlcss
dfnet82
dfnet82

Reputation: 19

How can I stop an inline style from being modified by an outside script?

On a page some script is running and is accidently controlling the height of an inline style.

Not sure what script is modifying the height property.

<div class="vgca-iframe-wrapper wpfa-initialized" style="height: 6424px;">

The height keeps going up and pushing all elements past the footer.
Trying to lock this class from being edited.

So far tried controlling the element in the css stylesheet to keep it locked at 3000px..

div.vgca-iframe-wrapper.wpfa-initialized {
    height: 3000px !important;
   
}

to no avail.. any help appreciated. Open to ideas how to prevent this css style element from being changed.

Upvotes: 1

Views: 65

Answers (1)

Peter Pointer
Peter Pointer

Reputation: 4170

Using max-height

The CSS property max-height will give the height an upper limit, even if height is higher. See snippet below:

div {
  background-color: #a0a;
}

div.vgca-iframe-wrapper.wpfa-initialized {
    height: 20px !important;
    max-height: 20px;
    height: not-allowed !important;
}
<div class="vgca-iframe-wrapper wpfa-initialized" style="height: 80px;">

Used 20px for your height and 80px for the height in the style attribute. As you can see the div stays and 20px height.

We don't even have to make max-height !important.

Upvotes: 1

Related Questions