Cross tab Scroll bar in Design Studio

[Former Member]

Hi All,

I have inserted  multiple cross tab with data. In a particular tab i have hug data where i must use Horizontal scroll.   I wrote code in css , like

#CT_1.sapzencrosstab-HScrollTable {

  display: bold;

}

It is working fine. But that scroll bar is applying to all cross tabs in application. I needed to apply only for one table (CT_1).

Thanks & Regards,

Sud.

[Former Member · Accepted solution]

Hi,

For Horizontal Scroll try below steps.

1)     Add Panel in Layout (Where you want Crosstab ) & Name it PANEL_CR_OUTER.

2)     Write Below CSS in CSS Style

overflow-x:scroll !important;

3)     Insert your CROSSTAB in this PANEL_CR_OUTER .

4)     Fix the Width  ( Max Possible Width for CROSSTAB Columns ) .

But Above workaround will not work on iPad or iPhone .

[Former Member · Accepted solution]

Hi Nikhil,

Where do i need to write css style?  either in Panel or in crosstab?

[Arjun_KT]

Hello Sud ,

Place you Cross tab in a Panel and please have a look on this blog

The idea is when the Width of Cross tab is increased then the panel will have scrolling up to the cross tab width specified .

Regards

Arjun KT

[Former Member]

Hi Arjun,

Do i need to write that code on application level css or in panel css style??

[Former Member]

and i need scroll bar for cross-tab not for panel.

[Former Member]

Hi,

Apply CSS in PANEL Style .

This is for Horizontal Scroll .

CROSSTAB Horizontal scroll is available in DATA CELL Area only .

Therefore Vertical scroll is available But Horizontal scroll for RowHeader Area is not available .

[Former Member]

Hi Nikhil,

Yes, I added css style " overflow-x:scroll!importent " in panel. after that i inserted cross-tab on the panel. But still  i am unable to get horizontal scroll bar .

[Former Member]

Do i need to add any css class for cross-tab?

[Arjun_KT]

Hello Sud,

Please give following details in panel and cross tab

Panel

Width : auto

Height : auto

Cross tab

Width : 3000

Height : 1000

No css in cross tab

Regards

Arjun KT

[Former Member]

Hi,

Place your Crosstab inside the Panel .

Maintain the Crosstab Width for all Columns Under Display-->Column Widths .

Fix the Crosstab Width For max length as per data .

[Former Member]

If i keep crosstab width: 3000 n Hight: 1000, how can i keep cross-tab width for max length??

[Former Member]

Max Length as per your Judgment .

Arjun has given you just Max number he is using for his scenario .

In your case

How many number of columns are there ?

What should be the Length of each column as per data for clear visibility .

     Sum all of those lengths and add 20px for each column extra .

You can also check the Crosstab Formating Document on SCN .

In case you want to format your crosstab .

[Former Member]

Yeas. I did follow the same. But still it is not working. Initially i created panel( PANEL_CR_OUTER ) with css style : "  overflow-x:scroll!importent " i gave width: auto hight: auto. After that in created one crosstab on the panel. i gave max width for each column(as it appears). cross-tab width: 3000 hight:1000. but still i am unable to see H-sroll bar

[Former Member]

Hi,

you have written

overflow-x:scroll!importent

three changes .

importent --> important

space between scroll & !important

add ; at end of statement

Actual code is :

overflow-x:scroll !important;