Setting width of VerticalLayout in Vaadin Designer is IGNORED if object is referenced in corresponding java code - vaadin

Question

If one creates a vertical layout class using Vaadin Designer (in Vaadin 14) and sets its width to some fixed value (eg 3%) and one has a reference to that vertical layout component in the corresponding java code, Vaadin will IGNORE the width setting. Curiously, this bug dissappears if one does NOT reference the vertical layout class in the java code. Here's a working test case to illustrate the bug. For now, my "hack" has been to avoid referencing the object in my java code, or if I must, then I think I need to explicitly reset the width logic in the java code itself. Any thoughts?
import {html, PolymerElement} from '#polymer/polymer/polymer-element.js';
import '#vaadin/vaadin-ordered-layout/src/vaadin-horizontal-layout.js';
class UiTestview extends PolymerElement {
static get template() {
return html`
<style include="shared-styles">
:host {
display: block;
height: 100%;
}
</style>
<vaadin-horizontal-layout class="content" style="width: 100%; height: 100%;">
<vaadin-vertical-layout id="left" style="width: 3%;background-color:blue">
<label>left label</label>
</vaadin-vertical-layout>
<label style="flex-grow: 1;background-color:red">Label</label>
</vaadin-horizontal-layout>
`;
}
static get is() {
return 'ui-testview';
}
static get properties() {
return {
// Declare your properties here.
};
}
}
customElements.define(UiTestview.is, UiTestview);
and the corresponding java code:
package org.vaadin;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.template.Id;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.templatemodel.TemplateModel;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.polymertemplate.PolymerTemplate;
/**
* A Designer generated component for the ui-testview template.
*
* Designer will add and remove fields with #Id mappings but
* does not overwrite or otherwise change this file.
*/
#Route("testview")
#Tag("ui-testview")
#JsModule("./src/ui-testview.js")
public class UiTestview extends PolymerTemplate<UiTestview.UiTestviewModel> {
#Id("left")
private VerticalLayout left;
/**
* Creates a new UiTestview.
*/
public UiTestview() {
}
/**
* This model binds properties between UiTestview and ui-testview
*/
public interface UiTestviewModel extends TemplateModel {
// Add setters and getters for template properties here.
}
}

Answer 1

Basically the Java-side of Vaadin (at least in Vaadin 14) does not know about any initial client-side state from the template. That's why Java-getters will often not return values set in your template. Furthermore, VerticalLayout sets setWidth("100%") in its constructor which may actually override a width set in your template once you map it to your template. This is something that has been improved in Vaadin 18. I doubt this will be backported to Vaadin 14.