-

assets/css/easyadmin-theme/forms.scss

@@ -302,8 +302,7 @@ label.form-check-label {
 
 .form-tabs .nav-tabs .fa {
     color: var(--text-muted);
-    font-size: var(--font-size-lg);
-    margin-right: 4px;
+    margin-right: 5px;
 }
 
 .form-tabs .nav-tabs .nav-link.active {
@@ -341,12 +340,30 @@ label.form-check-label {
 }
 
 .form-tabs .tab-help {
+    color: var(--form-fieldset-help-color);
     margin-top: -10px;
     margin-bottom: 15px;
 }
 
 // Form columns
 .form-column {
+    .form-column-title {
+        align-items: center;
+        display: flex;
+        color: var(--form-fieldset-header-color);
+        font-size: 17px;
+        font-weight: bold;
+        padding: 0 0 5px;
+
+        .form-column-icon {
+            color: var(--form-fieldset-icon-color);
+            margin-right: 7px;
+        }
+    }
+    .form-column-help {
+        color: var(--form-fieldset-help-color);
+    }
+
     .field-form_fieldset {
         margin-bottom: var(--bs-gutter-x);
     }
@@ -441,7 +458,7 @@ label.form-check-label {
 
         .form-fieldset-icon {
             color: var(--form-fieldset-icon-color);
-            margin-right: 5px;
+            margin-right: 7px;
         }
 
         .form-fieldset-help {

doc/fields.rst

@@ -250,44 +250,45 @@ the fields using `PHP generators`_::
 Field Layout
 ------------
 
-By default, EasyAdmin displays one form field per row. Inside the row, each
-field type uses a different default width (e.g. integer fields are narrow and
-code editor fields are very wide).
+By default, EasyAdmin forms displays one field per row. Inside each row, fields
+show a different width depending on their type (e.g. integer fields are narrow
+and code editor fields are very wide).
 
-EasyAdmin also provides somre features to create complex form layouts: tabs,
-columns, fieldsets and rows.
+In this section, you'll learn how to customize the width of each field and also
+the whole form layout thanks to elements such as tabs, columns, fieldsets and rows.
 
 Form Tabs
 ~~~~~~~~~
 
-In pages where you display lots of fields, you can divide them in tabs using
-the "tabs" created with the special ``FormField`` object::
+This is the best element to make a very long/complex form more usable. It allows
+to group fields into separate tabs that are visible one at a time. To do so,
+call the ``addTab()`` method on the special ``FormField`` object:
 
     use EasyCorp\Bundle\EasyAdminBundle\Field\FormField;
 
     public function configureFields(string $pageName): iterable
     {
         return [
-            IdField::new('id')->hideOnForm(),
-
-            // Add a tab
+            // Creates a tab: all fields following it will belong to that tab
+            // (until the end of the form or until you create another tab)
             FormField::addTab('First Tab'),
-
-            // Your fields
             TextField::new('firstName'),
             TextField::new('lastName'),
 
-            // Add a second Form Tab
-            // Tabs can also define their icon, CSS class and help message
+            // Creates a second tab and customizes some of its properties, such
+            // as its icon, CSS class and help message
             FormField::addTab('Contact information Tab')
                 ->setIcon('phone')->addCssClass('optional')
                 ->setHelp('Phone number is preferred'),
 
             TextField::new('phone'),
-
+            // ...
         ];
     }
 
+Inside tabs you can include not only form fields but all the other form layout
+fields explained in the following sections: columns, fieldsets and rows.
+
 Form Columns
 ~~~~~~~~~~~~
 
@@ -323,11 +324,11 @@ spanning the other 4 Bootstrap columns)::
         ];
     }
 
-Thanks to Bootstap responsive classes, you can have columns of different sizes,
+Thanks to Bootstrap responsive classes, you can have columns of different sizes,
 or even no columns at all, depending on the browser window size. In the following
 example, breakpoints below ``lg`` doesn't display columns. Also, the sum of the
-two columns doesn't total ``12``: this is allowed to create columns shorter than
-the total spave available::
+two columns doesn't total ``12``; this is allowed to create columns shorter than
+the total space available::
 
     use EasyCorp\Bundle\EasyAdminBundle\Field\FormField;
 
@@ -368,6 +369,12 @@ complex layouts::
         ];
     }
 
+.. note::
+
+    By default, all fields inside columns are as wide as their containing column.
+    Use form rows, as explained below, to customize the field width and/or to
+    display more than one field on the same row.
+
 Form Fieldsets
 ~~~~~~~~~~~~~~
 
@@ -384,7 +391,7 @@ the fieldsets created with the special ``FormField`` object::
     public function configureFields(string $pageName): iterable
     {
         return [
-            // fielfsets usually display only a title
+            // fieldsets usually display only a title
             FormField::addFieldset('User Details'),
             TextField::new('firstName'),
             TextField::new('lastName'),
@@ -408,7 +415,11 @@ the fieldsets created with the special ``FormField`` object::
         ];
     }
 
-* TODO: recommed using fieldsets inside columns
+.. tip::
+
+    When using form columns, fieldsets inside them display a slightly different
+    design to better group the different fields. That's why it's recommended to
+    use fieldsets whenever you use columns.
 
 Form Rows
 ~~~~~~~~~

src/Resources/public/entrypoints.json

@@ -2,8 +2,8 @@
   "entrypoints": {
     "app": {
       "css": [
-        "/app.0f6a4cca.css",
-        "/app.0f6a4cca.rtl.css"
+        "/app.211b7677.css",
+        "/app.211b7677.rtl.css"
       ],
       "js": [
         "/app.914bb6ba.js"

src/Resources/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "app.css": "app.0f6a4cca.css",
-  "app.rtl.css": "app.0f6a4cca.rtl.css",
+  "app.css": "app.211b7677.css",
+  "app.rtl.css": "app.211b7677.rtl.css",
   "app.js": "app.914bb6ba.js",
   "form.js": "form.fc39362b.js",
   "page-layout.js": "page-layout.3347892e.js",

src/Resources/views/crud/form_theme.html.twig

@@ -535,13 +535,13 @@
     {% set field_icon = field.getCustomOption('icon') %}
 
     <div class="form-column {{ field.icon|default(false) == false and field.label|default(false) == false ? 'form-column-no-header' }} {{ field.cssClass|default('') }}">
-        <h2>
-            {% if field_icon|default(false) %}<i class="fa fa-fw fa-{{ field_icon }}"></i>{% endif %}
+        <div class="form-column-title">
+            {% if field_icon|default(false) %}<i class="form-column-icon fa fa-fw fa-{{ field_icon }}"></i>{% endif %}
             <span>{% if field.label|default(false) %}{{ field.label|default('')|trans(domain = ea.i18n.translationDomain)|raw }}{% endif %}</span>
-        </h2>
+        </div>
 
         {% if field.help|default(false) %}
-            <p class="form-section-help">{{ field.help|trans(domain = ea.i18n.translationDomain)|raw }}</p>
+            <p class="form-column-help">{{ field.help|trans(domain = ea.i18n.translationDomain)|raw }}</p>
         {% endif %}
 {% endblock ea_form_column_open_row %}