I’m having trouble getting text boxes used in data grid rows to properly expand to take up the available width.
Text boxes behave the way I would expect when I drag one straight onto the data grid row.
But, if the text box is inside a flow panel that is on the data grid row, it doesn’t expand, no matter what settings or CSS I try (disclaimer, I’m not very skilled at CSS).
Here’s a clone example that shows the difference between the two:
https://anvil.works/build#clone:QDQDFPSJZTDLT6ZH=YO23HTWICGXCBBDAQ24U2VQI
For my app, I need to put the text box into a flow panel, but have it take up the available width.
I’m hoping that a CSS guru has just the right CSS for this situation that works in a custom role.
I tried my best and could not get this to work either. I’m no CSS expert though. Thanks for putting together a nice little example to play around with.
what else is going in the flow panel?
My instinct says flow panel might not be the right component here…
Nothing else is happening in the flow panel in the clone example. The text box is the only component in the flow panel.
In my real app, the flow panel has the text box and another flow panel in it, but the clone example behaves the same in a much simpler layout.
I’m open to other ways of doing this, but I need to put multiple components in the column and have text boxes take up whatever space is remaining.
I updated the clone example with a couple more experiments. One was my current thoughts for a workaround (putting the Text Box directly into the row, but then putting a Flow Panel for the other stuff beneath it. This takes up more screen height and I don’t like it, but it works).
The other was to eliminate the Data Grid from the equation and just try a plain Text Box versus a Text Box in a Flow Panel on the form itself. Those behaved the same as inside the Data Grid.
I’m not certain what is responsible for expanding the Text Box when it’s placed directly into the form’s content panel. CSS? Editor code? Javascript of the Text Box? The content panel?
why don’t you do
RowPanel
ColumnPanel
TextBox, FlowPanel --> Button,Button
I updated the clone example with that as the second data grid. Unless I’m misunderstanding what you mean, it ended up with the text boxes still not expanding, and the flow panel the buttons are in taking up half the width.
The layout was this:
I can manually adjust the width of the columns, but it doesn’t seem to let me tell the one the text box is in to expand.
Put all the components in a flow panel with align: right
create a role initial-fill restricted to FlowPanel
use the following css
.anvil-role-initial-fill .flow-panel-gutter > div:first-child {
flex-grow: 1 !important;
}
2 Likes
That’s perfect! Thanks so much for that.
Edit: For anyone finding this later, you can also use the nth-child() selector in place of first-child to select which element gets expanded if it shouldn’t be the first. I had a slightly more complex layout than the example where the text box was the second item in the flow panel, and nth-child(2) worked great.
2 Likes
