Styling a hierarchical layout

Flow
1

Hi,

I need to create a querybuilder for my vaadin application. It has the following component tree:

  • GroupPanel extends CustomField for my operation (and | or ) query class, css-class = group-panel
    [list]
  • VerticalLayout
    [list]
  • A component with buttons to control
  • HorizontalLayout with sub criteria, css-class = sub-criteria

    [/list]

    [/list]

Each sub criteria can either be another GroupPanel or a CriterialLine extends CustomField whit css-class critera-line.

What I want is that the sub-criteria are indented by level and have a graphic tree indicating their structure. The indention is done with scss:

.query-builder .sub-criteria { padding-left: 2 *$v-layout-margin-left; } But how to create the graphic tree?

Thanks for hints

Daniel

2

Hey Daniel,

Could you provide an example of what you would like to accomplish?

3

Hey Joacim,

it should be someting like
http://querybuilder.js.org/demo.html
 The GroupPanel and CriteriaLine classes in my code are the Panle and Rule in the jquery querybuilder.

My question is about the tree graphic on the left. Copy and paste did not work :frowning: .