What I’m trying to do:
I’m relatively new to anvil development. The problem I have is that the anvil default page width is too narrow. For instance, if I have a 23" monitor with the app open in maximize mode in a browser, the containers that I’ve created only take up a fraction of the space of the monitor. I want my containers to use all available space and not limit the container sizes. I’ve tried the “full-width” option and it doesn’t seem to solve the problem. Any advice?
Code Sample:
There’s no associated code. I’ve just added some containers to a blank form. The image below is what I’m encountering, where there’s so much white space left and right of the container.
Full-width at one level does not automatically cascade up or down your component tree. It’s more fine-grained than that. And that can result in surprises. For me, the best approach is to view, and experiment, at multiple levels, starting from the top down.
Below, for example, I’d look at “Full Width” of the root-level object, self (the Form); then the level-2 objects flow_panel_1 and lp_gwb_paramters; then the level-3 objects…
In each object, try toggling the “Full Width” from OFF to ON, and see what happens. This should give you a feel for how they interact on multiple levels.
Thanks for this recommendation, however even after setting all components in the component tree to “Full Width”, there is still too much white space left and right of the container. All of the components listed in the figure have been set to “Full Width.” Components that do not have a “Full Width” option are self(Home), and self.content_panel.
Usually what I do to troubleshoot things like this:
Open the inspector (right click and inspect the page)
Find the component you are interested in
Check the html and css if that component
You can then see what css rules are being applied to your component or page and possibly trace that back to something in the theme.css or in a component setting.
This helped a little bit. I was able to identify the CSS component that sets page width. Changing the 240px in this line can change the container width. A search of the theme.css for 240px and width, yielded no results for changing the container width.
When you run the app, on the navigation menu bar click on “View Schedule” which is associated with the “ViewData” form. In the “ViewData” form, all the components have been set to full width columns. Yet when the app runs, the containers are not full width.
How the app starts up is the app opens the “Main” form and replaces its content panel with the “ViewData” content panel (or others) when a button is pushed. I’m not sure if this will impact how the containers are displayed.
class Main(MainTemplate):
def __init__(self, **properties):
# Set Form properties and Data Bindings.
self.init_components(**properties)
self.content_panel.clear()
self.content_panel.add_component(Home(), full_width_row=True)
# Any code you write here will run before the form opens.
Well I figured it out. Turns out when you use .addComponent(myForm) it defaults the full_width_row option to False which means that changing the options in the IDE doesn’t do anything. This isn’t very intuitive as it is assumed that this option should be inherited and not defaulted.
