Ng-Bootstrap not displaying active pills for dropdown addition

In my Angular-6 project, I have been using ng-bootstrap along with ngbootstrap-pills. I attempted to include active pills for the dropdown icon by removing the button option, but unfortunately, it did not work. Does anyone know the correct way to accomplish this?

You can find the code on Stack Blitz here.

This is a snippet of my .css code:

.nav-pills .nav-link.active, .nav-pills.show> .nav-link {
    color: #fff;
    background-color: #262262;
}

a:after {
  content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
  height: 0;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  bottom: -1px;
  left: 50%;
  margin: 0 0 0 -3px;
  z-index: 100;
}

I wanted to achieve something similar to the image below:

https://i.sstatic.net/lfQ9h.png

Thank you.

cssangularng-bootstrapnav-pills

Answer №1

This particular method does not rely on .svg files to function.

https://i.sstatic.net/xclGb.png

::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link {
  color: #fff;
  background-color: #262262;
  position: relative;
}

::ng-deep .nav-pills .nav-link.active:after {
  content: '';
  position: absolute;
  height: 0;
  width: 0;

  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;

  display: block;
  left: 35%;
  bottom: 0;
}

Demo of the code in action

Answer №2

To ensure the styles are applied to the library, consider using the ::ng-deep selector.

For your specific case, you can use the following code:

::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link {
    color: #fff;
    background-color: #262262;
}

::ng-deep a:after {
  content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
  height: 0;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  bottom: -1px;
  left: 50%;
  margin: 0 0 0 -3px;
  z-index: 100;
}

For more information on Angular View Encapsulation, check out this resource.

Answer №4

After some searching, I managed to discover a solution!

Check out the code on Stackblitz.

::ng-deep .nav-pills .nav-link.active:after {
  content: '';
  display: block;
  position: absolute;
  left: 6px;
  top: 100%;
  width: 0;
  height: 0;
  border-top: 7px solid #262262;
  border-right: 13px solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 15px solid transparent;
}



