Skip to content
GitLab

Multiple button addons in input groups

Closed Administrator requested to merge github/fork/Caster/input-group-multiple-buttons into v4-dev

Created by: Caster

Let me start by saying that I am not sure if this qualifies as a bug fix or a feature request, but I feel like it is more a feature request, hence I am opening this against the v4-dev branch. I can make this work for master too, if you like.

Changes I made (as screenshots, because images say more than a 1000 words and all that)

Before before before-focus

After after after-focus after-dropdown-1 after-dropdown-2

Aim of change In an .input-group, it is now possible to add multiple button addons after the input with dropdown menus. These have to be placed in separate .input-group-btn elements because otherwise the JavaScript breaks. Focus state now highlights the complete group of controls too, instead of only the input. Note that the highlighting only works if the input is the first element in the .input-group, because of CSS limitations (I want :focus-within).

Usecase In a project I implemented this for, I have a search box where the user can change a couple of settings for the search. There are three settings that are all of the type 'select from a couple of options'. My approach (that I feel is intuitive, correct me if I'm wrong) was to add three dropdown selects as addons. When that was not styled the way I expected it to be, I first tried to find out what I was doing wrong, then whipped up this, then improved it before creating this pull request.

Remarks I am aware of the following issues:

  • The highlighting does not work when there are addons before the input. I purposefully disabled the highlighting of other controls then, because I am unable to select the siblings before the :focused input with pure CSS. An implementation using JS is of course possible, but I think that that is not something you guys would be happy with, right? This can be fixed once (if) the CSS4 :focus-within selector is supported.
  • The left border of buttons is not visible when hovering them. The current implementation has exactly this issue, but for right borders. As soon as a button is focused or active, the border becomes visible. The current implementation will still not show the right border when the button is focused or active.

Finally, I feel that this pull request has an added value because it gets rid of a margin-left: -1px hack. This is in place currently to get rid of "double borders". I fix this by removing the left border of elements and adding it back on :focus (and :active) only. At that point the z-index is increased as well, as in the current implementation.

Side note: are you considering to introduce variables for the border width as well, or will that remain "hard-coded" to a single pixel?

How can I test this? I extended the Bootstrap documentation examples and used those for testing.

Link to development server (for your convenience :-)) | current documentation.

To conclude It goes without saying that I am open to any and all suggestions, critique and feedback. I can update this pull request as required. Thanks in advance for considering this change.