Grid height in modal popup

API & Customization Ask Developers
1

Hi All

I have a grid that has say 6 records in at that I want to be able display in a modal popup. The issue is when I open the modal the grid is contained in a restricted view and the scroll bar is showing to the RHS. Is there a way to adjust the height of the grid using CSS of JS to display correctly without the scroll bar?

Thanks in Advance

Steve

2

Hi @SteveRobin63604 - I’m not sure if this is the same issue that I encountered the other day when adding a chart to a modal popup. I got a random horizontal and vertical scroll bar.

I spoke with my friend and college @CSWinnall who was very familiar with the issue. Apparently it’s to do with Flex.

As you should not be getting scroll bars on a table with six records, unless you’re using some sticky header code, I’m guessing it’s flex. Try the below CSS changing the view number.

I’m sure there’s a better answer form a coder :technologist:

I’m just a highly proficient copy & paster :wink:


/* Ensure the flex container does not cause overflow */
#view_1188 {
    overflow: hidden; /* Hides both horizontal and vertical scroll bars */
    display: flex;
    flex-wrap: nowrap; /* Prevents wrapping of flex items */
}
1 Like
3

Hi @CarlHolmes @SteveRobin63604

We fix this by adding

#view_xyz {
    overflow: visible;
}

This is an issue that Knack knows about I believe.

Craig

1 Like
4

Hi Carl

Thanks very much for your help with this I have applied the CSS below and it worked correctly in the first scenario, however I have tried it to add it to another view which was showing a vertical scroll bar on a details view and whilst it has reduced the size of the scroll bar it is not completely hidden. To add a further complication to this I want to be able to print this page and the scroll bar unfortunately is included in the print.

5

Hi @SteveRobin63604 - hopefully @CSWinnall will jump in as I’m not a coder. Craig was the person that gave me this code :man_technologist::laughing:

6

Hi @SteveRobin63604 did you try overflow: visible?

Let me know cause there is another possibility if that doesn’t work.

Craig

7

Hi @SteveRobin63604

The above code will work for grid views in a modal.

Craig

1 Like