canonical / canonical/vanilla-framework

Fieldset causing content to be cut-off

Open
#4,699 2 comments 0 reactions 0 assignees View on GitHub
P3 Triaged Triaged: v4
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

**Describe the bug**

the `fieldset` element has `overflow: auto`, this can cause some content to be cut-off and requires scrolling to reach that content. This is most apparent with the phone number dropdown found on all forms (see screenshot below)

**To Reproduce**

Steps to reproduce the behavior:

1. Go to https://ubuntu.com/openstack/contact-us
2. Click on the phone number country code drop down
4. See it is cut off by the fieldset and a scroll option appears to reveal the full content

**Expected behavior**

The country code drop to overlap the field set

**Screenshots**

![image](https://user-images.githubusercontent.com/58276363/224676810-2dca6b39-50ef-46c8-87f0-3fb3fd8b8867.png)

**Additional context**

I have [this issue](https://github.com/canonical/ubuntu.com/pull/12659) filed that addresses this problem by setting all fieldset elements to have `overflow: visible`

Contributor guide

Open the contributing guide

Research direction

Reproduce the problem at ubuntu.com/openstack/contact-us by opening the phone-number country-code dropdown. Then find the framework rule applying overflow:auto to fieldset and verify the fix against the expected overlapping dropdown; the issue links a related ubuntu.com pull request for context.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.