Using the Dashboard template, I have a “content_container” card (column_panel) added at design time and when the user clicks menu links I clear and reload forms inside that container.
The content container itself responds to the “full_width_row” setting, but any form I load into it at runtime does not and ends up occupying only a small central window in the available space.
Each of the dynamic forms respect the full width setting if dropped directly in at design time.
Is there anything else I need to do to make them use the full width when loaded at runtime?
UPDATE -
actually, if I delay the process by calling a server function in the dynamic form’s show event, the form starts off full width but then shrinks back to not-full-width! How can i stop it doing that?
Trick is to make sure your “card” forms are wrapped inside their own column_panel with everything set to full_width_row, and that you add it straight to the container form in the default slot.
I probably already knew that, but had forgotten. Works now. Nothing to see here…
To clarify David’s comment, for future puzzled readers:
(Background:) The cards in the Material Design Dashboard layout are ColumnPanels inside ColumnPanels. So if you want to make a component (eg an Image) full-width in the Dashboard layout, you have to make sure that the card it’s on is full-width, and that the component itself (eg the image) is also full-width.
If you’re adding components in code, you specify the container properties as keyword arguments to add_component(). So if you’re adding a form to a Dashboard’s content_panel manually, you can do:
and various combinations of that. The reason I didn’t put the full_width_row as a kwarg was that it didn’t appear in the autocomplete, which is unusual and it confused me. Adding it as a kwarg works just fine, thanks!
The reason I didn’t put the full_width_row as a kwarg was that it didn’t appear in the autocomplete
Ah, yes. This was a design decision, because the actual, full set of layout arguments to a ColumnPanel is fiendishly complicated, and we don’t support doing anything more complicated in code than “add a component to the end of this panel”. (If you’re building a complex layout from code, we recommend the GridPanel, which is less flexible in the designer but more usable from code. If you want nested columns, add nested GridPanels.) However, full_width_row= is a perfectly reasonable thing to want to specify from code, so I’ll add it to the autocompleter.
Hi Folks - I’ve spent a couple of hours battling the “full width” issue and custom components. I can create a GridView and add Button(s) to it, and those Buttons will stretch in columns as you would expect. I can then in the same code create a GridView to wrap the button, and add this GridView to the parent GridView - and get the expected full_width behavior.
If I create blank Form (aka Custom Component) then create the GridView wrapping the button in the Form, then import this Form and try to add_component an instance of this Form to the parent GridView, I can never get it to fill the full column width, even with the full_width_row=True parameter to the add_component call. (per the above discussion)
I may not have a clear understanding of the Form object itself which may be the root of the issue. Any pointers appreciated. (I have not added the Form to the Custom Components list but didn’t think that would matter) Thanks
Are there any examples of this? I’m trying to use Anvil for the first time, and I have a very large website that has a lot of tiny components taking up a fraction of the available screen space.
