Aligning items to bottom of Column Panel

Anvil Q&A
1

What I’m trying to do:

I am creating a messaging app and within that, I have a text area at the bottom of the messages with a send button next to it. What I want is for the button to stick to the bottom of the Column Panel when the text area grows.

What I’ve tried and what’s not working:

I have tried creating this CSS role for the Column Panel with both the Text Area and Button in it, but with no luck?

.anvil-role-align-bottom>.column-panel {
display:flex;
align-items:flex-end;
}

I have also tried a CSS role for another Column Panel (with the button in it) within the Column Panel with the Text Area, with no luck?

.anvil-role-align-bottom>.column-panel {
align-self:flex-end;
}

2

Can you share a clone-link?

It sound like you might want to use a repeating panel for your messages. As new messages are added, you can do something like:
self.repeating_panel_messages.items += [new_message]

And the new message will be added at the bottom of your repeating panel. Any buttons or text boxes you have below the repeating panel will remain below the repeating panel (getting nudged down as you add messages).

I don’t think you need to touch CSS for this!

3

https://anvil.works/build#clone:TV75QCOJW6LXGXQJ=AAOAMLP73Z6DTMJZJRAD2BZ7

4

If you put the text area and the button in a flow panel and then add this to theme.css

.flow-panel > .flow-panel-gutter {
    align-items: flex-end;
}

If you only want to change the behaviour of this one panel then you can add a role to the flow panel

edit - or just do:

.anvil-panel-row {
    align-items: flex-end;
}
1 Like
5

Thanks, I was able to get that to work. However, I was really wanting to have them in a column panel so I could prevent wrapping. I always want the text area and button to stay on the same horizontal row. Is there a way to do that?

6

The edited solution keeps them in a column panel…

To stop it wrapping change wrap_on to never on the column panel

2 Likes
7

That worked brilliantly! Thank you sir.

1 Like