Skip to Content
0

Spreadsheet Fixed column size or column resize

Aug 03, 2017 at 11:58 PM

276

avatar image

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;

}

mlo8a.png (31.3 kB)
ljxwc.png (106.2 kB)
mvby2.png (5.9 kB)
ibzbu.png (39.8 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
Martin Pankraz Aug 04, 2017 at 08:09 AM
1

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

Show 13 Share
10 |10000 characters needed characters left characters exceeded

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

ag04z.png (22.2 kB)
0

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

0

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

0

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

1

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

0

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

0

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

0

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

lpgzr.png (57.5 kB)
0

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

spreadsheet.png (34.3 kB)
0
Show more comments

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

0

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

trnew.png (82.4 kB)
0