Hi,
In Vaadin 14.0.0rc6, I recreated a sort of V8’s GridLayout
extending Div
and based on CSS Grid Layout.
Occasionally, when I set a component in a “cell”, it is attached to the wrong one, and this is confirmed by debugging the HTML with Firefox Inspector (F12).
I.e.: myDiv.setComponent(3, 0, myComponent)
attaches the component to the cell identified by (column,row) 2,0 instead of 3,0.
<div style="grid-template-columns:auto auto auto auto auto;grid-template-rows:auto auto;display:grid;gap:1.00em">
<vaadin-combo-box style="width:100%"></vaadin-combo-box>
<span></span>
<vaadin-button theme="icon tertiary" style="width:32px" class="mzRightPositioned"> <!-- THIS IS IN THE WRONG PLACE: 2,0 INSTEAD OF 3,0 -->
<img src="frontend/images/16-delete.png" slot="prefix">
</vaadin-button>
<span></span>
<vaadin-button theme="icon tertiary" style="width:32px" class="mzRightPositioned">
<img src="frontend/images/16-add.png" slot="prefix">
</vaadin-button>
</div>
However, debugging the Div’s Element
with .getOuterHTML()
shows the correct code:
<div style="grid-template-columns:auto auto auto auto auto;grid-template-rows:auto auto;display:grid;gap:1.00em">
<vaadin-combo-box style="width:100%"></vaadin-combo-box>
<span></span>
<span></span>
<vaadin-button theme="icon tertiary" style="width:32px" class="mzRightPositioned"> <!-- THIS IS IN THE PROPER PLACE: 3,0 -->
<img src="frontend/images/16-delete.png" slot="prefix">
</vaadin-button>
<vaadin-button theme="icon tertiary" style="width:32px" class="mzRightPositioned">
<img src="frontend/images/16-add.png" slot="prefix">
</vaadin-button>
</div>
So, the question is: why is the displayed HTML (which, basically, is generated using Div’s .addComponentAtIndex()
and .remove()
) not in sync with the one from .getOuterHTML()
(which is correct)?
Refreshing the page with F5 seems to resync the displayed HTML with the internal one…
Thanks,
MZ