Split Button Group issue

User 2706435 Photo


Ambassador
444 posts

When creating a split button group, I noticed an odd behavior when removing text from a button link to enable the arrow button to only be displayed.

To recap, a split button in made within a container given the Foundation .button-group class. Two buttons are manually placed in the container. The 2nd button gets additional Foundations classes of .arrow-only and .dropdown. If I do this with button-links, I get a problem. In Foundation Framer, when editing the text, specifically to delete it so that only the dropdown arrow will be visible, a line break is added. The arrow is dropped to a new line. Replacing the text with a space, still shifts the arrow to the right. The line break should not be added. It seems it is there so that when editing the text again, there is a place for the cursor. When adding text again, that line break is removed and the new text is plaved. But the goal here is to remove the text, and not have a line break. I don't know what the easy fix is, but it seems the split button group can't be replicated.

In RSD a similar think is done, a <br> is also added, but it does not add a new line. When adding text again in RSD to a button link, a <br> that was added, still remains, but the button link is still on one line.
User 2706435 Photo


Ambassador
444 posts

Well, ONE way around is to make the second button a Container-Link, and go about it that way. However, all other styles will also have to be manually added because its a container and can't reuse the button-link classes.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.