cancel
Showing results for 
Search instead for 
Did you mean: 
Read only

Alignment in Vertical layout

Former Member
0 Likes
3,530

I have 2 table one on right and one on left and in between I have 2 buttons in a vertical layout I need to have these buttons in middle.

No matter what I do they do not come in center.

Any help with using alignment would be great.

Also I cannot add padding in buttons.

Here is link to bin

JS Bin - Collaborative JavaScript Debugging</title> <link rel="icon" href="h...

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Likes

This seem to work (tested on Chrome and FF)

Example

-D

Answers (4)

Answers (4)

Former Member
0 Likes

Hi Dennis,

I'm doing the same using the vertical layout and have same problem of alignment of the content. I want to align my content (like, labels, buttons) in middle of the layout. Can you please help me to solve my issue.

Thanks,

Rahul.

Former Member
0 Likes

Hi Rahul

it will be nice if you can open a new discussion and also include a jsbin so that we can better understand your problem.

Thanks

-D

Former Member
0 Likes

Thanks Dennis it worked

Thanks Amjad and Atanu .

regards

Sagar

Former Member
0 Likes

Hello Sagar,

I would suggest you have one main horizontal layout which will contain three vertical layouts

First vertical layout will have first listbox

second vertical layout will have your move buttons - class "moveButtons"

Third vertical layout will have second list box

Then, talking of aligning vertivcal middle your move buttons..

heres css for your moveButtons

.moveButtons{

    margin: auto;

    position: absolute;

    top: 0; left: 0; bottom: 0; right: 0;

}

This should do it...

former_member184867
Active Contributor
0 Likes

Add css

.sapUiHLayoutChildWrapper {

white-space: normal;

display: inline-block;

vertical-align: middle;

}

Example here JS Bin