Problem hiding elements in grid

[Former Member]

Hello everyone,

it is the first time i start a discussion, but i really need help with my SAPUI5 app.

I have a sap.ui.layout.Grid with many elements in its content agregation. Depending on the binding the grid should show some elements or not.

You can do this by binding the visible property of the elements, the problem is that it keeps the blank space in the layout and i dont want that. If i use a GridData as a layoutData of each element and i bind the visibleL property, it works fine, the problem is when i also want to bind/set the visibleM and visibleS properties, because if i set the 3 properties to the same value, it looks like the application ignores them.

Here is an simple example of the code:

new sap.ui.layout.Grid({

  defaultSpan: "L2 M6 S12",
  hSpacing: 1,
  position: "Left",
  vSpacing: 1,
  width: "100%",
  content:
  [
  new sap.m.Label({
       text: "Company:",
     layoutData: new sap.ui.layout.GridData({
            visibleL: false,
            visibleM: false,
            visibleS: false,
            }),
  }).addStyleClass("class1"),
]
})

with this code, the label is still visible, but if i comment the 13th or 14th line, it works fine.

Anyone knows what is happening and how can i solve it?

Thank you very much,

Regards,

[former_member627579]

I had the same problem and solved it by a hack:

When a GenericTile is set to invisible, the class sapUiRespGridSpanInvisible is added to its outermost DIV. So you can completely hide invisible tiles with a bit of additional CSS:

html body .sapUiRespGridSpanInvisible {
    display: none;
}

[durukan_iscan]

I had same problem and i fixed it with expressionBinding.

<m:Button text="button">
    <m:layoutData>
        <layout:GridData visibleS="{= !!${model>/showButton} }"
                         visibleM="{= !!${model>/showButton} }"
                         visibleL="{= !!${model>/showButton} }"
                         visibleXL=""{= !!${model>/showButton} }"
                         span="{= !!${model>/showButton}}" === true ? 'XL1 L1 M1 S4' : '' }"/>
    </m:layoutData>
</m:Button>

[Former Member]

Yes, thanks, i tried, the point is if i do this the blank space of the label remains and i want the next element to fill that space.

[former_member182862]

Hi

Is it ok for you to bind also the visible property like this?

http://jsbin.com/gihuju/edit?html,js,output