Component PolymerTemplate fullwidth issue

Flow
1

using <vaadin.version>14.0.0.rc6</vaadin.version>

I have created 2 component using PolymerTemplate .
I have adding them to the MainView

        addressForm = new AddressForm();
        formContactdetails = new FormContactdetails();

        Button button = new Button("Click me",
                event -> getItem ());

        add(addressForm,formContactdetails,button);

The first component width is fulscreen
but the second component width is only 60% of the page with
(image1.png attached)

(Image2.png) has the “Chrome inspect html”)

Have attached the 2 PolymerElement

  • form-address.js
  • form-contactdetails.js

Expected behaviour :
The second component should also have full-width of the page.

Not sure what i am doing wrong.

17792958.png
17792961.png
17792964.js (2.64 KB)
17792967.js (1.76 KB)

2

Hi Andrew,

In your form-contactdetsils.js there’s an extra . Try to remove it and see it if it helps.

3

Thanks Martin

Did remove the extra </vaadin-form-item>
but it did not make a difference

4

If i add 2 textfield items to the form then i shows full page(fullpage1.png)

 <vaadin-form-item>
  <label slot="label">Portion Number</label>
  <vaadin-text-field class="full-width" id="portionNumber" value="" minlength="" maxlength="" tabindex="0" autofocus required prevent-invalid-input="" has-value=""></vaadin-text-field>
 </vaadin-form-item>

 <vaadin-form-item>
  <label slot="label">Region</label>
  <vaadin-text-field class="full-width" id="regionName" value="" minlength="" maxlength="" tabindex="0" autofocus required prevent-invalid-input="" has-value=""></vaadin-text-field>
 </vaadin-form-item>

if I remove them and leave have <vaadin-combo-box> as the first item. it seems to cause the commponent not showing full width

<vaadin-form-item colspan="2">
  <label slot="label">Search Type</label>
  <vaadin-combo-box class="full-width" id="searchType" on-change="searchTypeChange"></vaadin-combo-box>
 </vaadin-form-item>
 <vaadin-form-item id="searchValueFormItem">
  <label slot="label" id="searchValueLabel">Identification</label>
  <vaadin-text-field class="full-width" id="searchValue" value="" minlength="" maxlength="" tabindex="0" autofocus required prevent-invalid-input="" has-value=""></vaadin-text-field>
 </vaadin-form-item>

(fullpage2.png)

17793329.png
17793332.png