Reactive: display UserInfo top right in LayoutSideMenu

I am developing a Reactive web application with side menu. Default the user info is shown at the bottom of the menu, but the customer doesn't want that. I tried to get it in the header, but whatever i do, it keeps showing aligned left, while i want it aligned right. Does anyone have an idea?

Best regards,

Leen Rietveld.

Hi Leen,

I tried with the same SideMenuLayout in the Reactive Web application and in my case by default the Logged In user information is located at the left-bottom to the Menu section as shown below..

Is it that any customization is applied to the default layout?

If possible could you please share the .oml file with us?


Regards,

Benjith Sam

Hi,


By default it comes in the extreme right. Did u changed any style?

 

Hi,

By default the UserInfo is shown in the extreme right in LayoutTopMenu and on the bottom of the menu in LayoutSideMenu. What i want i a combination of both. What i did is remove it from the menu and add it to the header. Which works sort of, except for the alignment. See attached oml.

Best regards,

Leen Rietveld.

Hi,

I think you have removed "app-menu-links" container from Menu widget under "Common" UIFlow. If that then do the following.

1. Open the Menu webblock in Common UIFlow.

2. Add a container in between "header-logo ph" and "Logoinfo" div.

3. Add a style as below in the Menu webblock

    

.app-menu-links_1 {
    flex: 1;
    height: 100%;
    -servicestudio-display: flex;
    -servicestudio-align-items: center;
}


Then set the Style property of the newly added div to "app-menu-link_1" - like the bellow 



It will work.

Thanks

Sourav


Hi, Leen.

Did you move the user block manually from the side menu to the header?

Can you send the link of the application? Maybe its a CSS issue.

The way I see, you need do cut the userInfo block from the menu (img 1), put it inside a container and put the container inside the 'header-content display-flex' contaner, wich is inside the Header area of the layout (img2). Create the class in (img3) and assign it to this new container.


I think that might solve the problem.





Solution

Hi Leen,

I had successfully created a sample implementation for the mentioned objective and it can be achieved with no additional CSS definition

- Just Cut & Paste the LoginInfo container (which includes the Common\UserInfo block) from the Menu block to the LayoutSideMenu block as shown below

Please refer the attached updated .oml file

Hope this helps you!


Regards,

Benjith Sam

Solution

Hi Benjith,

This is the solution i needed. Thanks a lot! It seems that the Header placeholder does the trick.

Best regards,

Leen Rietveld.

Leen Rietveld wrote:

Hi Benjith,

This is the solution i needed. Thanks a lot! It seems that the Header placeholder does the trick.

Best regards,

Leen Rietveld.

You are most welcome, Leen :)

Yes, it is correct. The defined Header placeholder occupied some space to locate the UserInfo block to the rightmost corner.. 

Glad to help you :)


Kind Regards,

Benjith Sam