cancel
Showing results for 
Search instead for 
Did you mean: 

Disable/Hide scroll bar of scroll container on fullscreen button of chart container

raina_goyal
Participant
0 Kudos

Dear Experts,

I am using a chart container in which I have used a table which is inside scroll container to fix the header of the table. I have set the height of scroll container to 40em, which is working fine but now the requirement is changed a little bit that when on fullscreen of the chart container( i.e. table) should not have scroll bar i.e. only page scroll should be there ( browser's scroll) not the table scroll.

I tried to change the height of scroll container on full screen of chart container to 100% but it changes initially also.

I want like on normal screen height should be 40em and on full screen it should be like auto/100%.

that = this;
var oChartContainer = this.getView().byId("idChartContainer");
oChartContainer._oFullScreenButton.addEventDelegate({
"onAfterRendering": function() {
var oScrollCont = that.getView().byId("mainTable");
oScrollCont.setHeight("100%");

By adding above code in onInit(), it solves the fullscreen problem but now my initial screen table doesn't have scrollbar. i.e. table is not scroll able anymore.

Please help as it really urgent requirement and I am not finding any solution.

Thanks,

Best Regards,

Raina

Accepted Solutions (1)

Accepted Solutions (1)

raina_goyal
Participant
0 Kudos

I fixed it with below code:

that = this;
var oChartContainer = this.getView().byId("idChartContainer");
oChartContainer._oFullScreenButton.addEventDelegate({
"onclick": function() {
var oScrollCont = that.getView().byId("mainTable");
var oHeaderTable = that.getView().byId("table1");
if (oChartContainer._oFullScreenButton.getProperty("icon") === "sap-icon://full-screen") {
oScrollCont.setHeight("100%");
//Adjust some columnns widths
oHeaderTable.getColumns()[3].setWidth("2em");
oHeaderTable.getColumns()[4].setWidth("2em");
oHeaderTable.getColumns()[7].setWidth("2em");
oHeaderTable.getColumns()[8].setWidth("1.52em");
oChartContainer.addStyleClass("hideScroll"); ---------- Added some CSS for scrollbar
oChartContainer.removeStyleClass("borderTB");
} else {
oScrollCont.setHeight("40em");
//Adjust some columnns widths
oHeaderTable.getColumns()[3].setWidth("2.01em");
oHeaderTable.getColumns()[4].setWidth("1.98em");
oHeaderTable.getColumns()[7].setWidth("2.02em");
oHeaderTable.getColumns()[8].setWidth("1.8em");
oChartContainer.addStyleClass("borderTB"); ----------- added some css
oChartContainer.removeStyleClass("hideScroll");


					}
				}
			});

Answers (0)