CSS Streaks & Gutters in WebPortal

KNIME Analytics Platform
1

Hi all. I’m at my wits end here with AI making a whole load of bad suggestions.

I have a component with several widgets (text out, single select, table view, etc). They all have a background color set with a connected CSS Editor coloring the containers and all other places within that widget (knime-multi-line). In the ACL, with additionalStyles, I’ve colored the background of the row, column, & container that house the widgets.

All looks fine until I rezoom or reshape the window. I will see streaks on the bottom and (less frequently) the right side of the widget. The only way I’m able to color those streaks is if I manually manipulate the iframe-*-0-* level element. This level houses the content: type, resizeMethod, scrolling, sizeHeight, minHeight, maxHeight, etc. Unfortunately, the ACL will not let you add a “background-color” element to this iframe level.

ChatGPT has been giving me suggestions of adding a top level CSS Editor to the ACL (which you can’t do) or adding a top level Generic Javascript View which is supposed to make the background of that iframe transparent.

My end goal is to get the entire view’s background on the WebPortal background to blue. Any thoughts?

2

Hi @philcremer,

this sounds like a typical CSS issue and I personally have endure my fair share of “CSSing the hell “out of Knimes’ interactive view. Which is the GUI I suppose you mean. Cna you share more details and maybe a screenshot please?

Best, Mike
CTO @ DataNautics GmbH - Your KNIME-Experts
Contact: info@datanautics.gmbh // datanautics.gmbh // +49(0)170-325 713 9 // Linkedin
Daten Automatisierung für Finanz-, Produktion-, IT- und Marketing-Prozesse mit KNIME

3

Thanks so much for your response. Attached is a screen capture with pointers to the offending gutters. Again, you don’t always see them. Depends on the window size, it’s zoom, and so forth. You change it, and it goes away.

image
image1562×428 79.4 KB

In the ACL I’ve set the background color in the rows and columns. In the CSS Editor I’ve set the container and every other KNIME element I can think of to that background color. My Composite View Layout is structured something like this:

image
image1632×928 8.63 KB

And my ACL usually follows this:

image
image698×473 72.4 KB

4

Hi @philcremer,

you are most welcome. That is tricky to debug remotely / without the workflow. However, the gutters are something you cannot address by injecting the CSS via a additionalStyles declaration … that I am 150 % certian.

One reason is that the CSS is injected for that single container / iframe which means the style is full isolated. More about the iframe topic here:

The gutter is a typical CSS “issue” of the display / box layout applied. Even if you set margin, padding and border to zero, depending on the way how the HTML is generated, the gutter might not fully vanish.

The only option I see to address this, is by injecting CSS with important overwrites. But not via the legacy CSS node:

but via:

[...]
"content":[{
    "type":"html",
    "value":"<style>* {margin: 0 !important}</style>"
  }]
[...]

Though, this has a very high chance of causing undesired sideeffects.

I wonder if the declaration of a style element would work, though.

[...]
"content":[{
    "type":"style",
    "value":"<style>* {margin: 0 !important}</style>"
  }]
[...]

For additional debugging options, just a though experiement at the moment, this debugging appraoch I once develop might help inspecting and debugging the interactive view:

  1. Ensure Knime starts in MUI (Just an assumption as MUI is chromium browser based which should allow to remotely debug it)

  2. Open Power Shell / Terminal

  3. Navigate to your Knime install folder or launch knime .\knime.exe --remote-debugging-port=9222

  4. Open this URL in Chrome chrome://inspect

    image

    image770×450 20.4 KB

  5. Click Inspect and “go crazy”

    image

    image2559×1395 266 KB

Best, Mike
CTO @ DataNautics GmbH - Your KNIME-Experts
Contact: info@datanautics.gmbh // datanautics.gmbh // +49(0)170-325 713 9 // Linkedin
Daten Automatisierung für Finanz-, Produktion-, IT- und Marketing-Prozesse mit KNIME

1 Like