Fomatting in design studio 1.6( Not aligning properly)

[Former Member]

HI Gurus,

Recently i Build up Design studio dashboard i am facing trouble in formatting and alignment of dashbaord

I tried below blogs but it doesn't fullfill my requirement

How to apply CSS to grid layout to make it real... | SCN

Please see below picture need

Heading should be top of tile where i  used grid layout and arranged but still not in proper order it should come top  of tile and exactly middle. i tried with all options but no luck may i know how to achieve this?

And  SAP ICONS i am using arrow symbol when i am running dashboard it was behaving in strange like below . need to be fix this image left hand side?

Any experts please guide me on this .it was really help  me to drive things

[former_member206841 · Accepted solution]

Hello Varun,

When you want to keep the KPI Tiles as squares, the height and width should always be equal.

Designing your dashboard in a dynamic way would help you get rid of alignment issues when your screen resizes.

So PFA Application designed as per your requirement which looks like below in all screen sizes:

Also on the single hyphen issue, check your scripting. Other things should get resolved for you with this sample layout app.

Note:Download the attached file and change the extension from .txt to .zip and then import in Design Studio.

Hope that helps.

Regards

Dinesh

[Former Member · Accepted solution]

HI Dinesh,

Thanks for Your reply. The zip  file is not working . i tried by chnanging extension to zip but still showing below error

[former_member206841 · Accepted solution]

Hello Varun,

Fine , then get the zip from here - https://www.dropbox.com/s/y6mrgn7bmin1bae/SCN_3960652.zip?dl=0

Regards

Dinesh

[Former Member · Accepted solution]

Hi ,

May I know which version your using?

I am Using 1.6 Sp1 but i am facing below error

[Former Member · Accepted solution]

HI ,

Did you used grid layout for KPI Tiles?

2. Icons should appear befoe text (Sample Text in your case). it was not behaving in correct way /it was moving based on screen sizes.could you please help me with this

Thanks,

Varun

[former_member206841 · Accepted solution]

Ah! Am using 1.6 SP2

Regards

Dinesh

[former_member206841 · Accepted solution]

I placed the icons after the Text. Yes all the components are placed inside grid container. If you can import the application , you can figure out and place the components as per ur wish without the components being moving around.

Regards

Dinehs

[Former Member · Accepted solution]

HI

Thats fine. Could you please  tell me whether have you used grid layout for tiles?

2. Icons should appear befoe text (Sample Text in your case). it was not behaving in correct way /it was moving based on screen sizes.could you please help me with this

if possible try to make sample  video as always you do

Thanks ,

Varun

[Former Member · Accepted solution]

HI ,

Thanks for reply .but unfortunately i couldnt able to open .

could you please make some sample video is that possible?

Thanks,

Varun

[former_member206841 · Accepted solution]

Yes I have placed the 16 tiles inside a 4x4 grid and configured their layout parameters width and height 150x150.

Icons can be placed before text , not a big deal, will add those as part of the video and share it soon.

Regards

Dinesh

[Former Member · Accepted solution]

Yeah Sure Thanks

Thanks,

Varun

[former_member206841 · Accepted solution]

Hello Varun,

The app from here - Dropbox - SCN_FORMATTING.zip should work with 1.6.

If no luck Video here - SCN_3960652 - YouTube

Regards

Dinesh

[Former Member · Accepted solution]

HI Dinesh,

Thanks for your Great explanation. will try it out from my end and let you know.meanwhile i have some issues with responsive design of same page .while resizing screen i am getting overlap of texts and i have one vertical  line it should not move while resizing.please see below screenshot

and it varies from firefox  and IE how to make fit to all browsers?

Could you please help me with this

Vertical line should be like this

[Former Member · Accepted solution]

Hi Dinesh,

App still not working .anyhow i can see video thanks for sharing

Thanks,

Varun

[former_member206841 · Accepted solution]

Hello varun,

For the text overlap , if you design as per the video such that the text are in grid layout,text wrap would happen upon resizing they wont overlap.

Regarding the line , am not sure about the placement of the line canvas?The alignment I have  provided is to avoid overlapping and organizing the layout properly in general.

So a suggestion - If your requirement becomes complex  and if you cant get rid of the issues, you can simulate the responsive design by knowing screen size and changing the layout of components using scripting . See Alfred Lee's answer here -

But to make the Dashboard purely responsive in a easier way , there are responsive containers available in SCN Community SDK as well as other partner extensions.

Regards

Dinesh

[Former Member · Accepted solution]

HI Dinesh,

It working perfect .everything is good except one thing that is tiles. while resizing i am not seeing any  space. please find the attached screenshot. even though  we are keeping in grid i dont see spaces between tiles .could you please help me only with the last  thing

[former_member206841 · Accepted solution]

Hello Varun,

Have modified the layout a bit such that the tiles and all items do not overlap for screen resizing.

PFA Video here - https://youtu.be/D3aD1sAC7Vk

Hope this helps

Regards

Dinesh

[Former Member · Accepted solution]

HI Dinesh,

Thanks working fine

Regards,

Varun

[former_member206841 · Accepted solution]

That's nice to know:)

Regards

Dinesh

[Martin-Pankraz]

Hi Varun,

You should study the differences between fixed values and the "auto" option when it comes to component's margins, width and height. That applies for the properties on Design Studio and any CSS that you apply. In there you will find the reason for your offsets.

To center your text for example I'd recommend making the Text component width "auto" and applying the css "text-align:center".

Judging from your explanations you have a general problem of fixed and dynamic sizes.

Kind regards

Martin

[Former Member]

Hi Martin

Thanks for reply .for text it's working fine what about icons I tried width and height option but no luck .tiles Should be square it shouldnt be rectangle.

Could you please guide me to get this

Thanks

Varun

[Martin-Pankraz]

Hi Varun,

as I said before this is all about dynamic and static sizing. If your tiles are put on a grid layout and they have a width and height of auto, you need to make sure the grid layout has equal width and height. Of course having an equal number of rows and columns on the grid is also necessary for mathematical reasons. Otherwise a typical wide computer screen will cause rectangles as you experience them.

In essence you need to check the bahavior of parent containers and their child Design Studio components.

Apart from that there are also further CSS aproaches which involve display behavior and positioning. You can find plenty suggestions regarding that topic on stackoverflow. As soon as you have done more in-depth research and pin pointed an exact problem, we can provide further help.

As a first step to dig into the whole CSS and HTML thing, start using the browser's developer tools (key F12) and investigate possible CSS changes on the fly. Once you found the proper setup copy it to Design Studio.

Kind regards

Martin