Skip to Content (Press Enter)
2021-07-21 12-04-07
George.Qiao
353Views
12Comments
Solved
[OutSystems UI] Disable Reactive Web Table widget responsive behaviour in iPad Pro Portrait
Question
Reactive
Forge
outsystems-ui
Reactive icon
OutSystems UI (O11)
Forge asset by OutSystems
Application Type
Reactive
Service Studio Version
11.13.0 (Build 53353)

Before upgrading to the latest OutSystems UI (2.7.1), the table widget on iPad pro displays records in table row format, as shown below:

After upgrading to 2.7.1, the table widget shows records in "card" on iPad pro, as shown below:


Anyone can suggest how to disable this responsive behaviour and force to show table  in rows?

P.S> I tried to add "no-responsive" CSS class to the table widget, style class. However, it is not working.

Regards,

George

0
0
30 Nov 2021
Copy Link
2021-09-30 18-38-59
Nuno Ricardo Rodrigues
Solution

Hello George Qiao ,

I have the update and also have the same "issue". I think is not an issue because OutSytems solve the problem when table are to big to fit on the screen and show like in mobile.

I have this two examples:

1) https://personal-gxzlvs5j.outsystemscloud.com/TableTest/Employees

2) https://personal-gxzlvs5j.outsystemscloud.com/TableTest/Employees2

In the second one I have override the new css, with this one:

.tablet td {
    background: var(--color-neutral-0);
    border-bottom: var(--border-size-s) solid var(--color-neutral-4);
    height: 56px;
    padding: var(--space-s) var(--space-m);
    vertical-align: inherit;
}

.tablet tr {
    display: table-row;
}

.tablet td {
    display: table-cell;
}

.tablet tr {
    border-bottom: var(--border-size-none) solid var(--color-neutral-4);
}

.tablet td:before {
    content: none;
}

.tablet .table thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

this override should be user with careful because on same big table it will have some issues.

Hope it helps.

Best Regards,

Nuno R

See solution in context
0
0
30 Nov 2021
Copy Link
2021-07-21 12-04-07
George.Qiao
Solution

Thank you, Nuno. I've checked your demo app and I see it does the work.

On the other hand, my colleague fixed this issue using the below CSS, put into the theme:


/*Overwrite Table on ios portrait*/
.phone td, .tablet td {
    text-align: start !important;
    display: table-cell;
    width: fit-content !important;
    width: min-content!important;
    border-bottom: inherit;
}
0
0
30 Nov 2021
Copy Link
2021-09-30 18-38-59
Nuno Ricardo Rodrigues

Replying to George Qiao's comment on 30 Nov 2021 11:46:36

hello George Qiao,

I have made some tests, but not all :).

I notice that you add the class ".phone", did you want that this override also works on smaller devices? Is not maybe remove that. I have made some changes to the CSS that you send,  because there is something not needed, and also if that change need to be just on portrait you can add like this:

.tablet.portrait td {
    width: inherit !important;
    border-bottom: inherit;
}

You can see a new output here:

https://personal-gxzlvs5j.outsystemscloud.com/TableTest/Employees3

Hope it helps.

Best Regards,

Nuno R

1
0
30 Nov 2021
Copy Link
2021-07-21 12-04-07
George.Qiao
Solution

Thank you, Nuno. I've checked your demo app and I see it does the work.

On the other hand, my colleague fixed this issue using the below CSS, put into the theme:


/*Overwrite Table on ios portrait*/
.phone td, .tablet td {
    text-align: start !important;
    display: table-cell;
    width: fit-content !important;
    width: min-content!important;
    border-bottom: inherit;
}
See solution in context
0
0
30 Nov 2021
Copy Link
2019-08-08 09-45-12
Joana Borges

Hi George!

The class you need to apply is the class "table-no-responsive" to the table widget.

Regards,

Joana Borges

0
0
30 Nov 2021
Copy Link
2021-09-30 18-38-59
Nuno Ricardo Rodrigues

Hello Joana Borges,

I can't find that class either OutSystemsReactWidgets.css or OutSystemsUI.css, maybe I´ m not looking on the right place.

Best regards,

Nuno R

0
0
30 Nov 2021
Copy Link
2021-07-21 12-04-07
George.Qiao

As @Nuno Ricardo Rodrigues  says, I could not find the CSS class either. 

0
0
30 Nov 2021
Copy Link
2021-09-30 18-38-59
Nuno Ricardo Rodrigues
Solution

Hello George Qiao ,

I have the update and also have the same "issue". I think is not an issue because OutSytems solve the problem when table are to big to fit on the screen and show like in mobile.

I have this two examples:

1) https://personal-gxzlvs5j.outsystemscloud.com/TableTest/Employees

2) https://personal-gxzlvs5j.outsystemscloud.com/TableTest/Employees2

In the second one I have override the new css, with this one:

.tablet td {
    background: var(--color-neutral-0);
    border-bottom: var(--border-size-s) solid var(--color-neutral-4);
    height: 56px;
    padding: var(--space-s) var(--space-m);
    vertical-align: inherit;
}

.tablet tr {
    display: table-row;
}

.tablet td {
    display: table-cell;
}

.tablet tr {
    border-bottom: var(--border-size-none) solid var(--color-neutral-4);
}

.tablet td:before {
    content: none;
}

.tablet .table thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

this override should be user with careful because on same big table it will have some issues.

Hope it helps.

Best Regards,

Nuno R

0
0
30 Nov 2021
Copy Link
2021-07-21 12-04-07
George.Qiao
Solution

Thank you, Nuno. I've checked your demo app and I see it does the work.

On the other hand, my colleague fixed this issue using the below CSS, put into the theme:


/*Overwrite Table on ios portrait*/
.phone td, .tablet td {
    text-align: start !important;
    display: table-cell;
    width: fit-content !important;
    width: min-content!important;
    border-bottom: inherit;
}
0
0
30 Nov 2021
Copy Link
2021-09-30 18-38-59
Nuno Ricardo Rodrigues

Replying to George Qiao's comment on 30 Nov 2021 11:46:36

hello George Qiao,

I have made some tests, but not all :).

I notice that you add the class ".phone", did you want that this override also works on smaller devices? Is not maybe remove that. I have made some changes to the CSS that you send,  because there is something not needed, and also if that change need to be just on portrait you can add like this:

.tablet.portrait td {
    width: inherit !important;
    border-bottom: inherit;
}

You can see a new output here:

https://personal-gxzlvs5j.outsystemscloud.com/TableTest/Employees3

Hope it helps.

Best Regards,

Nuno R

1
0
30 Nov 2021
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @George Qiao
On the next release of OutSystems UI, we'll have new useful classes that will allow you to choose how to have the tables being displayed (as responsive or non-responsive) since we gathered that feedback from several customers. So, wait for some news next week.

Cheers,
GM

1
0
30 Nov 2021
Copy Link
2021-07-21 12-04-07
George.Qiao

Thanks, GM. This sounds great!

0
0
30 Nov 2021
Copy Link
2021-09-30 18-38-59
Nuno Ricardo Rodrigues

Hello Gonçalo Martins,

There is a link here is possible to see the new classes for future releases?

Best Regards,

Nuno R

0
0
30 Nov 2021
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff

Replying to Nuno Ricardo Rodrigues' comment on 30 Nov 2021 13:51:20

Hello @Nuno Ricardo Rodrigues.
Once we release the new version they'll be included on our CheatSheet, but only after the release in order to avoid confusion.

Cheers,
GM

0
0
30 Nov 2021
Copy Link
2021-09-30 18-38-59
Nuno Ricardo Rodrigues
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.