Community forum for knowledge and support

Updated last year

Toggles not displaying correctly on mobile

At a glance

A community member reported an issue with toggles not looking right when opened on a phone, and shared a link to a preview. Other community members chimed in, noting that the issue was also present with Finsweet's toggles, but only on actual phones, not when simulating a phone browser on a desktop. After some discussion, a community member provided a solution: adding overflow: none to the toggle1_field resolved the issue on their iPhone 14 Pro Max using Chrome.

Useful resources

MMattias Pärlesköld

Hi! These toggles does not look right when opened on a phone! https://library.relume.io/preview?cid=toggles/toggle1_component

7 comments

MMattias Pärlesköld

Did some more research and seems to be a wider problem as I found that Finsweet's toggles share the issue.

What's interesting though is that it is only on an actual phone that I succeed at recreating the problem. When viewing it on desktop it's not there, regardless what tools I use to simulate a phone browser (eg Chrome DevTools and other plugins).

Would greatly appreciate it if someone found the cause and a solution!

MMattias Pärlesköld

Here's what it looks like on a phone (the blue part to the left is what's wrong):

DDan

Hey ! will get back to your shortly on this 🙂

MMatt Johnson

what device and what browser on your device?

MMattias Pärlesköld

On desktop:

Device: MacBookPro, M1 Pro, MacOS Ventura 13.2.1
Browsers I've tested: Chrome, Safari, Edge

On mobile:

Device: iPhone 15 Pro Max, iOS 17.1.1
Browsers tested: Chrome, Safari, Edge

Same issue regardless of browser on my phone.

I just asked my friend with an Android check it on his phone and there it appeared just fine, no blue thing to the left. So it might be an iOS related issue somehow?

MMatt Johnson

apologies for the delay. If you add overflow none to the toggle1_field it will resolve the issue - I tested it on my iPhone 14 Pro Max using Chrome.

MMattias Pärlesköld

Yes, that solved it. Thanks!

Add a reply