on 02-27-2015 6:53 AM
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.
Triangular? Can you post a design of what you want to achieve?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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:
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??
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
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.
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? 🙂
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Please look at below code, Its having UI Screen developed in LayOut/Form
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
87 | |
23 | |
11 | |
9 | |
8 | |
5 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.