Spreadsheet Fixed column size or column resize

[former_member296163]

Hi,

In crosstab we have an option to fix column size but same feature is missing in spread sheet component, I am able to resize the column width during debugging mode (F11 DOM explorer) but not able to achieve the same using CSS (below). Any suggestions will be helpful.

Thanks

.mysp.sapEpmUiControlAnalyticgridGridTableInner>tbody>tr>td.colIndexCell

{

width: 100px;

min-height: 16px;

}

Or

.mysp1.sapEpmUiControlAnalyticgridGridTableInner>tbody>tr>td.general

{

width: 100px; min-height: 16px;

}

[Martin-Pankraz · Accepted solution]

Hello Sai,

You are almost there. I guess you assigned a custom class to your spreadsheet called mysp. That increases the complexity to create a selector to do what you want. The easiest way of doing this would be:

.sapEpmUiControlAnalyticgridGridTableInner>tbody>tr>td.colIndexCell{
   width: 100px!important;
   min-height: 16px!important;
}

However now every spreadsheet on your dashboard will be resized accordingly. In case you want to use your custom css class to avoid that, you need to revisit the html structure like you did with the developer tools before. Your custom class sits higher up on the tree and is accompanied by other sap standard classes. You need to deal with that when writing your selector. Also note the "!important" extension to override other css properties. Either you use that option or write a more selecive css selector. You can check stackoverflow.com for lots of examples.

Kind regards

Martin

[former_member296163 · Accepted solution]

Hi Martin,

Excellent! now I understand why my custom CSS is not working - may I know if there a way to specify which columns should have fixed size, for example I always have 13 columns (material and 12 Jan - Dec measures), here can I fix the column size per column starting from column "A" ?

Appreicate your help.

Thanks

SK

[Martin-Pankraz · Accepted solution]

Hello Sai,

good to hear you got the hang of it now. If you can rely on the indexes of the columns I would use the css property "nth-child". That way you can specify a range of elements starting at a certain index and stop at another. If you would like to use the title attribute like in your example above you would need 13 selections changing the letter each time.

Have a look here to learn more about the nth-child approach. Please mark answers as correct or helpful if they were.

Kind regards

Martin

[MustafaBensan · Accepted solution]

Hi Martin. I don't think the "Helpful Answer" option was carried over from the old SCN 😉

[Martin-Pankraz · Accepted solution]

Oh boy, you are right Mustafa. I miss the old days when I got emails when someone posted a reply on my message chains.

Kind regards

Martin

[MustafaBensan · Accepted solution]

Yes, alas the good old days 🙂 The email notifications on replies should be working though if you have activated them in your profile settings.

[former_member296163 · Accepted solution]

Hi Martin,

Thank you very much - your tips solved my issue. With below code I am able to control column size for required columns. Honestly I didn't need to do this if SAP Lumira 2.0 (Beta version) designer application renders properly as of SAP BEX or WAD applications which fits perfectly on small screens.

.sapEpmUiControlAnalyticgridGridTableInner>tbody>tr>td:nth-child(2){
width: 150px!important;
min-height: 16px!important;
}

.sapEpmUiControlAnalyticgridGridTableInner>tbody>tr>td:nth-child(3){
width: 150px!important;
min-height: 16px!important;
}

Appreciate your help.

Cheers

SK

[Martin-Pankraz · Accepted solution]

Hi Sai,

This is a little of topic. But the rendering of the spreadsheet and its content with scrollbars is by design. Responsive design in terms of size for objects for different screens is something that you can take care of yourself. One thing I usually do, is applying a special CSS property called media query. You can have a look at it here.

You basically wrap your css code in this additional css property and define different behavior for different screen sizes. That way you can shrink/increase fonts margins etc according to your needs.

I can understand that you want this behavior out of the box though. At some point Lumira 2.x will get there. The new responsive layout container is already a step into the right direction.

Kind regards

Martin

[former_member296163 · Accepted solution]

Hi Martin,

Thanks for your suggestions - I've tried both @media query and adaptive layout in past and both failed to fit spreadhseet on laptop screen, eventually it produces scroll bar. I have users would like to see 12 months data at glance without scrolling, for now they are using browser zoom in and zoom out options to achieve that which is not a feasible solution. I've approached and suggested SAP design studio product managers through SAP Ideas to remove units in each and every cell with which we can get rid off extra space (please screenshot) it is consuming but SAP reluctant to do this as from SAP Lumira 2.1 planning is mainly based on cross tab not spread sheet.

Looks like we have to wait for SAP to get basis right by the time Power BI and Tableau and Qlik will be more advanced.

Thanks again.

Cheers

SK

[Martin-Pankraz · Accepted solution]

Hi Sai,

if zooming works for you, decreasing the font size to fit your content on a laptop screen using a css media query will as well. Also you could consider using the toggle button feature of the spreadsheet to use the space more efficient:

The property is called "Dimension Toggles Visible".

Your media query may look something like this for a typical small laptop resolution (1280px x 1024px):

@media only screen and (max-width: 1280px){
...
}

You can take it from there to handle multiple resolutions in your css by adding another condition to the media query defining lower limits with "min-width" and an additional "and".

Kind regards

Martin

[former_member296163 · Accepted solution]

Hi Martin,

Thanks for your suggestions, for example I've created simple app in Lumira designer and in CSS mentioned below code. Most of our users complaining about rendering and fixing this by anything means a big win for us. Can you please suggest if I am doing anything wrong here.

Thank you.

/* Custom CSS */

@media only screen (min-width:668px) and (max-width:1400px) {

.fs { font-size: 5px!important; }

}

the class fs been used on crosstab and spreadsheet component and executed the app on my laptop and still everything appears big. Also tried without class fs but the same output.

Laptop resolution:

App Output

[former_member296163 · Accepted solution]

Hi Martin,

Toggle dimensions may not be feasible solution for me as I have planning functions to be applied, for example user select customer cell and applies % growth or distribution planning function so dimensions needs to be visible - I have tried below css but no luck, it's not only reducing the font size but also components should shrink and I don't know how to achieve this using @ media.

@media only screen and (max-width: 1280px){
...
}

Thanks for all your suggestions and hoping SAP will fix rendering issue in future updates.

Cheers

SK

[Martin-Pankraz · Accepted solution]

Hi Sai,

You need to check how CSS works more in detail to get this right. Here is a css selector for you to start from:

@media only screen and (min-width:668px) and (max-width:1400px) {  
	.fs td {
		font-size: 5px!important;
	}
}

You have to assign your custom class "fs" to the spreadsheet. The selector will target all elements having that class and the td element. That is the combination which actually targets the html elements containing the text. You can test different resolutions with your range of css media queries with the browsers developer tools. They allow you to simulate different devices like HD laptops, IPads or mobiles.

To make sure the bounds of the spreadsheet fit the screen, make sure to assign "auto" to its width. Put a feasible margin on the right and left. Now you only have to play with the font-size and the width of the specific table elements "tr" and "td" until everything fits on your target device. I have to admit that the width adjustment won't be as straight forward as the font adjustment. You can get a feeling by adding width:100px!important to the selector above. That however will shrink too many fields.

Kind regards

Martin

[former_member296163 · Accepted solution]

Hi Martin,

Thanks for your patience - with your suggestion I have managed to reduce the font size and with width 100PX .

You can notice font size getting small on speadsheet but columns width remain same, I can see measure Jan and rest of them visible with scroll bar means all columns are fitting on screen.

Thanks

SAI