Full Width Row not working as expected

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?

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?

1 Like

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:

  1. (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:

   self.content_panel.add_component(Form2(), full_width_row=True)
1 Like

made sense if you were drinking what I’m drinking thinking what I’m thinking :slight_smile:

My issue was actually this - I was trying to do :

myform = Form2()
myform.full_width_row = True

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.

1 Like

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

1 Like

Could you create the simplest project possible that demonstrates the issue and post the clone link here, please?

I’ll take a look and see if I can help.

3 posts were split to a new topic: Full Width Data Grid

(cough) - any chance this will be done? Very minor, I know …

Ooh, thanks for the reminder. Done! (You’ll see it in the next day or two)


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.

1 Like

A post was split to a new topic: Help with full width row

This question is very old and has already been answered, no one is going to answer.

Please create a new question: How to ask a good question