Administered by:
@Floppy@mastodon.me.uk#CSS (#Bootstrap ideally) experts, please help me!
I'm trying to make a form in a nice tabular layout so that the first column sizes to the longest label, and all the form inputs line up in the second column.
I don't want to use bootstrap's fixed column widths, I want auto-adjustment. Can I do this? With flexbox? Should I use grid instead? Argh.
@Floppy Isn't this just the col class?
@Floppy Oh wait. No, ignore me
@jezhiggins col-auto sizes the columns on each row separately though, I can't get them to line up. Unless I'm missing something really dumb.
@Floppy Do you need a table?
@jezhiggins layout yes, semantics no
@floppy depending on whether the form elements have their own wrapper (eg the label & input are in a <div> or similar) you might find that subgrid helps too: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid
@Floppy not an expert but what you describe sounds like it needs alignment both horizontal and vertical, which is what grid does, while flexbox is designed to work in one direction only.
@brunogirin yep, that's what I thought. Thanks :D
@Floppy aha yep that's a job for grid, I have an example to hand I can fish out when I'm back at my desk!
@mistertim ok, good to know I'm on the right track. I have a grid, just need to find how bootstrap auto-column sizing works :)
@Floppy from memory the key is grid-template-row with units specified as fr
@mistertim aha, I think I've got it - need to override bootstrap's fixed-column layout by adding "grid-template-columns: auto" to the grid container. I think.