CODEWITHSUNDEEP
scrollsapui5horizontal-scrolling
user2271933
user2271933

Reputation: 491

Attach table horizontal scroll to parent container (sapui5)

I have a sap.ui.table component which is wrapped inside a sap.ui.layout.VerticalLayout. The thing is that if the table columns are re-sized(enlarged) , the table will get a horizontal scroll-bar. So far so good, but ,my question is, if there is any way I can place the table horizontal scroll-bar on the parent container (so on the VerticalLayout component), this way the user won't be required to scroll the rows all the way down to get access to horizontal scroll-bar.

I already tried to set the vertical layout component width to "auto" and that will get me the desired behavior, but in that case the table will not be expanding to 100% of the page(it works fine on chrome tho, the problem of not going 100% when auto is present on IE (IE11 in my case)) . So basically, I need to set the width of the parent to 100% so table and container are expanded to the right margin of the page, but if the horizontal scroll-bar is needed, I need to be displayed on the container rather than on table.

I am really out of ideas so any help,tips ,would be great, thanks!

UPDATE: I added a jsFiddle that replicates the structure of the page and my issue too. I must add that the problem is there only in IE(i use IE11).

Upvotes: 2

Views: 5505

Answers (1)

user2271933
user2271933

Reputation: 491

In case there will be other people facing this problem, this is the solution that I found:

1) On wrapper container creation set width to 100%, this way , the table will be expanded to 100% on all browsers.

2) Attach a columnResize function on table like this: 

columnResize: function(e){
    applyScrollOnContainer();
}

3) On applyScrollOnContainer(), simply change the width of your container to auto, this way the table scrollBar will be placed on container.

sap.ui.getCore().getElementById("yourContainerIdHere").setWidth("auto");

4) You may also add a check on document.load. If the table scroll-bar is displayed, again, attach it to the container.

var scrollDisplay = $("#tableIdhere .sapUiTableHSb").css("display");


if(scrollDisplay === "block"){
    sap.ui.getCore().getElementById("ORDERS_VIEW_FIRST_TABLE").setWidth("auto");
}
else{
    sap.ui.getCore().getElementById("ORDERS_VIEW_FIRST_TABLE").setWidth("100%");
}

Upvotes: 3

Related Questions