Skip to Content

Vertical Label alignment in Grid

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Apr 16 at 05:56 AM

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

    .<css class>{
    display: flex;
    justify-content: center;
    }
    Add comment
    10|10000 characters needed characters exceeded

    • 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)
  • Apr 18 at 03:45 PM

    Can someone please help me here with a solution?

    Regards,

    SAP Learner

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 28 at 05:13 PM

    Can someone give me a solution here, which aligns the label vertically at center without loosing the responsiveness. Please refer the conversation with Sharath above for more details.

    Add comment
    10|10000 characters needed characters exceeded