Css editor is not working in my knime version 4.5.1

KNIME Analytics Platform
1

I am trying to use css editor node in knime 4.5.1 version to give some formatting and also to hide input of the user on web in string input widget using css code but even adding css code in css editor and passed that through variable in string input widget then also it’s not doing any changes in the string input widget.

Basically i am trying to create password input box on web in which when user is adding their password in input box and input should be hidden by square, circle or disc as we do when entering our password during login in into our mail. i was able to do it in knime 4.2 but i am not able to do it in knime 4.5

So guys if you have any suggestion pls guide.

Thanks.

1 Like
2

Hello, welcome to the KNIME Forum!
Could you please share with us a simple workflow (CSS Editor + the modified widget are enough) so we are able to investigate?

Cheers,
Emilio

1 Like
4

You need to turn on Legacy mode on in order for widgets to work with CSS in the newer versions. (The option is just above JSON on the left of the screen when you are adjusting the interactive view layout) However, you will lose some modern options. Re-execution goes away, which was a deal breaker for me. I would really like to have that custom css option back for widgets again without losing capabilities though…

CSS will still work with JavaScript tables and visualizations though even without legacy mode.

2 Likes
5

Thank you so much @iCFO your suggestion work perfectly but i didn’t understand which modern options i am gonna loose and how this Re-execution works if you guide me very helpful for so i wil take care of it and also i am bit confuse to how to write css code in knime css editor like when to use .knime-qf-title and all or is their any documentation for this which i can refer to write css code.
Thanks again for your advice.

6

The only things that I have noticed loosing is the re-execution (automatically executing downstream on settings changes) and their newer modern look. The Re-Execution setting is usually on the second tab in the config windows.

This site gives some info on accessing the areas that can be customized by CSS Editor. I also tend to search the forum for specific examples.

https://docs.knime.com/2021-12/analytics_platform_css_guide/index.html#_css_styling_in_knime_analytics_platform_4_2

1 Like
7

Thanks @iCFO your given link actually very useful and ya actually it’ modern look way better than legacy one.

1 Like
8

Sorry to bother you again @iCFO but i am not able to use another widget in my workflow
Means i am trying to add some description before that string input widget but i am not able to see any description above it even after i tried with the legacy mode then also for your reference i have also attached my small workflow.
Thanks.
css_editor_test.knwf (10.9 KB)

9

It doesn’t look like the Text Output Widget is supported in Legacy Mode. I turned off Legacy and it worked on my end.
css_editor_test2.knwf (11.0 KB)

10

Oh but i want css functionality too when i turned off legacy css editor is not working btw which version of knime you are using. because in knime 4.5.1 when i am adding Text Output Widget even legacy mode is turned off then it is adding text after other widgets and if i legacy mode turned on then it is not showing any text @iCFO.
Thanks for your reply.

11

I am using 4.7.2 for production work, but I did this workflow test in the version 5 pre-view. Are you restricted from updating to 4.7.2 by company policy? It looks like you found anther legacy mode trade off with the loss of the Text Output Widget. I have personally settled with Legacy mode off. This unfortunately keeps me from customizing widgets until they support custom CSS on widgets again, but at least I can still customize javascript views like tables and charts without the loss of functionality of going with Legacy Mode.

I know that there are ticket requests for adding back custom CSS support for widgets. Can you add us to the request list @ScottF? The giant font size of those labels really drives me crazy… :upside_down_face:

1 Like
12

So can we use Javascript Generic Node for formatting of Text Ouput Widget @iCFO and ya we are restricted from updating to 4.7.2 by company policy.
And Thank you so much for your reply and your suggestion it was really very helpful and also can you guide me where can i see the list of issue for which ticke is been requested so i can check which functions on knime we are still facing problems.

13

@KnimeSpecial - I don’t believe that there is any way to customize “widgets” without the Legacy mode on, so we are forced to make an all or nothing decision. In your instance the text output widget isn’t even supported in Legacy Mode, so I doubt it would be possible with that node without underlying platform changes.

Here is what I use to insert titles and headers with custom CSS flexibility because it is Generic Javascript View based. I usually have to open it and adjust it, but it is pretty flexible when you find the right CSS editors and settings.

You can vote for ideas on the Feedback category of this forum, but there is no published list of KNIME’s internal tickets that I am aware of. I just knew that there was a ticket on this one because I remember this custom CSS widget issue coming up on several threads. I always just tag @ScottF for ticket requests, which I am sure he just loves… :rofl:

1 Like
14

Here it is with the title added using the Data App Header component with the KNIME logo and styling, but I adjusted the size and spacing a bit for you.

css_editor_test3.knwf (510.1 KB)

1 Like
15

Thank you so so much @iCFO for your help for as of now i can use this solution which you have given but actually knime should give css editor functionality to format widget also and thanks once again @iCFO for your help.

1 Like