# Set fixed height of a view

**URL:** <https://forums.knack.com/t/set-fixed-height-of-a-view/17523>\
**Category:** Ask the Community\
**Created:** [July 8, 2024, 9:45am UTC](https://forums.knack.com/t/set-fixed-height-of-a-view/17523 "2024-07-08T09:45:52Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![GazM](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/gazm/32/2007_2.png) [@GazM](https://forums.knack.com/u/GazM)\
**Post date:** [July 8, 2024, 9:45am UTC](https://forums.knack.com/t/set-fixed-height-of-a-view/17523/1 "2024-07-08T09:45:53Z")

</div>

Can i set a view height?

In my app dashboard there are three columns, each with two elements - a view containing header/text followed by a RT view (custom code with spider chart). This is shown in the image below.

 ![Screenshot 2024-07-08 10.41.31](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/7/79e2a7ff012fcf65813c0ebe126b3d6da2a14e6b.png)

But… on the page this doesn’t always render well with rows of different heights. This doesn’t look great. As below:

 ![Screenshot 2024-07-08 10.35.17](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/a/ac4ae85537945bd4f28aea27c4a98abf619c5c9c.png)

Question: How can I ensure that the three greyed boxes with the header text of each column is the same height?

thanks all

---

<div class="post-metadata">

**Author:** ![GazM](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/gazm/32/2007_2.png) [@GazM](https://forums.knack.com/u/GazM)\
**Post date:** [July 11, 2024, 7:44am UTC](https://forums.knack.com/t/set-fixed-height-of-a-view/17523/2 "2024-07-11T07:44:43Z")

</div>

anyone able to help?

---

<div class="post-metadata">

**Author:** ![StephenChapman](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/stephenchapman/32/1759_2.png) [@StephenChapman](https://forums.knack.com/u/StephenChapman)\
**Post date:** [July 11, 2024, 10:15pm UTC](https://forums.knack.com/t/set-fixed-height-of-a-view/17523/3 "2024-07-11T22:15:11Z")

</div>

Hey @GazM, that’s a nice looking dashboard! Would love to hear how you’ve achieved that!

For your problem, it might come down to what CSS you’re applying.  
I laid out my views in the same way as you did and they seemed to scale in height automatically with their adjacent left/right views.

I apply CSS to the three top views specifically like so:

```auto
#view_60, #view_61, #view_62 {
  border-radius: 5px;
  padding: 20px;
  background-color: rgb(247,247,247);
  border: 1px solid rgb(200,200,200);
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/2/2c3c6f4bcf6f80ed232c8886c66327f6815d960b.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/0/09ac14dd7fe2b849cc3a44289fe89fe5b4367bcb.png)

Feel free to share your CSS for comparison?

---

<div class="post-metadata">

**Author:** ![GazM](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/gazm/32/2007_2.png) [@GazM](https://forums.knack.com/u/GazM)\
**Post date:** [July 12, 2024, 12:20pm UTC](https://forums.knack.com/t/set-fixed-height-of-a-view/17523/4 "2024-07-12T12:20:23Z")

</div>

Thanks for the comments. The issue I have is like the final image you shared, where one chart is lower than the others.

This is a result of the dynamic nature of the page build.

I’d like to fix the grey box height so it doesn’t alter dynamically.

Any ideas?

---

<div class="post-metadata">

**Author:** ![Sunny\_Singla](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/sunny_singla/32/1007_2.png) [@Sunny\_Singla](https://forums.knack.com/u/Sunny_Singla)\
**Post date:** [July 18, 2024, 8:28am UTC](https://forums.knack.com/t/set-fixed-height-of-a-view/17523/5 "2024-07-18T08:28:00Z")

</div>

Hello Gaz,

I think this may be because of your older view setup. Just try to move any view and Knack will apply their new CSS to resolve this issue.

Thanks,  
Sunny Singla

---

<div class="post-metadata">

**Author:** ![GazM](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/gazm/32/2007_2.png) [@GazM](https://forums.knack.com/u/GazM)\
**Post date:** [July 22, 2024, 4:03pm UTC](https://forums.knack.com/t/set-fixed-height-of-a-view/17523/6 "2024-07-22T16:03:41Z")

</div>

thanks - but I don’t understand what you are recommending. Do you mean to move a view on a page… or move a whole page?

---

<div class="post-metadata">

**Author:** ![Sunny\_Singla](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/sunny_singla/32/1007_2.png) [@Sunny\_Singla](https://forums.knack.com/u/Sunny_Singla)\
**Post date:** [July 22, 2024, 4:05pm UTC](https://forums.knack.com/t/set-fixed-height-of-a-view/17523/7 "2024-07-22T16:05:15Z")

</div>

Just open the screen and try to move view only … or add any new view it will apply new CSS

---

<div class="post-metadata">

**Author:** ![GazM](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/gazm/32/2007_2.png) [@GazM](https://forums.knack.com/u/GazM)\
**Post date:** [July 22, 2024, 4:13pm UTC](https://forums.knack.com/t/set-fixed-height-of-a-view/17523/8 "2024-07-22T16:13:33Z")

</div>

Then I am using the latest CSS as many changes have been made to the pages.

I have added the following CSS and it has improved things a little. I do recall seeing a more flexible page builder demo’d on a recent knack webinar, so hoping this will come in soon.

#view\_10XX, #view\_10XX, #view\_9XX {  
height: 350px !important;  
}