bootstrap-vue: (dropdown+nav-item-dropdown): `noCaret` option causes unwanted side effects

Enabling the noCaret option on the dropdown or nav-item-dropdown component causes some unwanted styling issues due to dropping the .dropdown-toggle class.

Bootstrap uses this class for some minor styling changes for dropdowns in button-groups, input-groups and even the button itself.

A better solution would be to add a custom class like .dropdown-toggle-no-caret to the dropdown-toggle when the noCaret option is set and use some custom CSS to hide the caret.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 6
Comments: 18 (16 by maintainers)

Commits related to this issue

fix(dropdown): Use custom CSS for `no-caret` option #1473 (#2136) * fix(dropdown): Use custom CSS for `no-caret` option * Make dropdown tests pass — committed to bootstrap-vue/bootstrap-vue by jacobmllr95 6 years ago

Most upvoted comments

A quick and dirty way to fix the rounded corner issue when using no-caret on a dropdown button is to add Bootstrap’s new rounded class.

Example (first button does not have class, second button has the class applied with toggle-class="rounded"):

<b-dropdown variant="danger" dropup no-caret right class="mr-2">
  <template slot="button-content">
    <i class="fa fa-desktop" aria-hidden="true"></i> <span class="sr-only">Screens</span>
  </template>
</b-dropdown>

<!-- toggle-class="rounded" added to fix button corners when no-caret is in use -->
<b-dropdown variant="danger" dropup no-caret right class="mr-2" toggle-class="rounded">
  <template slot="button-content">
    <i class="fa fa-desktop" aria-hidden="true"></i> <span class="sr-only">Screens</span>
  </template>
</b-dropdown>

curtgrimes on Apr 9, 2018

@jackmu95 we currently try and follow the bootstrap V4 styles where possible, without creating new styling classes.

There has been muttering over at Bootstrap on github about no caret options for dropdowns, but nothing set in stone other than the mentioned removal of the dropdown-toggle class.

If there are changes over at Bootstrap V4 for handling a no caret toggle via classes, then we will definitely adjust how it is handled in Bootstrap-vue.

tmorehouse on Dec 16, 2017

I was going to open a new issue, but I saw that this is suffuciously compatible with my problem.

@tmorehouse, see this image, and note that .btn without the .dropdown-toggle class runs out of rounded corners. (I was slightly annoyed at this):

screenshot_20180305011751

noCaret is a customized and exclusive Bootstrap-Vue solution, and should be treated as such.

Good to know that you use and exploit the entire Bootstrap Style pattern, so do not remove the .dropdown-toggle class by breaking your design system. It makes no sense. As long as they do not look for a no-caret option, Bootstrap-Vue must take over and support its properties.

@jackmu95 Your thinking is correct.

AdsonCicilioti on Mar 5, 2018

@jackmu95 Sure, we could add that custom CSS for the no-caret.

Re input-group group CSS: It is included in multiple components just in case people are importing only a a few of them, and pace the BV components inside plain HTML markup for input groups (i.e. not using the b-input-group component).

If all the components are included in a project, then the CSS only gets included once in the project.

tmorehouse on Nov 4, 2018