How To Use CSS Style To Group Quickform Elements

[scottrichardmcleod_yahoo.com]

I’ve been looking for an example of using CSS Editor to group multiple quickform elements together with a box around them. For example assume I have 3 check boxes that I want to surround with a frame that includes a title. I can’t find any working example in the Knime Hub. Anyone have a sample they can share?

[josegallardo]

Hi @scottrichardmcleod_yahoo.com and welcome back to the KNIME Forum.

You can use Output Widget Nodes before and after your form to get something like this: (note that there are three elements in this view: Output Widget, File Upload Widget and another Output Widget).

Inside of your Output Widget Nodes you can implement your CSS as you desire inside of the HTML element.

However, and this may fit better with exactly what you want, there is the possibility to add a border and other elements to style your node (note that it has to be inside the component).

1. Click on Node Usage and Layout
2. Navigate to the Advanced Composite View
3. Add your style, e.g. between “type” and “columns” as an “additionalStyles” line. Note that you have to correctly assign each node in the composite view.

As a result you will get something like that:

I hope this solution will work for you.

All the best,

Jose.

[scottrichardmcleod_yahoo.com]

Thank you Jose. I have been able to get lines and bars on the top or bottom of a Knime quickform screen and even around individual widgets and/or input . But what I really want to do is place “Groupboxes” around sets of controls to logically group them. For example see the image below. I could create an image and place it in the background but managing that with window resize events makes this less desirable.