Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

NgbDropdown: remove dropdown arrow

I'm using the NgbDropdown component in my Angular 2 application. It is working fine, however I want to remove the arrow that is displayed on the right side of the button.

<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
  <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>
</div>

Dropdown Image

like image 833
JP4 Avatar asked Mar 19 '17 20:03

JP4


People also ask

How do I remove the arrow icon from a drop down box?

Every Bootstrap dropdown button or link has an ::after selector in CSS. ::after selector is often used to insert some text after the content of the element. In this case, the content is a dropdown arrow. To remove it, just make the content go 'none'.

How do I remove arrow from react dropdown?

You can hide the dropdown arrow from the DropDownButton by adding class e-caret-hide to DropDownButton element using cssClass property.

How do I remove the drop down toggle icon?

In Bootstrap 4, you can remove the dropdown arrow which is called caret by declaring a $enable-caret SASS variable and setting it to false : $enable-caret: false; This overrides the default value of true set in the Bootstrap's _variable.

How do I remove a dropdown from bootstrap?

To disable to dropdown item in Bootstrap, use the . disabled class with the . dropdown-menu class.


2 Answers

Solution

Simply add the following CSS style to override the default style of the .dropdown-toggle::after pseudo-element:

.dropdown-toggle::after {
    display:none;
}

Why?

By default bootstrap adds the arrow to the dropdown component via the ::after pseudo-element.

Doing this removes it.

Here is a LIVE DEMO demonstrating it.

How do you work it out?

Using chrome dev tools you can inspect the element:

enter image description here

We can see from the above that there is a style set for a pseudo-element ::after on the .dropdown-toggle class. Let's go and change the properties of the element! For this purpose we are changing the display property to none:

enter image description here

The pseudo-element is no longer there!!:

enter image description here

like image 177
cnorthfield Avatar answered Oct 17 '22 19:10

cnorthfield


add the following style to override the default one

.dropdown-toggle::after{
    content:initial
 }

LIVE DEMO

like image 8
Aravind Avatar answered Oct 17 '22 17:10

Aravind