[Data Grid Reactive] Data Grid Reactive breaking the page layout
Forge component by Bruno Martinho
Application Type
Reactive

We are using the Adaptive\ColumnsSmallLeft component to organize our page.  The Data Grid Reactive component is in a WebBlock that is displayed in a tabset in the main column of the page.

The problem is that the data grid reactive (DGR) takes up the full width of the page, forcing all of the components into a single column as if it were in a mobile application:

If we apply a custom style to limit the width of the DGR, that prevents the page displaying as a single column, but then the DGR does not fill its parent container:


I've attached an OML that reproduces the problem.  Depending on your resolution, you may have to adjust the zoom in the browser to see the issue.  The OML contains the following dependencies:


DataGridReactiveExample.oml

mvp_badge
MVP

Hi @Jared Jones!

Thank you so much from bringing this to our attention!

The team will take a look into the problem you're facing.

Cheers,
RG

P.s. - Thank you for providing everything needed to analyze the issue! :)

mvp_badge
MVP

Hi @Jared Jones,

I have good news and bad news! :/

The bad news, is that apparently this is issue with the OutSystems UI patterns to which AFAIK there is still no solution (I reported it to the team OutSystems UI team).

The good news, is that I was able to find a workaround while this situation doesn't get solved by the OutSystems UI team. The workaround consists in adding a css property to the that OSUI block:

 .columns-small-left .columns-item:last-child { 
     overflow: auto; 
 } 

Since the impact in the remaining application is at the moment unpredictable. So I would recommend you to only apply it to the place where you are facing the issue.

I've assembled a OML showcasing how to workaround the issue in a controlled manner.

Let me know if you have any additional questions.

Cheers,
RG


P.s. - "but then the DGR does not fill its parent container" - this was a problem of the css that you added, depending on the resolution might fill in the space or not (notice that in my 2 screens, in one, occupied the whole size and in another no)

DataGridReactiveExample.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.