Set fixed height of a view

Help Center
1

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
Screenshot 2024-07-08 10.41.311506×588 59.4 KB

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
Screenshot 2024-07-08 10.35.171794×860 102 KB

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

thanks all

2

anyone able to help?

3

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:

#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
image1866×780 69.6 KB

image
image1541×737 70 KB

Feel free to share your CSS for comparison?

4

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?

5

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

6

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?

7

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

8

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;
}