# Grid height in modal popup

**URL:** <https://forums.knack.com/t/grid-height-in-modal-popup/17310>\
**Category:** Ask Developers\
**Created:** [June 5, 2024, 3:42am UTC](https://forums.knack.com/t/grid-height-in-modal-popup/17310 "2024-06-05T03:42:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![SteveRobin63604](https://avatars.discourse-cdn.com/v4/letter/s/d07c76/32.png) [@SteveRobin63604](https://forums.knack.com/u/SteveRobin63604)\
**Post date:** [June 5, 2024, 3:42am UTC](https://forums.knack.com/t/grid-height-in-modal-popup/17310/1 "2024-06-05T03:42:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [June 5, 2024, 6:41pm UTC](https://forums.knack.com/t/grid-height-in-modal-popup/17310/2 "2024-06-05T18:41:04Z")

</div>

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 🧑‍💻

I’m just a highly proficient copy & paster 😉

```auto

/* 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 */
}

```

---

<div class="post-metadata">

**Author:** ![CSWinnall](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/cswinnall/32/3631_2.png) [@CSWinnall](https://forums.knack.com/u/CSWinnall)\
**Post date:** [June 5, 2024, 7:35pm UTC](https://forums.knack.com/t/grid-height-in-modal-popup/17310/3 "2024-06-05T19:35:16Z")

</div>

Hi @CarlHolmes @SteveRobin63604

We fix this by adding

```auto
#view_xyz {
    overflow: visible;
}

```

This is an issue that Knack knows about I believe.

Craig

---

<div class="post-metadata">

**Author:** ![SteveRobin63604](https://avatars.discourse-cdn.com/v4/letter/s/d07c76/32.png) [@SteveRobin63604](https://forums.knack.com/u/SteveRobin63604)\
**Post date:** [June 12, 2024, 9:41am UTC](https://forums.knack.com/t/grid-height-in-modal-popup/17310/4 "2024-06-12T09:41:11Z")

</div>

> [@CarlHolmes](#):
>
> ```auto
> #view_1188 {
> overflow: hidden; /* Hides both horizontal and vertical scroll bars */
> display: flex;
> flex-wrap: nowrap; /* Prevents wrapping of flex items */
> }
> 
> ```

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.

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [June 12, 2024, 2:44pm UTC](https://forums.knack.com/t/grid-height-in-modal-popup/17310/5 "2024-06-12T14:44:17Z")

</div>

Hi @SteveRobin63604 - hopefully @CSWinnall will jump in as I’m not a coder. Craig was the person that gave me this code 👨‍💻😆

---

<div class="post-metadata">

**Author:** ![CSWinnall](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/cswinnall/32/3631_2.png) [@CSWinnall](https://forums.knack.com/u/CSWinnall)\
**Post date:** [June 12, 2024, 7:26pm UTC](https://forums.knack.com/t/grid-height-in-modal-popup/17310/6 "2024-06-12T19:26:20Z")

</div>

Hi @SteveRobin63604 did you try overflow: visible?

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

Craig

---

<div class="post-metadata">

**Author:** ![CSWinnall](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/cswinnall/32/3631_2.png) [@CSWinnall](https://forums.knack.com/u/CSWinnall)\
**Post date:** [June 13, 2024, 7:52pm UTC](https://forums.knack.com/t/grid-height-in-modal-popup/17310/7 "2024-06-13T19:52:13Z")

</div>

> [@CSWinnall](#):
>
> Hi @CarlHolmes @SteveRobin63604
> 
> We fix this by adding
> 
> ```auto
> #view_xyz {
> overflow: visible;
> }
> 
> ```
> 
> This is an issue that Knack knows about I believe.
> 
> Craig

Hi @SteveRobin63604

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

Craig