cancel
Showing results for 
Search instead for 
Did you mean: 

container design

former_member190063
Participant
0 Kudos

Hi,

Is it possible to design any container(layout or forms) in sap ui5?

For example,

I need to keep UI elements in container like layouts or forms.The container should be in triangular shape or any irregular shape.Is it possible to design manually??? I  need your suggestions here.

Accepted Solutions (1)

Accepted Solutions (1)

Qualiture
Active Contributor
0 Kudos

Triangular? Can you post a design of what you want to achieve?

former_member190063
Participant
0 Kudos

This is the design.I need to place UI elements inside the  container 1 and 2. Is it possible to design container manually. we have horizontal layout, matrix layout and forms.but these containers are rectangular and square shapes.

Qualiture
Active Contributor
0 Kudos

I am really curious to know what's the reasoning behind this odd shape...

Besides the fact that HTML by default is not really good at displaying non-rectangular elements (in the end, it's all DIV elements which are rectangular), I don't think this will be a good user experience too because users are not used to shapes like that -- but again, I'm not familiar with the specifics of your requirement.

Can you elaborate a bit more on this? Am really curious

Nevertheless, you could go ahead and define your own layouts using CSS3 'shape' attributes, or use FlexBoxes with different widths. But in effect, you will only achieve different FlexBoxes stacked on top of each other, each which could contain your controls:

former_member190063
Participant
0 Kudos

Hi Robin,

Because the requirement is like that. I need to develop the design. User can add UI controls in the container.In that design some containers are semi- circle and triangular shape. I just need to know the possibility of designing the containers manually.Or any javascript or jqueries available??

Qualiture
Active Contributor
0 Kudos

Like I said, in HTML there are no things like circles or triangular shapes (or anything other that resembles a rectangular shape)

If you want to achieve such shapes, you should construct it by using multiple rectangular containers (FlexBoxes, MatrixLayouts, etc) or use the CSS3 "shapes" (https://css-tricks.com/examples/ShapesOfCSS/)

But using CSS for odd-shaped containers is a bit tricky... If there is no way you can convince your management that using odd shapes is a bad practice, I would go for the first approach instead

ChrisSolomon
Active Contributor
0 Kudos

It almost looks like you are trying to fit "containers" around an image (ie. the arc at the top of your image). So why not have a rectangle split from corner to corner (diagonal) and then simply have that "arc" area lay OVER the top? That will give the same impression as trying to "fit around" the area.

former_member190063
Participant
0 Kudos

@Christopher: yeah..you are absolutely right. But how to split the rectangular container by its diagonal. And also I am developing desktop application not an mobile application.Could you please elaborate your idea ..

ChrisSolomon
Active Contributor
0 Kudos

Use DIVs with CSS styling to make their right side / left side angled with 0 margin between them....lots of examples of making "arrows" and such using CSS can be found with a Google search.

AndreasKunz
Advisor
Advisor
0 Kudos

Hm, I'm not sure it's that simple. CSS can transform rectangles, but it cannot simply set the angle of single rectangle sides.

With some tricks it may work, but even then, the contained elements do not necessarily flow to fill the area as expected. They might be also transformed, or - as in the example I just tried - flow only inside a "virtual" rectangular shape inside the DIV that has been transformed to a Trapezoid.

http://enjoycss.com/gallery/shapes has some awesome shapes, but try to get text inside them and it will not behave as expected.

One suggestion may be to look into SVG instead, to get arbitrary shapes. Not sure whether you can flow content inside, though. Possibly. UI5 controls inside SVG shapes is not something that is regularly done, but why not push boundaries? 🙂

former_member190063
Participant
0 Kudos

Thank you all.I have designed the layout/container using CSS DIV element.The output came similar to my requirement.Thank you all for your valuable thoughts.

Answers (2)

Answers (2)

Former Member
0 Kudos

hi karthik,

Have a look at AbsoluteLayout https://sapui5.netweaver.ondemand.com/sdk/#test-resources/sap/ui/commons/demokit/AbsoluteLayout.html

Hope it helps

regards

Indrajith

vijay_kumar49
Active Contributor
0 Kudos

Please look at below code, Its having UI Screen developed in LayOut/Form

SAPUI5 SDK - Demo Kit