MatrixLayout / CSSSize in HTMLView

[Former Member]

Hi all

I'm trying to create a MatrixLayout inside a HTML view with 1 column, 2 cells.

I'd like to control the widths property mentioned in the documentation - so far without luck:

I just don't know what kind of data-property CSSSize expects, those I've tried so far don't seem to have any effect.

There is no error in the console, no entries even with dbg-mode.

<div data-sap-ui-type="sap.ui.commons.layout.MatrixLayout"
  data-columns="2">
  <div data-sap-ui-aggregation="widths">
  <div data-sap-ui-type="sap.ui.core.CSSSize" data-width="50px"
                                         data-value="50px"
                                         data-text="50px"
                                         width="50px"
                                         value="50px"
                                         ></div>
  </div>
  <div data-sap-ui-aggregation="rows">
  <div data-sap-ui-type="sap.ui.commons.layout.MatrixLayoutRow">
  <div data-sap-ui-aggregation="cells">
  <div data-sap-ui-type="sap.ui.commons.layout.MatrixLayoutCell">
  <div data-sap-ui-aggregation="content">
  <div data-sap-ui-type="sap.m.Text"  data-text="0" id="lvalue"></div>
                                                            </div>
                                                  </div>
  <div data-sap-ui-type="sap.ui.commons.layout.MatrixLayoutCell">
  <div data-sap-ui-aggregation="content">
  <div data-sap-ui-type="sap.m.Slider" id="txtLeichtVerletzt"
  class="my-txtLeichtVerletzt" data-name="txtLeichtVerletzt"
  data-value="0" data-min="0" data-max="500"></div>
                                                            </div>
                                                  </div>
                                        </div>
                              </div>
  </div>
 </div>

Any ideas?

Thanks,

Regards

Phil

[Former Member · Accepted solution]

Must have been a typo on my part while debugging this..

For anyone else running into this, this is how it works:

  <div data-sap-ui-type="sap.ui.commons.layout.MatrixLayout"
                    data-columns="3" data-widths="40px,200px">
                    <div data-sap-ui-aggregation="rows">
                              <div data-sap-ui-type="sap.ui.commons.layout.MatrixLayoutRow">
                                        <div data-sap-ui-aggregation="cells">
                                                  <div data-sap-ui-type="sap.ui.commons.layout.MatrixLayoutCell">
                                                            <div data-sap-ui-aggregation="content">
                                                                      <div data-sap-ui-type="sap.m.Text" data-text="0" id="lvalue"></div>
                                                            </div>
                                                  </div>
                                                  <div data-sap-ui-type="sap.ui.commons.layout.MatrixLayoutCell">
                                                            <div data-sap-ui-aggregation="content">
                                                                      <div data-sap-ui-type="sap.m.Slider" id="txtLeichtVerletzt"
                                                                                class="my-txtLeichtVerletzt" data-name="txtLeichtVerletzt"
                                                                                data-value="0" data-min="0" data-max="500" data-change="lChange"></div>
                                                            </div>
                                                  </div>
                                        </div>

                              </div>

                    </div>

          </div>