CSS Is Still Not Supported By "Text Output Widget" In The "Improved" Interactive View?

As of KNIME 4.7, the “Text Output Widget” still does not support the modification of text visualization through CSS style sheets within the component’s “improved” interactive view (that being the improvements made to a widget’s user interface in KNIME 4.2).

Below is a simple example – I simply want to make the text output red via the “CSS Editor” node:

image

I provide it with the following CSS:

.knime-qf-title {
color: red;
}
.knime-qf-text {
color: red;
}

And set this to the “customCSS” flow variable of the “Text Output Widget”.

However, within the component view, the color changes are not applied:

In checking a previous post which had the exact same issue (see Can't get custom CSS to work in Text Output Widget), the proposed “solution” was to enable the “use legacy mode” within the “Composite View Layout” panel:

However, the “solution” to “use legacy mode” is not satisfactory whatsoever.

While utilizing legacy mode does indeed have the “Text Output Widget” display the desired color, it will also revert all the other widgets within the view to their less desirable “legacy” counterparts.

In my very simple example, you will note that while the text is now in red, the string field doesn’t extend across the screen anymore due to it now being the “legacy” version:

If I only had a string field with the text, I may be able to live with it, but in my production dashboard it reverts all the sliders and selectors to their less polished versions. This is exacerbated by the fact that I several “pages” (i.e., separate components) within my dashboard you click through, so for one page to have “legacy” versions of widgets and other pages have “modern” versions of widgets will create an inconsistent user experience.

Yes, I can be clever and encase each individual “Text Output Widget” within their very own component, then set each one of those components to use the “legacy” version, and finally set those components within a larger component that does NOT use the “legacy” version so other widgets can still leverage the “improved” versions within the same view… but that’s simply annoying to nest components like that repeatedly.

Are there any plans to update the “modern” interface to support these CSS fields?

This has been a consistent pain point for us in the development of dashboards and find it frustrating that we have to consistently swap between “legacy” and “modern” views to get different benefits from each.

Thanks! :slightly_smiling_face:

2 Likes

Hey @jude_ran,

currently there are no plans to allow custom css in the new widgets.
For your case I see two “solutions”. They both might still not be ideal, but will help you to achieve your desired form.

  1. for the text output widget you can also use html instead of plain text. With that you can define something like this to achieve what you want.

<p style=“color:red”> your text goes in here </p>

  1. as you already mentioned you can use the legacy mode to allow custom css. To not show all widgets in the legacy mode you can also decide for each node if it should show up in the legacy or the normal mode in the advanced tab of the layout editor.

Personally I would go with option 1, as I don’t like to use legacy stuff, but in theory both should work.
Hope that already helps and sorry for the inconvenience.

Greetings,
Daniel

2 Likes

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