[Dublin Template] Table not responsive when screen size is desktop-small

Forge Component
(48)
Published on 9 Mar (3 weeks ago) by OutSystems R&D
48 votes
Published on 9 Mar (3 weeks ago) by OutSystems R&D

Good Day,

I have a problem on a table not being responsive when screen size is in desktop-small.

I have attached a screen shot of the screen.

How can I fix this and make the screen responsive.


Thanks in advance.

Solution

Hi Clifford,

The Dublin template and TableRecords are responsive by default, please see the attached file to check the responsive behaviour. They adapt to each kid of screen and the classes are injected to help us to create custom CSS if we need. Do you have any kind of fixed width on columns?

Can you isolate your use case and share to see what the problem is?

Thanks

Solution

Hi Clifford Deapera,

As bmarcelino said, even I suspect issues with fixed width, some scenario the width hardcoded may be larger than screen size in that case table try to occupy more screen which actually not available.

Worth checking custom css in you application on below area's.

  1. Any parent div contains fixed width.
  2. Table columns has any fixed width.
  3. Any theme styles are getting applied automatically to this table.

My Suggestion : rather than checking in code, check from browser front and try to find any styles applied to table.


Sravan

Hi bmarcelino and Sravan,


Thanks for the help, it turned out I just needed to check the width of the table to make it responsive again.

Thank you very much.

Hi Clifford Deapera,

I was too stuck with this problem, but when worked on it I found a solution to this problem. Add this to your theme css so that it can apply to all the screens.

SyntaxEditor Code Snippet

.screen-container{
    overflow-x: auto;
    overflow-y: auto;
}

This is default class applied in Outsystems. It was set to {overflow-y: initial} applying above code will help you resolve responsive issue.