Change the hedder UI of TableRecords when displaying mobile

Hello.


I am Japanese and I am sorry if the content is difficult to convey.


When launching the created WebApp on a mobile device,

The display of TableRecords will be changed as shown below. (The same was true for the side.)

I want to display TableRecords on a mobile terminal like a web browser.

Please let me know if there is a good way. I want to display it as shown below.

that's all. Thank you.

What version of the OutSystems platform and Service Studio are you running?

For OutSystems UI Web (OutSystems 11), you can add the CSS class "no-responsive" to the TableRecords widget, and it will display as a normal table, regardless of device.

I believe there is a similar class in SilkUI as well.

You should make sure you're on the latest version of OutSystems UI Web to take advantage of this CSS class.

G. Andrew Duthie wrote:

What version of the OutSystems platform and Service Studio are you running?

For OutSystems UI Web (OutSystems 11), you can add the CSS class "no-responsive" to the TableRecords widget, and it will display as a normal table, regardless of device.

I believe there is a similar class in SilkUI as well.

You should make sure you're on the latest version of OutSystems UI Web to take advantage of this CSS class.

Thank you for your reply.

The version I use is OutSystems UI Web (OutSystems 11).

However, I want to add the CSS class "no-responding" to the TableRecords widget
I didn't understand even if I searched on the Internet because I had little development knowledge.

Excuse me, but would you mind teaching me a sample CSS?

Thank you.


Solution

The CSS class already exists in the style sheet.

All you have to do is, in Service Studio, select the TableRecords widget, and in the Properties look for the "Style Classes" property and add "no-responsive" to that property, as shown below:

Alternatively, you can use the Styles pane to add the no-responsive class.

Solution

Thank you for the very easy-to-understand explanation.

When I implemented it, it was done!

I appreciate it very much.

My pleasure. Glad I could help.