CSS in 4.2.2

Hi Knimers,

I am upgrading my workflow built in 3.7.1 to 4.2.2 and I noticed the CSS is not the same between widget and quickform.

For instance the boolean input style is not the same than the boolean widget one (please see image1;png).
image1

But if I upload the component to the webportal the style is identical for the both elements (please see image2.png).
image2

So I would like to know why the style is not the same between the analytics platform and the webportal ?

Should I modify a parameter in the KNIME server to use the new style or should I modify my Analytics platform to use the same style of the server ?

Regards,
Joel

Hey Joel,

Thanks for your post! It’s great to see you upgrading your KNIME Server to the latest version. I think you’ll really enjoy the improvements we’ve been working on.

As for your issue with the Widget styles, I think I have an idea of what the problem is here. I have a couple questions. First, are you opening the workflow in the Legacy WebPortal or with the new WebPortal UI? You can tell the difference by the URL (Legacy contains a # and new UI will contain webportal/space without the hash). The updates styles are only meant to display in the updated WebPortal UI, so this could be one of the problems.

The other possibility is that the component needs a configuration change. If you load a workflow which was created with a version older than v4.1.0, the components will use the old styles by default. This can be changed with the setting Legacy Mode which was introduced in v4.1.0.

To update this setting or check what is currently being used, open the Visual Layout Editor from within the component.
image
In the left column you can see the Use legacy mode checkbox is selected for this component. This will render the contents using the old styles. If you uncheck this box, the workflow should use the updated styles when viewed in the new WebPortal UI.

Additionally, you can change this on a node-by-node basis in the Advanced Layout tab of the Visual Layout Editor. This is helpful if you have heavily customized styles for a particular node and want to preserve the appearance but still use the updated UI for the rest of the component.
image
As you see in this image, the node (within the content field) has it’s own useLegacyMode flag which can be changed here directly.

Hopefully one of these two solutions works for you. Let me know if this helps!

Best,
Ben

2 Likes

HI @blaney

Thanks for you reply and the tips.
You are right, regarding the webportal URL.

Does it mean that if I replace the # by space, I will use the new webportal style or should I enable an option at the configuration level?

I read the documentation and if I understood, it is recommended now to modify the style at the template file. Is it correct ?

Does the option useLegacyMode mode will exist in the next releases?

In fact, I developed some visualization using the generic javascript view (D3 + CSS) and without the CSS, the visualization will not work anymore ?

Regards,
Joel

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