Tabs_ClientSide Customisation for Mobile

Tabs_ClientSide Customisation for Mobile

  

Hi,


I am trying to use Tabs_ClientSide in my application and it looks like as in the following screenshot:

But when viewed on mobile it looks as below:

Is there any way around so that it looks similar to one on desktop or even better or just to change the structure a bit something similar to an accordion?


Thanks and Regards,

Rushabh Shah


Hi Rushabh,

Where are you testing?

Have in mind that the liverpool team, uses the mechanism of Silk UI, to define how it should behave, giving in consideration the device. This means that classes are added to define the behavior of the different patterns.

I would suggest you to add a screenshot of html, so that we can see which classes were added (should have been added both in the html tag and in the first div of body - look for class "page").

Cheers,

RG

Hello Rushabh,

You can use the DisplayOnDevice widget, and define that the Tabs will appear only in desktop and tablet, and another one with a list and accordions that will show up only in mobile.

https://silkui.outsystems.com/Patterns_Web.aspx#Web_Responsive_DisplayOnDevice

Cheers.

Eduardo Jauch wrote:

Hello Rushabh,

You can use the DisplayOnDevice widget, and define that the Tabs will appear only in desktop and tablet, and another one with a list and accordions that will show up only in mobile.

https://silkui.outsystems.com/Patterns_Web.aspx#Web_Responsive_DisplayOnDevice

Cheers.

Hi Eduardo,

I will definitely look at it, Thanks!


Regards,

Rushabh Shah


RUG wrote:

Hi Rushabh,

Where are you testing?

Have in mind that the liverpool team, uses the mechanism of Silk UI, to define how it should behave, giving in consideration the device. This means that classes are added to define the behavior of the different patterns.

I would suggest you to add a screenshot of html, so that we can see which classes were added (should have been added both in the html tag and in the first div of body - look for class "page").

Cheers,

RG

Hi,

I am aware of the working of the Liverpool Theme. Do you want me to share screenshots of the Widget Tree and its corresponding contents?


Regards,

Rushabh Shah


Rushabh Shah wrote:

RUG wrote:

Hi Rushabh,

Where are you testing?

Have in mind that the liverpool team, uses the mechanism of Silk UI, to define how it should behave, giving in consideration the device. This means that classes are added to define the behavior of the different patterns.

I would suggest you to add a screenshot of html, so that we can see which classes were added (should have been added both in the html tag and in the first div of body - look for class "page").

Cheers,

RG

Hi,

I am aware of the working of the Liverpool Theme. Do you want me to share screenshots of the Widget Tree and its corresponding contents?


Regards,

Rushabh Shah


Not of widget tree, but of the generated page (developer tools in the browser).


RUG wrote:

Rushabh Shah wrote:

RUG wrote:

Hi Rushabh,

Where are you testing?

Have in mind that the liverpool team, uses the mechanism of Silk UI, to define how it should behave, giving in consideration the device. This means that classes are added to define the behavior of the different patterns.

I would suggest you to add a screenshot of html, so that we can see which classes were added (should have been added both in the html tag and in the first div of body - look for class "page").

Cheers,

RG

Hi,

I am aware of the working of the Liverpool Theme. Do you want me to share screenshots of the Widget Tree and its corresponding contents?


Regards,

Rushabh Shah


Not of widget tree, but of the generated page (developer tools in the browser).


Hi,

Sharing the same:

What RUG asked was for you to show the DIV with the "Page" class :)
Because it is there that the SilkUI adds classes to get setup the device context.

Eduardo Jauch wrote:

What RUG asked was for you to show the DIV with the "Page" class :)
Because it is there that the SilkUI adds classes to get setup the device context.

Well, I will share the oml file itself as attachment in this reply!

In any case, this is a RichWidgets widget, and so it will not work "together" SilkUI, and will not respect the classes added by SilkUI.

While I can't reproduce your problem, it does not look nice in mobile (It does not show all the tabs).

Web
Mobile (emulation)
So, I would say that the best option, if you wants to use the Tabs in WEB is to use the DisplayOnDevice to chose another type of view in mobile, or use list+accordion on all.

Cheers.

Eduardo Jauch wrote:

In any case, this is a RichWidgets widget, and so it will not work "together" SilkUI, and will not respect the classes added by SilkUI.

While I can't reproduce your problem, it does not look nice in mobile (It does not show all the tabs).

Web
Mobile (emulation)
So, I would say that the best option, if you wants to use the Tabs in WEB is to use the DisplayOnDevice to chose another type of view in mobile, or use list+accordion on all.

Cheers.

Yes, DisplayOnDevice Looks the way forward for me.

Thank You. 

As I am new to Outsystems, it would be nice if you could share some light on how can I implement DisplayOnDevice.


Just drag two DisplayOnDevice to the screen, setup it, one for show the Tab on the devices you want to show, like Desktop and Tablet, the other to show only on Mobile.
They are like IF's that have only the branch true and that shows the content only if the conditions defined (the devices) are met.

Eduardo Jauch wrote:

Just drag two DisplayOnDevice to the screen, setup it, one for show the Tab on the devices you want to show, like Desktop and Tablet, the other to show only on Mobile.
They are like IF's that have only the branch true and that shows the content only if the conditions defined (the devices) are met.

Dear Eduardo,

Thanks. I got through and my issue is solved.


Regards,

Rushabh Shah 


Rushabh,

Your problem was simply postponed, since now, you will not display those tabs and that information in the mobile device...

Let me 

Cheers,

RG