How to adjust the main page width

Anvil Q&A
1

Hi, I am new to Anvil and very much enjoying it. I am struggling to resize the content of the page. When the page is displayed full screen, the content only takes up about a third of the width of my screen. How can I adjust this? All my content is in a grid panel.
thanks

2

Hi ,

go to the container properties of you datagrid and select full_width_row, that should do the trick!
image

3

Thank you, that makes the panel fill the whole width of the screen, but really i’d like more control than that.
thanks. Some way of adjusting the margin?

1 Like
4

Yes, you need some css, see the docs with regard to roles :Anvil Docs | Roles

5

Thank you for that. I am making progress.
I have created a role ‘sized’ for the ‘GridPanel’. and Added the following CSS:

.

anvil-role-sized {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  
}

However this only makes changes within the already limited part of the screen that is being used.

I am not confident with CSS, thats why I am using Anvil. What am I doing wrong?
thanks
karl

6

My mistake, I had forgotten to check ‘full_width_row’ again.

7

As I mentioned I am not confident with CSS: I am trying to add a role for the GridPanel so that I can adjust its width and keep it centered horizontally. So far my CCS resizes it fine, but moves it to the left of the screen. I’d be grateful for suggestions.

Also, is there any way to change the background colour of the alert box.

thanks

8

Hi karl,

well css is also not my forte and i’m trying to avoid it as much as possible!

My advice is while you are learning don’t worry to much in the beginning about getting everything pixel perfect, changing colors fonts sizes etc but focus on the main functionality of your app this way you’l learn much faster and don’t waist time on minor details

(i’m talking out of experience here … :wink:)

1 Like
9

I think i will probably take that approach too.
thanks