[Silk UI Web] Vanilla Silk UI does not display properly for Tablet View

[Silk UI Web] Vanilla Silk UI does not display properly for Tablet View

  
Forge Component
(71)
Published on 4 Oct by OutSystems R&D
71 votes
Published on 4 Oct by OutSystems R&D

Hi guys,


I am a newbie to Outsystems. I have been following a tutorial on developing a web application. I am now doing the booking assignment using the Vanilla Silk UI. 


I am now stuck at Improving Booking UI part in which I have to make the application viewable on the tablet mode. However, when I try to view in tablet mode, here is what it looks like:



The original looks like this :


Please help. Do I need to edit any CSS or sth?

Hi Sovanreach Chea,

Can you share with us the tutorial you are following? The Bookings project is supposed to be implemented using London (OutSystems 10 and earlier). As far as I know, OutSystems does not have any tutorial using the Vanilla Template and the Bookings exercise.

That being said, if I'm not mistaken, what you are seeing is default behaviour of a Table Records when used on a mobile device (Phone or Tablet).

Hi Sovanreach,

Few quick questions.
1) Did you select Web-Responsive while creating your module like below? 



2) Did you try to test application in browser(in tablet mode) or device?
- When I created a sample application using same Vanilla Template and after publishing tried to view website in tablet mode, its showing me tablet specific UI as expected like one which you have shared. 


Its the correct tablet/mobile responsive mode and all your menu items will be collapsed inside the side menu in tablet like this.
List records are also displayed in correct format.
Its the default UI of responsive templates for list records.

What else you are looking for a tablet specific mode in terms of UI?

Let me know if you have any concerns or doubts in this.

Regards,
Palak Patel

Jorge Martins wrote:

Hi Sovanreach Chea,

Can you share with us the tutorial you are following? The Bookings project is supposed to be implemented using London (OutSystems 10 and earlier). As far as I know, OutSystems does not have any tutorial using the Vanilla Template and the Bookings exercise.

That being said, if I'm not mistaken, what you are seeing is default behaviour of a Table Records when used on a mobile device (Phone or Tablet).

Is there a way I can switch over to London while retaining all the actions and web screens? 

Palak Patel wrote:

Hi Sovanreach,

Few quick questions.
1) Did you select Web-Responsive while creating your module like below? 



2) Did you try to test application in browser(in tablet mode) or device?
- When I created a sample application using same Vanilla Template and after publishing tried to view website in tablet mode, its showing me tablet specific UI as expected like one which you have shared. 


Its the correct tablet/mobile responsive mode and all your menu items will be collapsed inside the side menu in tablet like this.
List records are also displayed in correct format.
Its the default UI of responsive templates for list records.

What else you are looking for a tablet specific mode in terms of UI?

Let me know if you have any concerns or doubts in this.

Regards,
Palak Patel

Hi bro,


I did create the web application using a responsive one. My problem is that the table columns are hiding in one. There are like 5 columns in the table record, but only one of them is displayed. I needed to click on the arrow sign to expand the rest. You can see there is pretty much blank space at the side of the table column. I am sure it can fit in another 2-3 column for the display.


P.s I already tested in the tablet mode. 

Sovanreach Chea wrote:

Jorge Martins wrote:

Hi Sovanreach Chea,

Can you share with us the tutorial you are following? The Bookings project is supposed to be implemented using London (OutSystems 10 and earlier). As far as I know, OutSystems does not have any tutorial using the Vanilla Template and the Bookings exercise.

That being said, if I'm not mistaken, what you are seeing is default behaviour of a Table Records when used on a mobile device (Phone or Tablet).

Is there a way I can switch over to London while retaining all the actions and web screens? 

Yes, but none that is easy or simple... I'd advise you to just copy paste from your old module to the new module.

Switching to London will not solve your problem, as it is not a problem, it's the typical behaviour of the TableRecords... you can probably change some CSS to change that behaviour (regardless of using Vanilla or London), but I don't think I ever had to worry about such a thing...

Jorge Martins wrote:

Sovanreach Chea wrote:

Jorge Martins wrote:

Hi Sovanreach Chea,

Can you share with us the tutorial you are following? The Bookings project is supposed to be implemented using London (OutSystems 10 and earlier). As far as I know, OutSystems does not have any tutorial using the Vanilla Template and the Bookings exercise.

That being said, if I'm not mistaken, what you are seeing is default behaviour of a Table Records when used on a mobile device (Phone or Tablet).

Is there a way I can switch over to London while retaining all the actions and web screens? 

Yes, but none that is easy or simple... I'd advise you to just copy paste from your old module to the new module.

Switching to London will not solve your problem, as it is not a problem, it's the typical behaviour of the TableRecords... you can probably change some CSS to change that behaviour (regardless of using Vanilla or London), but I don't think I ever had to worry about such a thing...

ah ... this is hard. It is okay then, I just forget about how the things look for now


Hi Sovanreach Chea!


If you are using Vanilla Template from Silk UI Themes, then you are getting the default behaviour from Silk.


Take a look at the default preview here (in the end you have the TableRecords section):

https://silkui.outsystems.com/vanillapreview/System.aspx


You just need to add the class .NoResponsive to your TableRecords and the default behaviour is not applied.


Hope this helps.


Cheers!