Putting two fields side-by-side

DZakary · June 29, 2020, 10:16pm

I’ve got two fields that I’d like to be displayed side-by-side. For some reason they are appearing stacked vertically. This is the code. The fields are quite narrow and I’d have thought they’d be beside each other. Suggestions on getting them beside each other?

I did try using a styleclass of “col-md-4”, which worked, but then they were indented from the other fields on the form.

{
                "inputType": "number",
                "label": "Approved Travel",
                "model": "entry.travelApproved_hours",
                "placeholder": "H",
                "styleClasses": "w-16",
                "type": "input"
            }, {
                "inputType": "number",
                "label": "",
                "model": "entry.travelApproved_minutes",
                "placeholder": "MM",
                "styleClasses": "w-16",
                "type": "input"
            }

delfs · June 29, 2020, 10:18pm

If you are using pure TW (TailWind CSS ) then you will need to add a flex class to the element(s)

eg
w-16 flex

c

DZakary · June 29, 2020, 10:22pm

I added the flex so that it reads “styleClasses”: “w-16 flex” to both fields.

When I did, the first field jammed up against its label and the second stayed on the second line.

DZakary · June 29, 2020, 10:23pm

Putting the flex on the second field didn’t fix it either.

Alex · June 30, 2020, 10:06am

I haven’t used TW in the form setup, just in embedded html. That said, you may need to wrap the two fields in a group and put the flex on the group. I’m not sure if that’s it or not.

delfs · June 30, 2020, 1:26pm

@alex This is correct, the ‘floating’ items should be in a group, my mistake.

@Zack
I think what you are looking for is float-left and you will also need to add some margin on the right mr-4

eg
[{
“schema”: {
“fields”: [{
“inputType”: “text”,
“label”: “My Input”,
“model”: “field1”,
“styleClasses”: “w-64 float-left mr-4”,
“type”: “input”
}, {
“inputType”: “text”,
“label”: “My Input”,
“model”: “field2”,
“styleClasses”: “w-64 float-left”,
“type”: “input”
}, {
“inputType”: “text”,
“label”: “My Input”,
“model”: “field1”,
“styleClasses”: “max-w-xl”,
“type”: “input”
}]
}
}]

Will yeild: