Changing the Field Label Position - Changing the Field Label Position - Alfresco - Alfresco Content Services - Alfresco/Alfresco-Content-Services/23.4/Alfresco-Content-Services/Develop/Share-UI-Extension-Points/Share-Configuration/Share-Forms/Changing-the-Field-Label-Position - 23.4 - 23.4

Alfresco Content Services
Platform
Alfresco
Product
Alfresco Content Services
Release
23.4
License
ft:lastPublication
2026-09-18T00:52:02.442000
ft:locale
en-US

By default, forms are rendered with the field labels positioned above the input control.

The Edit Metadata screen with the Name, Title, Description, Mimetype, and Author fields

To change this layout, provide a custom CSS to override the default style rules. Control dependencies can be provided by using custom configuration.

  1. Add the custom CSS in the custom-label-layout.css file, located in the /custom/forms directory within the web application.
  2. Add the following configuration: 
    <config>
   <forms>
      <dependencies>
         <css src="/custom/forms/custom-label-layout.css" />
      </dependencies>
   </forms>
</config>
  3. To move the labels to the left of the input control, the following CSS should be present in the custom-label-layout.css file: 
    .form-container label
{
   display: inline;
   float: left;
   text-align: right;
   width: 6em;
   margin-right: 1em;
   margin-top: 0.4em;
}
  4. Save the file.

    The result of this customization is shown as:

    The customized Edit Metadata screen with the Name, Title, Description, Mimetype, and Author fields