Skip to Content
0

Vertical Label alignment in Grid

Apr 16 at 05:48 AM

34

avatar image

Hello All,

I am trying to design a responsive two column layout where each column contains a Label and Input field horizontally.

For this purpose, first I have created a Grid with span as 6. Within this grid, I have added two grids with span as 12 so these grids will take 50-50 space from the root grid. I have added Label and Input field in the child grids so that it appeared in 2 column layout. This set up acts responsive as per the desktop/tablet/mobile parameters defined in the Grid

Here, I want the label to be vertically aligned at Center. My issue is: the labels are always appearing Top aligned. I don't want to use a Form or SimpleForm here as it further complicates the scenario with Titles, Layout etc etc...

How to tackle this issue.

Regards,

Faddy

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Sharath M G Apr 16 at 05:56 AM
1

try the following css for your grid container holding your label.

.<css class>{
display: flex;
justify-content: center;
}
Show 4 Share
10 |10000 characters needed characters left characters exceeded

Hello Sharath,

Here is the code

<Panel>
<layout:Grid defaultSpan = "L6 M6 S12" vSpacing= "0">
<layout:Grid defaultSpan = "L6 M6 S12" vSpacing= "0" class = "alignVertically">
<Label text = "User ID"></Label>
<TextArea rows = "5"></TextArea>
</layout:Grid>
<layout:Grid defaultSpan = "L6 M6 S12" vSpacing= "0">
<Label text = "Details"></Label>
<TextArea rows = "5"></TextArea>
</layout:Grid>
</layout:Grid>
</Panel>

CSS

.alignVertically {
display: flex;
justify-content: center;
}

Result:

result.png (3.0 kB)
0

Instead of justify-content, try align-items = "center"

0

Worked. Thanks

0

Hello Sharath,

One issue here..

The grid where i have applied the proposed CSS is the following

<layout:Grid defaultSpan = "L6 M6 S12" vSpacing= "0" class = "alignVertically">

So, the label and TextArea in this Grid should show one below the other for mobile device. However, that is not happening after applying this CSS (In the figure below, it should appear something similar to Details label and Text Area). It looks to me that by applying this CSS, it acts like a HBox!!

My requirement is: how to vertically align the label without loosing the responsiveness defined for Grid..

result.png (2.4 kB)
0
SAP Learner Apr 18 at 03:45 PM
0

Can someone please help me here with a solution?

Regards,

SAP Learner

Share
10 |10000 characters needed characters left characters exceeded