search

getkirby / kirby

Kirby's core application folder
https://getkirby.com
Other
1.27k stars 167 forks source link

Structure field with custom column widths breaks on mobile #3638

Closed VIPStephan closed 2 years ago

VIPStephan commented 3 years ago

Describe the bug
There seems to be an inconsistency with responsive layout adjustments: I have a table block with a structure field with three columns by default. I want only two columns to show up in the block preview, so I’ve specified two columns with 1/2 width each. This looks fine in the table preview but it also uses the width setting in edit mode where it just shows the first field, and it screws up the width.

To Reproduce
Steps to reproduce the behavior:

  1. Set the viewport width to 1040px or lower.
  2. Create a table block, according to https://getkirby.com/docs/reference/panel/blocks/table, with three fields and only two columns specified to show up (see first image below)
  3. Add content to the structure field
  4. Open edit mode of table block
  5. See error.

Expected behavior

If columns are hidden by the system due to CSS media queries, column/width settings should be ignored or adapted.

Screenshots

Blueprint setup (~/site/blueprints/blocks/table.yml): table_block_blueprint

Default table preview in the main area without column specification: default_columns_preview

Default table preview in the edit mode overlay: default_columns_edit_mode

Table preview in the main area with columns specified: 2_columns_preview

Table preview in edit mode overlay with columns specified: 2_columns_edit_mode

Kirby Version
3.5.7.1

Desktop (please complete the following information):

lukasbestle commented 3 years ago

@VIPStephan Could you please post the blueprint YAML as text in a Markdown code block:

```yaml
your blueprint
```

This makes it a lot easier for us to reproduce and debug this. Thanks!

VIPStephan commented 3 years ago 
name: Tabelle
icon: menu
preview: table
fields:
  rows:
    type: structure
    label: Einträge
    fields:
      kuenstler:
        label: Künstler
        type: text
        help: Formatierungen wie \**kursiv*\* und \*\***fett**\*\* sind möglich.
      kuenstler_link:
        label: Link
        type: url
      media:
        type: blocks
        label: Medien
        fieldsets:
          - audio
          video_link:
            name: Video
            icon: video
            label: "{{ video_title }}"
            fields:
              video_url:
                label: YouTube-/Vimeo-URL
                type: url
              video_title:
                label: Titel
                type: text
lukasbestle commented 3 years ago

Thanks! I can reproduce the same issue with a simple structure field outside of blocks:

fields:
  structure:
    type: structure
    label: Einträge
    fields:
      kuenstler:
        label: Künstler
        type: text
      kuenstler_link:
        label: Link
        type: url
      media:
        type: text
    columns:
      kuenstler:
        width: 1/2
      kuenstler_link:
        width: 1/2

So the issue is that the max-width: 65em media query of the StructureField doesn't behave correctly if the structure columns have custom widths. Have I understood the problem correctly @VIPStephan?

VIPStephan commented 3 years ago

Yeah, that sounds about right. The custom widths should only be applied if the system doesn’t hide columns itself. Or the columns that are currently hidden by default shouldn’t be hidden if custom widths are assigned (up to a certain breakpoint).

bastianallgeier commented 2 years ago

✅