Setting responsive steps and label position in Designer

Is it possible to set responsive steps and label position form a vaadin-form-layout in the designer? I’m trying to make a form with labels ASIDE for larger screens and TOP for smaller screens. This works fine in Java, but don’t see a way to set it in the designer.

Thanks in advance

Hello Martin, sadly right now it’s not possible to set this properties from edit mode. BUT you can set them by changing the template manually in source mode.

Thanks Stepan,

I tried adding it to the bakery demo user-view:

<vaadin-form-layout class="custom-steps">


  window.addEventListener('WebComponentsReady', function() {
    var formLayout = document.querySelector('vaadin-form-layout.custom-steps');

    formLayout.responsiveSteps = [
      {minWidth: 0, columns: 1, labelsPosition: 'top'},
      {minWidth: '30em', columns: 1}

It seems to fail on query selector returning null. Any suggestions to what might cause this? This is inside a polymer template in case that makes a difference.

This happens because your layout is under shadowRoot. If you are inside Polymer template you can use special syntax to access the element: this.$.elementId or *this.$[‘elementId’]
*. You can check login-view.html in Bakery and check how they tweak login action.

Alternatively, instead of using JavaScript, you can add the responsive-steps property to your vaadin-form-layout in properties panel of Designer and then type in the JSON:

 {"minWidth": 0, "columns": 1, "labelsPosition": "top"},
 {"minWidth": "30em", "columns": 1}

Notice that Polymer is pretty picky about the syntax of the JSON array. You have to use double quotes for all keys and string values.

The attached image shows how to add a property in IntelliJ IDEA in Designer 3.0.0. If you’re using Eclipse, you can add the property using the + icon on the Properties view toolbar.


Stepan and Anssi, thanks for your tips. Works flawlessly now!! I ended up adding the responsive-steps to the vaadin-form-layouyt in the designer.