Header Alignment in Service Studio for Layout Base of Outsystems UI
On our RadarOn our Radar
OutSystems UI

layout base : 

layout top :

how to recreate :

  • Create a module with Outsystems UI base theme
  • Create a screen based on the standard LayoutBase 
  • Open the screen preview in Service Studio
  • The menu items and the user block are not center aligned

This is different from designing screens with the LayoutTopMenu, where menu and userinfo is nicely aligned in SS.  

The reason is a bit of extra css for those in the Outsystems UI CSS file :

.layout-top .header-content{  




Suggestion for improvement : also add similar rule for the base layout to Outsystems UI CSS.  

Please also note, that the base layout block has an inappropriate css class name on the LayoutWrapper container : it has the class layout-blank, I would have expected to see layout-base here.

All of the above is ONLY about how header is shown in Service Studio, it does not affect the running application, where other css is making sure everything is nicely aligned, so no problems there.


Workaround for anybody who is also annoyed by this :

with current Outsystems UI, go into your own (base) theme css, and add following

.layout-blank .header-content{  




Hi @Dorine Boudry,

Thanks for the heads-up, we created a task on our backlog to look into it (ROU-4546).

Best regards,

Bernardo Cardoso

Changed the status to
On our RadarOn our radar

Hi Dorine!
I’m marking this as “on our radar” since we already added it to our backlog.