iframe-resizer
iframe-resizer copied to clipboard
davidjbradshaw
<option> tag should never be consider as a displayed element
With Firefox, if you have a <select> tag with a large number of <option> elements, the last <option> element can be under the last displayed element.
The example beneath shows a HTLM page with a label and a select element on the same line. Hidden <option> tags are revealed by inspecting sources with debugging tools.
With option "heightCalculationMethod : 'lowestElement'", iFrameResize() method consider the last <option> tag as the lowest element. So the calculated frame size is wrong. It happens every time the last <option> tag is under the last displayed element.
Calculation method should ignore tags that are not displayed (<option>, <optgroup>, and more ?).
FYI : with MS Internet Explorer, calculation is good.
It also effects the rendering of the page, i would think this is a firefox bug and not one of iframe resizer.
No web browser is perfect, web standards are not perfect, and web browsers does not respect standard fully. Whether it is a Firefox bug or not iFrameResizer loses all interest with such an issue.
In my opinion, it is a good thing that libraries like iFrameResizer provide an abstraction layer that permit to use them in the same way whatever is the web browser rendering implementation.
I can help solving this. I noticed that calculation is correct with css "option {display: none;}". I did not forked yet because I presume it would be a modification that involve the core and could be quite tricky.
I'd welcome a PR if you want to take a look at it. I'm super busy on other things for the next few weeks.
Agree it is yet another thing we should work around.
Normally best to avoid playing with CSS in the iFrames as don't want to mess up the page.
Perhaps the function that tests for the elements position needs to check for a list of tags to ignore as well.
It would be also good to raise a bug on FireFox.
Thank you very much for that! I had the same issue on my project. I am using angular material and to solve it, I have changed this code to something like this:
return document.querySelectorAll('body :not(.mdc-list-item__primary-text):not(.mat-ripple):not(.mat-mdc-option):not(option):not(optgroup)');
@edvaldoperreira sad to see this is still an issue, and nice fix. I will add :not(option):not(optgroup) to the code base and think about away for users to add library classes that cause an issue.
Thinking a bit more, I'm going to check an element is visible, before working out it's position.