::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link  {
  display: inline-block;
  position: relative;
  background: #262262;
  padding: 8px 0;

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to ensure that a document in mongodb remains unchanged if it already exists?

As a beginner in the coding world, I am diving into developing an application with SpringBoot that incorporates SpringData MongoDB, Angular, and MongoDB itself. My goal is to create a form submission process where if a user's details are already prese ...

angularmongodbspring-bootspring-data-mongodb

In the realm of Typescript Angular, transferring the value of an object's property to another property within the

I'm working with a large TypeScript object and I am hoping to automate certain parts of it to streamline my workflow. myObject = [ { id: 0, price: 100, isBought: false, click: () => this.buyItem(100, 0) } buyItem (it ...

javascriptangulartypescriptobjectautomation

Adjust the text placement on an adaptable image according to a particular section of the image

For accessibility reasons, I have an image that requires text to be overlaid on it. The image is responsive thanks to Bootstrap's img-responsive class. I need the text to stay positioned correctly on the image even as its size changes. Is there a way ...

htmlcssbootstrap-4

Tips on decorating multi-chain selection buttons

Our latest project involved implementing multi-select buttons. Due to the complexities of styling select and option tags, we decided to utilize chosen.js for this purpose. <link rel="stylesheet" href="$url_link/css/user_css/chosen.css"> <script t ...

javascriptjquerycssjquery-chosenchained-select

Creating a portion of a Bootstrap Dropdown menu that is scrollable

Looking for a way to design a friends requests menu using Bootstrap's dropdown feature. My goal is to create a scrollable menu where friend requests overflow if there are more than 3, while keeping the "you have 2 requests" and "check all requests" op ...

jqueryhtmlcss

Are there any stylesheets containing the specified properties?

I need a CSS template that includes the following features: Header with website title, menu bar, and search box at the top of the page Tree-based navigation for folders or subpages on the left side Main content area on the right side I have tried search ...

css

Deactivating Chrome Autofill once more in version 70.0.3538.67

Unfortunately, with the latest Chrome version 70.0.3538.67, all my previous methods of disabling autofill/autosuggest no longer seem to be effective. I am looking for a clean solution that is practical and efficient. Additionally, I have forms with a com ...

angulargoogle-chromeinputautocompleteangular-material2

The issue at hand is that the property 'Draw' is not found within the 'Control' type

I am working on integrating a map component using leaflet and other leaflet plugins. However, I am facing an issue where the other plugins do not seem to work with TypeScript for some unknown reason. For instance, I am encountering a problem when trying t ...

angulartypescriptleafletangular-clileaflet.draw

Prioritize the timepicker over the use of a modal window

Having an issue with my time picker in Angular being blocked by a modal window. Component.ts open() { const amazingTimePicker = this.atp.open(); amazingTimePicker.afterClose().subscribe(time => { console.log(time); }); } // T ...

htmlangulartypescripttimepicker

Display a caption with a translucent color overlay when the mouse hovers over an image

I have created a code snippet that displays a caption with a semi-transparent red overlay when hovering over an image: HTML: <a href="http://www.domain.com/"> <div class="thumb"> <img src="http://www.domain.com/thumbnail.jpg" w ...

htmlcsshoveropacity

The advice I received was to avoid using max-width and instead utilize min-width when styling with CSS

With @media screen and (max-width:700px) { Link to image 1 Whenever I use @media screen and (min-width: 700px) { it messes up. How can I adjust it for min-width without causing issues? Link to image 2 ...

css

unique close button design for pop-up video player on YouTube

Struggling to add a custom close button to my Youtube video pop up. After unsuccessful research attempts, I'm turning to my fellow stack buddies for help. Any suggestions? ...

htmlcssyoutubepopup

Responsive design challenge

I'm currently working on a WordPress theme with a fixed header and footer on the homepage, and a vertical slider in between that includes content and images. I've made the website responsive, but I'm facing an issue where the content in the ...

htmlcssresponsive-designscrollcss-position

Centering an item using Bootstrap

I am using bootstrap in reactjs and attempting to center a text in the middle of the screen, but it seems to not be working. Can someone please point out what I am doing wrong? <div className="h-100 d-flex align-self-center justify-content-center&q ...

cssreactjsbootstrap-4bootstrap-5

Inverting the colors of the image and changing the background color

I have a blend of blue and white image with a white background. When the div is clicked, I want to switch the colors around (background to blue and blue part of the image to white, white part to blue). Html : <div class="col" ng-click="onHomeButtonCli ...

cssangularjs

Using CSS nth-of-type on the same level of the DOM allows for specific

I was having trouble using the nth-of-type(2n+1) selector to target odd and even rows in the scenario below. What I wanted was for the nth-of-type selector to apply different styles to the odd rows with the classes "row-data row-header" and "row-data row-c ...

javascriptjqueryhtmlcss

The Angular 2 application functions perfectly on my work computer, but it encounters some issues on my home computer

I'm facing a bit of an issue that I believe might be related to my environment rather than a coding problem. About 2 weeks ago, I set up angular CLI on my work computer and everything was running smoothly. However, when I tried to replicate the setup ...

angular

CSS - Achieving full width on hover even when the element has a specified width setting

I am encountering an issue with my CSS. Although I have successfully centered everything, I am facing a problem with the hover effect in CSS. Whenever I apply the active class or hover over an li element, the background color expands to 100%. Additionally, ...

javascripthtmlcss

Converting CSS to LESS with multiple classes sharing the same properties: step-by-step guide

I have some CSS code here that I'd like to convert into LESS format. Can you help me with that? .A .B h4, .A .B h4 a, .A .C h4, .A .C h4 a, .D h4, .D h4 a { color: #345e8a !important; display: inline-block; font-family: @font-family-sans ...

htmlcssless

I need assistance with using the angular-oauth2-oidc library to retrieve data from an asynchronous storage provider and then pass it to a synchronous storage implementation

Typically, the angular-oauth2-oidc library saves tokens in session storage by default. While you can provide your own storage provider through the OAuthStorage class, it requires a storage provider that can retrieve data synchronously. I am developing a ...

angulartypescriptasynchronousionic-framework