Hbox alignments

Hi,

I need to place an icon and an anchor beside each other in hboxes in a parent hbox
the icon should be right aligned and the anchor href text left aligned.
both together should be center aligned in the parent hbox.

image

I played around with alignself, alignitems, aligntext… in multiple combination,
but could not get the result I want.

Any idea how to do that?

KR
Roland

Hi, @r.walde

Could you please provide a sample project?

Regards,
Maria.

Hi Maria,

see project attached.
I added the elements into the ext_received-in-app-notifications-dialog.xml view.
Settings are done in the controller.
The notification bell icon is in the Users list view.

The reason why I did not take 3 buttons:
The first ‘button’ or anchor needs to open Google maps.
And, only mobiles are used.
I tried different methods starting with UI.getCurrent().getPage().
but all have the same handicap: standard setting for i.e. Safari on Iphone is to block pop up’s.
That’s why I am using an anchor, which works fine.
Only the view design is an open topic.

I created a workaround with ‘spacer’ hboxes befor the icon and the anchor,
set the icon and anchor box size to lower values.
Got close to that what is needed,
but only close.

KR
Roland

testextendview.zip (111.0 KB)

@r.walde The components will be closer to each other if you use

ancIconBox.setJustifyContentMode(FlexComponent.JustifyContentMode.END);

instead of

ancIconBox.setAlignSelf(FlexComponent.Alignment.END);

Regards,
Maria.

1 Like