Hi,


I am trying to design my web-page with lisbon theme.I am facing the following problem with side bar:


1) The page in desktop is seen as below:




2) The page in tablet mode is seen as below:


and Opening the Side Panel I see the below screen below:



3) The page seen in phone is seen below:



 In phone browser why doesn't the side bar appear as in a tablet mode shown above(Open's only when the button is clicked)?

Please help me solve this issue.


Regards,

Manthan Shah.


Hi Manthan,

Are this screen-shot are for actual device or emulator.

Sometime emulator also give this kind of a weird experience.


Regards,

Pankaj Pant




Hi Pankaj,


Screenshots are from google chrome developer options. But I have tested it on device as well it appears the same.


Please find the attached screenshot.


Regards,

Manthan Shah.

Hi Manthan,

Here is the doc say's about Lisbon Sidebar:;

The Lisbon layout has a sidebar placeholder, which can be optionally used. Note that, when used, the containers for Title, Actions and Breadcrumbs have margins.

  • Desktop - Sidebar is displayed on the right of the content, when in Desktops.
  • Desktop Small and Tablet - When in desktop small or tablet, the sidebar becomes hidden and a button is presented on the header to slide the sidebar.
  • Phone - The Sidebar breaks to the bottom of the page.


https://silkui.outsystems.com/lisbonpreview/


It seems a default behavior for the Sidebar of the Lisbon Theme.


Cheers

Hi Assif,


Using Lisbon Theme, there is no way by which I can put the sidebar into the side panel (for Phone) as in a Tablet? Beacuse if it is implemented for a tablet, it should not break to the bottom of the page for Phone under normal circumstances.


Best Regards,

Rushabh Shah

Rushabh Shah wrote:

Hi Assif,


Using Lisbon Theme, there is no way by which I can put the sidebar into the side panel (for Phone) as in a Tablet? Beacuse if it is implemented for a tablet, it should not break to the bottom of the page for Phone under normal circumstances.


Best Regards,

Rushabh Shah

Hello Rushabh,

I mentioned what's there on the doc itself :)

You can go through the link.