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

Looking for guidance on managing view redirection in Django (Updated)

I ran into an issue with a previous question I posted, you can find it here Due to some formatting errors because it was my first time posting a question, the original question is currently closed. I have made edits and resubmitted it for reopening, but I ...

htmlpython-3.xdjangodjango-modelsdjango-views

Angular: Retain the original value of the observable

When making HTTP requests to a backend and receiving data, I use an observable stream and subscribe to it in my HTML template using async pipe. However, I am facing an issue. I need to continuously send multiple requests by clicking a button, but I want th ...

angularrxjs

Incorporating a YouTube video

Having trouble integrating a YouTube video that won't play automatically on your website? The video is visible, but just doesn't start playing on its own. What could be causing this issue? Appreciate any help you can provide! ...

cssyoutube

Steps for clicking on the center of a leaflet map with protractor

I'm currently facing an issue where I am attempting to click on the center of a map located in the second column of the webpage, which has an offset. However, I am encountering a problem where the cursor always points to the center of the page instead ...

angulartypescriptseleniumprotractorleaflet

Having trouble implementing render props for a toggle button that reveals/hides child components

My goal is to display or hide a couple of child components based on a toggle click using the original HTML structure provided. However, I am encountering an issue where the EditToggle link needs to be displayed next to the h2 element inside the "subtitle-c ...

javascripthtmlreactjs

Changing the height of a Bootstrap 3 row without using less variables

Can someone please explain how to adjust the .row width in Bootstrap so that the col grid still functions correctly, but certain .rows are tighter than default? Thank you. ...

htmlcsstwitter-bootstrap

What is the correct method to define the width as a percentage while also maintaining a minimum width in pixels?

My header/navigation bar div features a repeat-x background image. Within this, I have a horizontal navigation that needs to be centered over the background with a specified min-width and normal width. I want the navigation to be 80% of the full width, wi ...

htmlwidthbackground-imagecss

Angular 10 library devoid of ivy technology

After successfully building an Angular 10 library and using it via a direct import (file:dist/my-lib), I decided to publish the library to a private npm repository. To accomplish this, I made changes to my tsconfig.lib.json file and disabled ivy: "ang ...

angularangular-ivy

Easier JavaScript for numerous HTML elements

I am an aspiring JavaScript learner seeking advice. Currently, I am working on a website that features numerous items with multiple images for each. I am utilizing JQuery to display a larger image when the user hovers over a thumbnail image. My query is ...

javascriptjqueryhtml

Aligning the last element within a list

I'm having a major issue with this code. Despite reading all related posts, I still can't get it to work. Seems like I might be missing something obvious. LOL. Here is the site (best viewed in Chrome): and here is what I believe is the simplifi ...

htmlcssgoogle-chrome

Strategies for enhancing performance in an Angular 4 project

Currently, I am engaged in a project that involves utilizing Angular 4 for the front-end and PHP for the back-end with the support of an Apache server on Ubuntu 16.04 LTS. We have incorporated Node JS to facilitate the functionality of Angular. This raises ...

apacheangulartypescript

What is the best way to showcase the outcome on the current page?

This is a sample HTML code for a registration form: <html> <head></head> <body> <form id="myform" action="formdata.php" method="post"> username:<input type="text" name="username" id="name"><br> password:&l ...

javascriptphphtmlajax

Enhance your website with a customizable language selection feature using HTML and CSS

Currently, I am in the process of creating a dynamic language selection feature using HTML and CSS. Initially, this is what it looks like: https://i.stack.imgur.com/bhnaA.png Upon hovering over it, this is the effect I want to achieve: https://i.stack.i ...

htmlcss

An HTML webpage that automatically refreshes but does't display the iframe content when the underlying HTML page is being updated

I have a script that updates a text file with completed tasks, creating log files in the process. I then use another script to format these logs with HTML code for tables, headings, banners, etc., saving the formatted version as Queue.html. To display this ...

htmlbatch-fileiframecommand-linepage-refresh

employing a modal to create an interactive form in Angular

I recently started delving into Angular and I'm aiming to develop a dynamic form that can create entries in my database with fields that vary based on a dropdown selection in the modal header. I've searched for solutions but only found help for c ...

angularformsdynamicmodal-dialog

Scaling boxes responsively according to screen size utilizing Bootstrap

Creating a portfolio website with a carousel section to display completed projects in a 2x2 grid layout, transitioning to a 1x4 on smaller screens is proving to be quite challenging. After trying various methods from Bootstrap documentation and YouTube tut ...

htmlcssbootstrap-4gridbootstrap-5

When it comes to choosing between CSS and Angular Animations for supporting animations on both browsers and NativeScript mobile applications, which approach is more effective?

Are angular animations my only option or can I also utilize css animations with native elements on mobile devices? How are css animations from an angular application translated to native mobile, and is this method less effective than angular animations? I ...

cssangularnativescriptnativescript-angularangular-animations

Why does using `withCredentials: true` and including a `body` in the request cause a CORS error in Angular HttpClient?

My objective is to make a request to a Cloud Function, receive a response with a Set-Cookie header, and have the browser store the cookie. The issue arises when the response containing a Set-Cookie header is ignored without the presence of withCredentials ...

angularexpresscookiesgoogle-cloud-functions

Tips for resolving issues with the carousel container in bootstrap?

Is there a way to adjust the carousel box container in Bootstrap so that it remains consistent even with images of varying sizes? Currently, the box size changes based on the image dimensions when sliding through the carousel. Sample Code: <h1>Caro ...

javascriptjqueryhtmltwitter-bootstrapcarousel

Personalizing the design of Bootstrap

As a beginner in working with Bootstrap, I am currently focused on creating an index html page for an online shop. For reference, here is an example - https://jsfiddle.net/a393wtng/1/ Upon resizing the output frame, it becomes apparent that 4 products can ...

htmlcsstwitter-bootstrap