Javascript View node overflow issue

looking for a solution to the following issue in KNIME 4.6.5:

How to reproduce the issue:
creating a component consisting of:

  1. ‘Empty Table Creator’ node, settings not relevant
  2. ‘Generic JavaScript View’ node connected to a.)
  3. ‘Text Output Widget’, connected to b.), settings not relevant

in the component layout configuration the text widget is below the view node.

content of the Generic JavaScript View node:

var body = document.getElementsByTagName('body')[0];
var html = '<h1>test</h1>';
html += '<div id="outerdiv"><div id="innerdiv">'
html += '<label for="longlist">very long list</label>'
html += '<select name="longlist" id="longlist" size="5" multiple>'
for (var i=1; i<100;i++){
html += '<option value="'+String(i)+'">Value'+String(i)+'</option>'
}
html +='</select></div></div>'
body.innerHTML = html;

=> creating a list with many elements, showing only 5 at the same time

issue discribtion:

if the dashboard/component is execute/shown the following happens:
the ‘Text Output Widget’ below the generated list of the javascript view nod is drawn very far down. The distance depends on the item count of the list and the scroll position of the list, so if the list is scrolled down the following widget moves up.

This leaves a wide gap in the dashboard.
How can the following widget drawn straight after the view node/list?
why the html overflow is behaving that strange?

solving attempts:

The JavaScript View node in the components “Usage and Layout” configuration is configured as a single column row with no change to the default auto size option, the height is set to min 300px. If this is changed to “aspect ratio” the gap is not present.
But as the JavaScript View Node content should grow with the window size the auto settings are required.

to add css overflow:hidden to the outerdiv; does not change anything

If I do it in pure html, Edge/Chrome are doing it as expected (without gap), even without any css

Background / target:

This problem is the compact version of the same issue occurring if you create a plotly.js diagram with a lot of series labels: the legend list is longer than the container of the plotly diagram, this triggers the generation of a scrollbar and the content/widget below the diagram is drawn with a wide gap, same as in the example above. The Dashboard gets almost unusable & user experience is very bad.

Thanks for your time & help

link to workflow: https://api.hub.knime.com/repository/Users/wsturmzfknime/Public/KNIME_Forum/ListOverflowIssue:data?version=current-state
link to html test:Test overflow behaviour of list

Hi @wsturmzfknime and welcome to the forum.

First of all, thanks for the very detailed bug report! We tried to reproduce it internally with the latest version of KNIME (5.1.2) but were unsuccessful, so it’s possibly already been resolved. If you are able to check with the newest version, that would be very helpful :slight_smile:

The behaviour in KNIME 5.1.2 is exactly the same as described

OK, thanks for letting us know. We’ll get someone internally to take a closer look. Sorry for the delayed response here.

Hey @wsturmzfknime,

sorry for the late response. The problem stems from the height calculation library we are using called iframe-resizer (https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/parent_page/options.md). This library is responsible to measure each of the element and determine the height of the elements to decide the height of the resulting rows. Our default for this library uses the viewLowestElement method, which means that it will loop through each and every HTML element and find the one with the lowest position. In your case this would be the select option that is the furthest down. While looping over the HTML elements it does not consider any CSS which explains why CSS does not has an effect on the output.

Long story short, to solve the problem simply change the resize method in the advanced tab to another one that has the expected result. For example viewTaggedElement which means that you can assign which element should be measured. You then have to add “data-iframe-height” attribute to the corresponding HTML element. In your example I would choose the select element like this html += '<select **data-iframe-height** name="longlist" id="longlist" size="5" multiple>'

I hope this explains it and helps.

Greetings,
Daniel

2 Likes

Thanks Daniel,
after short check I can confirm that this solution works for me

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.