Is there a way to apply a css class to all nested elements in Angular 6 using Ngx Bootstrap?

I've defined a CSS class as follows:

.panel-mobile-navs > ul > li {
 width:100%
}

Within the HTML, I am utilizing Ngx-bootstrap for a series of tabs like this:

<tabset class="panel-mobile-navs" > ... </tabset>

My intention is to modify the styling of the elements within it. However, upon page load, the generated HTML inside the "tabset" element looks like this:

<ul class="nav nav-tabs" ng-reflect-klass="nav" ng-reflect-ng-class="[object 
Object]">
...
<li class="nav-item" ng-reflect-ng-class="nav-item,"> ... </li>

</ul>

Despite my created CSS class, it doesn't seem to apply to the ul and li elements. Could it be an issue with my CSS implementation? Your help is greatly appreciated.

htmlcssangularangular6ngx-bootstrap

Answer №1

This particular guideline is dependent on the precise DOM layout of 

TABSET.panel-mobile-navs > UL > LI
:

.panel-mobile-navs > ul > li { ... }

It's possible that the framework in use is inserting additional DOM elements which could be interfering with this rule. You may want to consider directly targeting the .nav-item class instead.

Answer №2

It is recommended to avoid using descendant selectors and instead use class names for better performance. Based on your markup, you could try something like this:

// SCSS
.panel-mobile-navs {
   .nav-tabs {
      // styling for ul here
      .nav-item {
         // styling for li here
      }
   }
}

// CSS
.panel-mobile-navs .nav-tabs {
   // styling for ul here
}
.panel-mobile-navs .nav-item {
   // styling for li here
}

Be sure to inspect the rendered elements to confirm that the css rules have been applied: example

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

Encountering a 'Cannot Get /' Error while attempting to reach the /about pathway

I attempted to create a new route for my educational website, and it works when the route is set as '/', but when I try to link to the 'about' page, it displays an error saying 'Cannot Get /about' Here is the code from app.js ...

javascripthtmlnode.jsexpressweb-applications

The title element is persistently appearing on the same line

As a beginner, I've created a document with a 3x3 checkerboard using HTML and CSS. However, I'm facing an issue where the heading element is not displaying on a separate line as expected. I believe the problem lies in the CSS styling, specifical ...

htmlcsspositioncss-float

Guide on displaying the name attribute of a button along with its price in a separate div when clicked

Upon clicking the Koala button, I want to display a message showing the id name of the button and the corresponding price for Koalas. Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link h ...

javascripthtmloop

Tap on the image placeholder to replace it with your own image

Just starting out, I have the following HTML code within a <form>: <div class="image-upload"> <img id="send_photo_img1" src="assets/images/index2.png"/> <input id="send_photo_input1" type="file"/> <img id="send_photo_img2" sr ...

jquerycss

What is the best way to style the header of a table when scrolling in CSS?

Currently, I am facing an issue with applying the top CSS property to the thead element of a table while scrolling. I have attempted various methods but have been unsuccessful in achieving the desired outcome. Initially, I used the scroll event, however, ...

javascriptjqueryhtmlcss

Creating two columns using React and Material-UI Grid while utilizing just one map function for iteration

I am facing a challenge with Material-UI Grid. I want to display the information from my map function in two columns instead of one. I tried adding another Grid item sm={6} and using the same map function, which resulted in two columns but with identical i ...

cssreactjsdictionarymaterial-uigrid

What are the style attributes that can be edited in each ant design component?

My goal is to customize an ant design card by adding a border only on the left and right sides of the card. The bordered attribute in the card component seems to either remove the entire border or display it on all sides. I am looking for a way to specif ...

cssreactjsweb-componentantd

Issue with Swiper JS: The buttons on pages three and beyond are unresponsive

I'm having trouble with the functionality of the "Back" button on pages 2 and 3 of my website. Can anyone help me figure out why it's not working? My goal is to create a website that resembles a game menu, similar to Deus Ex The Fall. I'm u ...

javascripthtmlcsssliderswiper.js

Retrieving AJAX data in a Node.js environment

In my HTML application, I am utilizing AJAX to showcase the output on the same page after the submit button is clicked. Before submitting, I am able to retrieve the values passed in the HTML form using: app.use(express.bodyParser()); var reqBody = r ...

javascripthtmlajaxnode.js

Angular 2 - Dependency Injection failing to function

I have created two different implementations for an interface and assigned them as providers for two separate components. However, I am encountering the following error: Error: Can't resolve all parameters for ChildComponent: (?). What could be the i ...

angulartypescript

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Hi there! I hope you're doing well! I've come across a strange issue in Tailwindcss. When I close the scope of a component and try to use props like ...rest, the className doesn't function as expected. Here's an example: import { Butto ...

cssreactjstypescriptnext.jstailwind-css

Prevent ng-repeat from rendering the contents of my div

Currently, I am in the process of modifying a website for which I need AngularJS. I am trying to use the ng-repeat command to display some documentation on the site. However, whenever I add the ng-repeat within a div, it seems to "destroy" the layout and I ...

javascripthtmlangularjs

Displaying a collapsible table directly centered within the table header

I am having trouble centering my table header in the web browser page. When I click the "+" button, the data is displayed beneath the table header, but I want the collapsible table to be centered directly below the header. I have tried making changes in CS ...

javascripthtmljquerycss

Access SCSS variable values in Angular HTML or TypeScript files

So, I've been looking into whether it's feasible to utilize the SCSS variable value within HTML or TS in Angular. For instance: Let's say I have a variable called $mdBreakpoint: 992px; stored inside the _variable.scss file. In my HTML cod ...

javascriptcssangulartypescriptsass

Issue encountered while deploying Firebase Functions: Unable to parse function triggers

Experiencing difficulty deploying firebase functions from an angular project after updating to the latest firebase-tools 7.8.1 version. The project's package.json contains "firebase-admin": "~6.0.0", "firebase-functions": "^2.1.0", and "firebase-funct ...

angulartypescriptfirebasegoogle-cloud-functions

Issue: This feature cannot be accessed when using the Angular CLI outside of a project workspace during a legacy application migration

Currently working on updating a legacy Angular application where I need to address some vulnerabilities. After updating the node image in the Docker file (which was also updated previously), I encountered the following issues. Unfortunately, I'm havin ...

node.jsangulardockernpmnode-modules

Toggle between a list view and grid view for viewing photos in a gallery with a

Hey there, I'm a newbie on this site and still getting the hang of jQuery and JavaScript. Though I do have a good grasp on HTML and CSS. Currently, I'm working on a photo gallery webpage as part of my school project using the Shadowbox plugin. Wh ...

javascriptjqueryhtmllistviewphoto-gallery

Is there a way to create distance between these icons?

<div id="unique-icons"> <a href="#"> <img class="github-logo1" src="GitHub-Mark-64px.png" alt="first github logo"> </a> <a href="#"> <i ...

htmlcssicons

Leveraging Express for delegating requests to an ADFS server

We are currently facing a challenge with authenticating to our on-premise ADFS 3.0 server. Our Angular application, a single-page app, needs to authenticate with the ADFS server. However, we are encountering CORS issues due to them not being on the same se ...

angularexpressauthenticationsingle-page-applicationadfs3.0

The Impact of Using Custom HTML Tags with AngularJS Directives

If I were to create a unique avatarDirective in AngularJS that is connected to an userEmail property on the scope. The directive would update this HTML … <avatarDirective userEmail="user.email" /> with a standard img tag that has its src attribut ...

htmlangularjsangularjs-directive