To avoid the frustration of endless scrolling when adding a new node with multiple fields and tick boxes consider using

#node_article_form_group_features .fieldset-wrapper  {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}

It has the effect you can see in the before/after image opposite. One gotcha as I have left visible in the screenshot is additional care must be taken to avoid label and field being split over two columns. This can be sorted by slight rearrangement of the fields if it occurs.

Tags: 

Comments

One problem

From an end-user perspective this isn't a fully baked idea - notice how the label "fuel" ends up in the wrong column. If there is a way to force it to break, while keeping labels intact, that would be much better.

Add new comment

More information about text formats

Filtered HTML

  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Strips broken/unpublished internal links from output.
  • Adds node titles to internal links found in content (as HTML "title" attribute).
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.