additionalClasses Examples

KNIME Analytics Platform
1

Hi all,

Regarding the Advanced layout settings, I’ve figure out the additionalStyles where you can insert special CSS that apply to Widget or View node rows or columns.

I have not seen any documentation on the use of additionalClasses. The documentation discusses it “can provide an array of class names to append to the created HTML row element”. And that’s about it.

Are there any known “Related Workflows” that illustrate the additionalClasses functionality? So many thanks in advance to your assistance on this topic.

Phil

2

Hi Phil,

I actually looked into this and tried to make additionalClasses work - unfortunately without success.

Therefore definitely also curious how to make this work - more specifically:

  • where to define the CSS classes? Does it work somehow in the advanced editor for composite views?

Maybe someone from the KNIME team can shed some light into this :slight_smile:

2 Likes
3

I randomly got it to work for a node this way:

image
image1009×646 79.5 KB

image
image904×617 33.5 KB

But I still can’t figure out how to get the “Next” button to be a different color.

1 Like
4

awesome - how did you work out to use --theme-button-background-color ?

My gut feeling is that the next button as a Hub feature needs to be configured on the hub? Again just a gut feeling…

Going to proceed with some work on team plan and will at least check out if inspecting the html behind the button may reveal something that is worth trying…

For any KNIME Team Member: I’d still be keen to learn how to use additionalClasses :slight_smile:

1 Like
5

I think it was from this forum article… honestly can’t remember which rabbit hole I went down yesterday.

Refresh Button Widget and Theming - KNIME Analytics Platform - KNIME Community Forum

There isn’t a lot of structured content on this for all of the different options. That would be something that would be very useful to have as a roadmap.

inspecting the HTML is a great idea! going to try that.

1 Like
6

Ty!

Btw. I just experimented a bit (AI-assisted…) and think I cracked the back of how to use additional classes…

First managed to do this:

image
image1001×102 5.57 KB

Advanced Layout:

{
  "parentLayoutLegacyMode" : false,
  "rows" : [ {
    "type" : "row",
    "columns" : [ {
      "content" : [ {
        "type" : "view",
        "nodeID" : "297",
        "scrolling" : false,
        "resizeMethod" : "viewLowestElement",
        "autoResize" : true,
        "useLegacyMode" : false,
        "resizeTolerance" : 5,
        "sizeHeight" : true,
        "sizeWidth" : false
      } ],
      "widthXS" : 12
    } ]
  }, {
    "type" : "row",
    "additionalClasses" : [ "my-extra-row" ],
    "columns" : [ {
      "content" : [ {
        "type" : "html",
        "value" : "<style>.my-extra-row { background-color: red; color: white; padding: 10px; }</style>"
      }, {
        "type" : "html",
        "value" : "This is a new row below the view node, with a custom class named 'my-extra-row'."
      } ],
      "widthXS" : 12
    } ]
  } ]
}

And then this (note: this is just a static UI - clicking buttons etc. does not do anything.

image
image1007×552 12.3 KB

1 Like
7

That’s great!

I thought adding this CSS node to the Uploader widget would do the trick after finding the custom CSS needed with inspection but it did not override the bottom button at all. :frowning:

image

8

Maybe try to overwrite it either as additionalStyles (how you did the Refresh button) or see if you can integrate into above example - trick is to have in your column / row an element of type html where you define the classes inside a style tag…