Color input/entry fields of widgets

Hello,

I am using various widgets and input nodes such as “String Input” for user interaction. I would like to color some of the entry/input fields, so that the user enters values e.g. in an organge instead of a white field. Is it possible to change the color of the entry field with the CSS Editor? If yes, how would I do that?

Best Saskia

Hi @saskia

Yes, this is possible! However, you will have to enable legacy mode for the components in which your widgets reside. This is a check box within the layout editor (located in the tool bar. Open when you are inside the component)

Fields you can style in each node are listed here: CSS Styling for JavaScript Views and Widget/Quickform Nodes (Legacy)

Here is a small example workflow:
css-example.knwf (12.3 KB)

image

Let me know how this goes for you :slight_smile:

Kind regards
Marvin

ps. don’t forget to set the custom CSS flow variable in the visualization widgets.

2 Likes

Thanks a lot. That was exactly what I was looking for. I just had to change “.knime-string” to “.knime-single-line” in the CSS editor so that it also works for the value selection widget. .

I have just one more question. Is there a function that would make it possible to have the entry field in orange at the beginning (default - no text), but as soon as the user enters or selects something the color will change e.g. to white again?
I guess it will not be possible, but it would be a nice to have maybe for the future.

Best Saskia

1 Like

Hi @saskia

sorry for the late reply.

I’m afraid I wasn’t able to build that with css, though it should be possible with a Generic JavaScript View node. However, it isn’t exactly straight forward and I don’t have an example ready right now. Maybe we have a JS expert on the forum, that has an example to share? :slight_smile:

Kind regards
Marvin

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