Display field inputs side-by-side in node edit form

Question

I have quite a few Field Collections on my node edit form that each have three text input boxes. By default drupal displays them one on top of the other which makes for a very long page:

Ideally I'd like to display the three fields in a single row. Do I have to override this with CSS or is there a setting I'm missing? It's a pai to Google a solution because I keep getting article about in-place editing or theming webforms.

Answer 1

If you are using Field Collections you can have them displayed in a few different ways, one of which is a table, which is more relevant for some situations than others. Have a look at Field Collection Table and see if it suits your needs.

It will, in your example, put the three fields side by side - but in table cells.

Answer 2

If you use the Display Suite module with Display Suite Forms sub-module enabled this is pretty easy.

On the Structure->Field Collections->Manage Fields page, select your layout to be "3-column equal width" (or whatever layout you prefer). Click Save to update the layout options.

Then drag your fields into the appropriate columns, click Save again and it will now show the fields side-by-side. You can also easily put multiple fields in each column this way if you like.

Answer 3

CSS would be the appropriate solution. Some suggestions to try:

CSS float option:

.wrapper-class-name .field-item {
    width: 33.3333%;
    float: left;
}

fieldset {
    clear: both;
}

CSS inline-block option:

.wrapper-class-name .field-item {
    width: 33.3333%;
    display: inline-block;
    margin-right: -5px;
}

CSS grid option:

.wrapper-class-name {
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    display: grid;
    -ms-grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    grid-gap: 15px;
    align-items: top;
}

*using CSS grid with Drupal in my experience almost always requires updating the markup through template modifications, Drupal tends to add wrapper elements and CSS Grid needs direct descendants.

The problem with this situation is that you are typically viewing form fields like this in an administration theme, so if you're needing to update the administration theme you will need to add your CSS to the administration theme. I think the question may be, do you want to manage the CSS modifications of a contributed theme? Nothing wrong with it, just something to keep in mind.

Answer 4

Sorry CSS is the only way to do that. You might need to add something to limit the form field and then float them, I did something like this:

div.field-your-field-name .field-item {
float: left;
margin-right: 0.75em;
}

But I had no label, so you might need to change the css for the label too. Remember to add a

    clear: left;

for the next element css otherwise the next element might be floated too.