sap.m.Table unable to display with full width when inside a scrollContainer

[former_member98260]

Hi,

I have an issue where i place a sap.m.table inside a sap.m.ScrollContainer and set the column width as default. In table and mobile display, everything comes as expected. But in desktop version, the table does not display full width and there is a weird gap between the right table border and the browser page. I can set the width of the individual columns as 100% and it works, but then the table looks a little weird and not nicely aligned. Is there another optimal solution where the table fits inside the scrollContainer without  having to write custom column width. My code is as follows:

<ScrollContainer class="scrollStyle" width="100%" horizontal="true" vertical="false">

     <Table width="100%" growing="true" visible="true" fixedLayout="false"growingThreshold="20" >

          <columns>

                <Column mergeDuplicates="true"><header><Label text="Column1" /></header></Column>

                <Column><header><Label text="Column2" /></header></Column>

                <Column><header><Label text="Column3" /></header></Column>

                <Column><header><Label text="Column4" /></header></Column>

                <Column><header><Label text="Column5" /></header></Column>

                <Column><header><Label text="Column6" /></header></Column>

                <Column><header><Label text="Column7" /></header></Column>

          </columns>

     </Table>

</ScrollContainer>

Any suggestions would be highly appreciated.

[Former Member]

Hi Abinash,

In ScrollContainer's width parameter, use 'rem' instead of '%'

Regards,

Vishnu

[former_member98260]

Thanks Vishnu. But i think adding rem makes the width static and not dynamic. When i change the size of my window, it displays incorrectly again.

[Former Member]

Hi Abinash,

Yes it will make the width static.

Alternatively you can change the width accordingly using sap.ui.Device.system.<desktop, phone or tablet>.

Regards,

Vishnu

[saivellanki]

Hi Abinash,

Not sure, what the issue might be? Can you create a plunk or JSBin with full code related to Table and ScrollContainer containing data.

One alternative without scroll container would be: Plunker

Regards,

Sai Vellanki.

[former_member98260]

Hi Sai, i will get back with the code in JSBin to make the question more clear. In the meanwhile i did find a workaround by adding .sapMScrollContScroll {display: flex;} in the css