Skip to content

Space is reserved when there is no label shown, creating a large unnecessary white space #14707

@martyf

Description

@martyf

Bug description

This is a Group fieldtype, with the Display Label turned off. "Text Field" is a child of the Group.
Image

The rendered markup includes the sr-only markup for the Label, but there are two margins added: one is mb-2 in the Field.vue, and the other is a mb-1.5 in the Label.vue (See #14710).

If a Label is not shown, it should not have elements that take up visible space: basically it means that a Field without the Label shown will have a 8px extra gap above it.

For example:
Image

I've looked in to a PR for this but is challenging because at the Field level it is not able to cleanly determine whether the Label will actually render any content or not.

How to reproduce

  1. Create a new Statamic site
  2. Set up a Global with the below Blueprint
title: 'Group Test Hidden Label'
tabs:
  main:
    display: Main
    sections:
      -
        display: Section
        fields:
          -
            handle: group_field
            field:
              fullscreen: false
              type: group
              display: 'Group Field'
              hide_display: true
              fields:
                -
                  handle: text_field
                  field:
                    type: text
                    display: 'Text Field'
      -
        display: 'New Section'
        fields:
          -
            handle: group_field_2
            field:
              fullscreen: false
              border: false
              type: group
              display: 'Group Field'
              hide_display: true
              fields:
                -
                  handle: text_field
                  field:
                    type: text
                    display: 'Text Field'
      -
        display: 'New Section2'
        fields:
          -
            handle: group_field_duplicate
            field:
              fullscreen: false
              border: false
              type: group
              display: 'Group Field (Duplicate)'
              fields:
                -
                  handle: text_field
                  field:
                    type: text
                    display: 'Text Field'

Environment

Environment
Laravel Version: 13.11.2
PHP Version: 8.4.21
Composer Version: 2.9.5
Environment: local
Debug Mode: ENABLED
Maintenance Mode: OFF
Timezone: UTC
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: NOT CACHED

Drivers
Broadcasting: log
Cache: file
Database: sqlite
Logs: stack / single
Mail: log
Queue: sync
Session: file

Storage
public/storage: NOT LINKED

Statamic
Addons: 0
License Key: Not set
Sites: 1
Stache Watcher: Enabled (auto)
Static Caching: Disabled
Version: 6.19.0 Solo

Installation

Fresh statamic/statamic site via CLI

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions