Button Group - TL/BL Radius on Mobile Devices

Have just noticed while checking a page on an iPhone and iPad that the TL/BL radius on the button for a Button Group disappear when the button is clicked. This appears to be consistent on every instance I have of Button Group. The radii display fine on desktops. I don’t think I’ve done anything unusual. Is this a bug?
I created a page with fresh 3 Button Groups - left, centre and right aligned to test it - with the same results:https://www.whiteonline.ca/development/

Here is what it looks like on my phone:

I am headed out of the office for several hours, but if you send me a ZIP file containing your project file I will have a look at it when I return.

Will do - thanks. Will send it this evening when I get back home.

Sounds good. Look forward to it.

So the reason you’re getting the effect is that you’ve got just one button in the Button Group. Being that the stack is a group of buttons it is expecting more than one button. You’ll see here I published your project file with a second button in the middle Button Group stack, which works as it should: https://elixirgraphics.com/test/buttongroup/development/

If you only need one drop down and but a group of buttons, then give the Drop Down stack a try, which also comes with Foundry. It is for building one drop down.

1 Like

Thanks, Adam

Your help is very much appreciated. I can see I’ve used the wrong stack for what I needed - I’ve edited my own test page with a Dropdown and it displays perfectly on my mobile devices. I will switch them out on my site. Thanks for that. I made the choice to use Button Group on my site so long ago that I don’t recall why I didn’t consider Dropdown instead.

Unless I am missing something else I still think that there remains a corner radius issue with Button Group on mobile devices - or at least on my mobile devices. I added a second button to the group on my test page with these results:

https://www.whiteonline.ca/development/

  1. With the first button clicked, the TL corner radius of button 1 disappears. I would have expected this to still show the corner radius.

  2. With the second button clicked, the BL corner radius of button 2 disappears and a TR corner radius appears on button 2. I would have expected these to be the other way around.

These buttons display as I would have expected on desktop displays - even with resizing the browser window to below the mobile breakpoint. They also display as expected on the RW8 simulator for mobile devices. It is only on my iPhone and iPad that I have seen the results as shown in the images I’ve posted here.

Gary

Do you have the mobile orientation set to vertical? (Sorry can’t check as I’m not at the desk).

If not the use that option. Currently it is breaking because the two are too wide to sit side-by-side on the small screen. Likely that you’d need vertical orientation for the mobile breakpoint.

Yes - all of the examples so far had mobile orientation set to vertical. I did add another Button Group to the test page without setting mobile to vertical - it is now the bottom example on the page. In that case the buttons are displayed in the same row on my iPhone in portrait mode and the corners radii disappear on button 1 TL/BL when clicked. Button 2 retains the radii when clicked.

I’ll take a closer look when I’m back in the office. I suspect it is because it is a drop down at the ends. It is originally designed to be just buttons but has been adapted for drop downs.

Took a look at this a little bit just now. It does appear to be because it expects the drop downs to not be on the ends, but instead more toward the inside of the group, since the Button Group is meant for buttons. That said I’ll take a look at this deeper when I get a moment. I’ll add it to the issue tracker for now though.

I’ve got a big project I’m trying to wrap up for Foundry, but as soon as it is done I have a list of some minor bugs and enhancements that will get knocked out!

2 Likes

Sounds good. Thanks for looking at it.
I’ve fixed the issue I had on my site by switching out the instances of Button Groups with Dropdowns for single buttons as you suggested - they all work great now.

Think I have a fix for this one. And believe it or not, as easy as this one looks, it was just the opposite. I’ll have this in the next update for Foundry.

5 Likes

Awesome. Thanks for that; what you do is much appreciated. And sorry for being the cause of the headache on this one!

1 Like

No problem. Better to find out about it and get it fixed. :+1:

2 Likes