2

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:

form inputs

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.

4 Answers 4

0

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.

4
  • I have installed that, but it only appears to display the widget correctly if the field collection can have multiple values, unless I'm doing something wrong.
    – nexus_6
    Nov 19, 2014 at 14:38
  • That maybe the case. Are you wanting Sodium and Salt side by side ? or just the labels and input with those groups ? Nov 19, 2014 at 16:39
  • Just the three input fields, sodium and salt can be above each other
    – nexus_6
    Nov 20, 2014 at 17:31
  • Well of you don't need and special formatting on your field I think CSS is the way to go. Nov 20, 2014 at 17:33
0

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.

example Display Suite Forms layout

2
  • This looks ideal, will certainly give it a go.
    – nexus_6
    Nov 19, 2014 at 14:38
  • I would recommend in the same way as well.
    – Jimmy Ko
    Jun 8, 2016 at 18:26
0

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.

-1

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.

1
  • Downvoted because CSS is certainly not the /only/ way to do this. It may be the best choice in most circumstances but usually you'll want to customise the HTML anyway to help the CSS along, so this is not a complete answer. Jul 20, 2018 at 8:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.