Space controls in UI5

[Former Member]

Hi ,

Are there any controls in general for spaces or invisible UI elements to insert gaps between controls or spaces in layout. I saw similar space control like toolbarspacer but is there any spacer to use in general.

Regards,

Koti Reddy

[former_member182862 · Accepted solution]

I would go with what Kai has suggested. Can you give us some examples on what you are trying to do?

thanks

-D

[Former Member · Accepted solution]

Thank you all for your valuable suggestions.

I am trying to implement customtile which will hold the layout content as shown in the screenprint.

It would be great if you can share any CSS Code to get some idea for me and let me know alternative procedure if any to achieve this with UI Elements like spacer etc.

Note: Please share recommendations about horizontal and vertical lines as well.

Regards,

Koti Reddy

[former_member182862 · Accepted solution]

Kind of difficult to figure out the css if you only provide an image 🙂

Maybe some experts can figure it out.

Thanks

-D

[Former Member · Accepted solution]

I got the image as part of requirement.

Will wait for experts suggestions.

Regards,

Koti Reddy

[ChandraMahajan · Accepted solution]

You may want to refer these blogs for more example on custom tile examples and  

Regards,

Chandra

[Former Member · Accepted solution]

Hi,

Regarding space , used CSS but it is not good solution in my point of view if lot of UI Elements present in complex way with XML View.

If we use Javascript view , Matrix layout gives good space between UI Elements so no issue.

I think SAP should look a way to introduce Spacer UI Element to use in XML Views especially.

Regards,

Koti Reddy

[Qualiture · Accepted solution]

Oh boy, please no! I was just sooooo happy SAP got rid of those terrible spacer and/or invisible elements in UI5, which they forced us to use in Web Dynpro...

IMHO, it's already a bad decision they still have the MatrixLayout et al in SAPUI5, but my guess is they have included it to make long-time Web Dynpro developers happy. But the MatrixLayout is just like the HTML table: it should only be used for tabular data, and not for laying out your controls. There are better elements to do that (FlexBox)

It may take some effort, but CSS is always the best solution to for spacing, aligning, scaling or whatever layout-based change you need to make. With simple screens you may get away with it, but especially with complex XML views, I would reject any code that contains styling and extra elements in the hierarchy, just to cater aligning or spacing stuff.

Remember, you should always separate presentation and content, and building visual styling into your views is a bad, bad idea.

[ChandraMahajan]

You can check answer from Robin van het Hof in the thread html - Space between controls in SAPUI5 - Stack Overflow

Regards,

Chandra

[kai2015]

why not use css for that?