Select Option Cut Off in Custom Widget

Describe the bug Created a custom widget to be used inside a markdown editor and gave it a select type field. When I focus the select to choose an option, I can’t see any of the options because the overflow on the containing element is overflow:hidden

To Reproduce

Expected behavior I expect to be able to see the options for the select

Screenshots

Applicable Versions:

• Netlify CMS version: 2.10.2
• Git provider: Github
• OS: MacOS 10.14.6
• Browser version Chrome 79.0.3945.88

CMS configuration

backend: name: git-gateway branch: master site_url: http://localhost:3000 display_url: http://localhost:3000 media_folder: assets/uploads public_folder: uploads collections:

• name: pages name_singular: page label: Pages label_singular: Page preview_path: “{{slug}}” folder: content/pages create: true slug: “{{slug}}” identifier_field: title fields:
  • label: Title name: title widget: string
  • label: Subtitle name: subtitle widget: string
  • label: Feature Image name: image widget: image
  • label: Layout name: layout widget: select default: sidebar-left options:
    • Right Sidebar
    • Left Sidebar
    • One Column
  • label: Hero Size name: heroSize widget: select default: medium options:
    • Large
    • Medium
    • Small
  • label: Content name: body widget: markdown
  • label: Side Bar Content (if sidebar layout) name: sidebar widget: markdown
• name: posts name_singular: post label: Posts label_singular: Post preview_path: “{{slug}}” folder: content/posts create: true slug: “{{slug}}” editor: preview: false fields:
  • label: Title name: title widget: string
  • label: Subtitle name: subtitle widget: string
  • label: Category name: category widget: select options:
    • About Awake
    • Third Party Integrations
    • Test Category multiple: true
  • label: Author name: author widget: string default: Daniel Kelly
  • label: Publish Date name: date widget: datetime
  • label: Featured Image name: featureImage widget: image
  • label: Body name: body widget: markdown
• name: categories name_singular: category label: Categories label_singular: Category preview_path: categories/{{slug}} folder: content/categories create: true slug: “{{slug}}” identifier_field: name editor: preview: false fields:
  • label: Name name: name widget: string
  • label: Image name: image widget: image
  • label: Description name: description widget: markdown
• name: videos name_singular: video label: Videos label_singular: Video preview_path: videos/{{slug}} folder: content/videos create: true slug: “{{slug}}” identifier_field: name editor: preview: false fields:
  • label: Name name: name widget: string
  • label: Source name: src widget: text
  • label: Notes name: notes widget: markdown
  • label: Publish Date name: date widget: datetime
  • label: Author name: author widget: string default: Daniel Kelly
• name: products name_singular: product label: Products label_singular: Product preview_path: products/{{slug}} folder: content/products create: true slug: “{{slug}}” identifier_field: name editor: preview: false fields:
  • label: Name name: name widget: string
  • label: Feature Image name: image widget: image
  • label: Features name: features widget: list field: label: Feature name: feature-item widget: string
  • label: Summary name: summary widget: text
  • label: Description name: description widget: markdown
  • label: Price name: price widget: string
  • label: Preview URL name: preview_url widget: string
  • label: File GUID name: file_guid widget: string logo_url: /logo-frames/logo-f0.svg

Additional context Thanks for the help!

[danielkellyio]

that did the trick! Thanks!

[sleepingkiwi]

This one’s actually a separate CSS issue I believe - I just had to work around something very similar myself.

You can see in @danielkellyio screenshot the top of the options box trying to render and then being cut off because the containing object has overflow: hidden;

This happens to relation and list widgets (or anything that renders a select style list) that are nested in other object/list widgets and appear near the bottom.

My working solution is some (slightly hacky) CSS added to the admin page:

/* hidden overflow cuts off dropdowns in objects */
div[class*=ControlContainer] > div,
div[class*=NestedObjectLabel] + div {
  overflow: visible;
}

You can see the before/after in these screens:

Before - you can see the very top of the select box.

After - you can see the select overflowing it’s parent.

So far nothing seems to have broken as a result of overriding the overflow: hidden; rule, at least in modern browsers, but I’m not sure of the original intent behind the rule so I’m not sure whether it’s safe to remove from ObjectControl.js which I believe is where it originates…