Exploring new ways to customize Nebular styles within an nb-user tag

I've been struggling to adjust the font-weight and border-radius of a nb-user tag without any luck. I attempted to add a class and make changes in the .scss file, but nothing seemed to work

This is the HTML

<div class="teachers-box" *ngFor="let user of usuarios">
      <nb-user
        size="medium"
        name="{{ user.name }}"
        color="#d8d8d8"
        onlyPicture
        class="teacher-box"
      >
      </nb-user>
    </div>

This are the .scss classes

.teachers-box {
  margin-left: -13px;
}

.teacher-box {
  font-weight: bold;
  border: solid 2px #ffffff;
}

The teacher-box, which is inside the nb-user tag, is not responding to the styling. This is not working https://i.sstatic.net/QWe3v.png

This is working, but I had to input it directly in the browser. I need to apply it to a tag that is not visible in the text editor

https://i.sstatic.net/7wZ8w.png

cssangularnebular

Answer №1

To style the nb-user element, you will need to target it directly.

.teachers-box nb-user {
   margin-left: 13px;
}

Here is another example with more specific targeting:

.teachers-box nb-user .user-name,
.teachers-box nb-user .user-title,
.teachers-box nb-user .user-picture,
.teachers-box nb-icon {
  // add your custom CSS here...
}

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

Traversing through JSON objects in Angular 2

I am currently facing an issue while trying to iterate through a JSON object. Below is the sample JSON data: floors.ts this.floors= [ { floorName: "floor 1", result: [ { resFloor: "1", ...

htmljsonangulartypescript

Adding an image to an Angular grid cell is a simple task that can enhance

I am looking to include a full image in one of the grid cells. How can I insert an image into a grid cell? Here is the content of the component.ts file: export interface Tile { color: string; cols: number; rows: number; text: string; fontSize: s ...

angular

What is the technique for highlighting the exact data point on the XY am4chart when it is clicked?

I have been searching high and low for a solution to my problem but haven't had any luck. I am working with a traditional XY am4chart that has hundreds of data points in the line series. What I want is for the chart to display a vertical line (or some ...

angularlineamchartsamcharts4timeserieschart

Challenges encountered while running the npm start command

I'm diving into some Angular tutorials and having trouble getting npm to run on OSX Yosemite. Here's the error log. I've followed the instructions, but still can't view the compiled app at localhost:3000. 0 info it works if it ends wi ...

angularnpmlocalhostnpm-start

Setting up Angular on your Mac

Recently, I attempted to set up Angular on my macOS system. After confirming that I have npm 5.6.0 and node 8.11.1 installed, I proceeded with sudo npm install -g @angular/cli. It appeared to be successful at first, but upon running ng --version, the follo ...

node.jsangularmacosnpm

Is a fixed div located inside a fluid grid container?

Having developed a website with a fluid 12 column grid, I am looking to lock the position of a div in the right hand column once it reaches the top of the page (using something like StickyJs or a similar tool). However, when the fixed position is applied, ...

jqueryhtmlcssfluid-layoutgrid-system

The updated Bootstrap 4 carousel is only working halfway as expected when attempting to double it up, causing the scroll loop to stop functioning

Discovering a fantastic carousel modification was an exciting find, which can be accessed Here. However, when attempting to place two carousels on one page, issues arose with the scrolling functionality. While I managed to make them operate on the correct ...

javascriptjqueryhtmlcssbootstrap-4

Looking to implement a dual-column layout for posts on WordPress using Bootstrap

Creating an intranet website for a client which functions similar to a Facebook or Twitter feed. The layout includes three columns using Bootstrap's grid system. The first column serves as a navigation sidebar, while the other two columns should disp ...

htmlcsswordpresstwitter-bootstrap

Ngb-xx is not a recognized chemical property

Attempting to implement ngb bootstrap in my Angular project has been challenging. Errors keep popping up for every ngb component I try to use. https://i.sstatic.net/jF1xV.png Here's a glimpse of my package.json: https://i.sstatic.net/utqX6.png and ...

angularbootstrap-4ng-bootstrap

What is the best way to emphasize specific months and years in an Angular Material datepicker?

I have an array of days, which can be from any year. I am attempting to customize the Angular Material datepicker to highlight specific months and years in the selection views based on the array of days. .html <input [matDatepicker]="picker" ...

htmlcssangulartypescriptmat-datepicker

The HTML link is not directly attached to the text, specifically in Internet Explorer

When viewing my website in Chrome, the menu links in the Header function correctly. However, in Internet Explorer (specifically version 11), hovering over 'HOME,' 'LISTINGS,' or 'AGENTS' reveals that the displayed URL is incor ...

htmlcssinternet-explorer

Challenger arises in the realm of Chakra UI styling

Recently, I've encountered an issue with displaying a card using chakra UI and next js. The CSS of chakra UI seems to be messed up, causing all my components to display incorrectly. It was working perfectly fine until yesterday. I tried deleting the . ...

cssnext.jsfrontendchakra-ui

Create a smooth transition: How to make a hidden button appear after a function finishes in JavaScript

I am completely new to the world of JavaScript, HTML, and CSS, so I'm feeling a bit lost on how to proceed with this task. My goal is to create a script that will initially display some text through a specific function. Once that text has been displa ...

javascriptjqueryhtmlcss

The Angular Library integrates parent application modules into its structure

Is it possible for an Angular application to inherit a service from the core application and utilize its functions? In my core application, I have several libraries and I require all of them to be able to utilize a specific service from within the core ap ...

angular

Angular allows for the use of the ngIf condition within nested loops to control the display of

I'm currently working on implementing a navigation side menu using Angular with 3 levels of submenus. Below is the code I have tried: <ul class="nav metismenu" id="side-menu" *ngIf="menulist.length != 0"> <li *ngFor="let menu1 of menuli ...

angularnested-loops

Achieve sliding animations with Pure CSS using slideUp and slideDown techniques

Currently, I have implemented a code snippet to showcase a menu along with displaying submenus upon hovering over the main menus. Now, I am looking to introduce some animation effects for the submenus when they appear, similar to the slideUp and slideDown ...

csshtml

Concealing a column in ngx-datatable Ionic

I am just starting to work with NGX-datatable and I need to populate my data table in my Ionic app with data from Firebase. Here is the format of the JSON returned from Firebase: If I choose not to use the User_id as a column, how can I access the User_id ...

javascriptangularjsangularionic-frameworkngx-datatable

The feature similar to SignalR is currently experiencing technical difficulties and is not

In my application, I have implemented a like functionality for posts. To achieve real-time updates on the number of likes, I explored SignalR and attempted to integrate it into my code. Unfortunately, despite not encountering any errors, the automatic upda ...

asp.netangularsignalrsignalr-hub

Inconsistency with Angular 4 instance variables causes ambiguity within a function

Here is the code snippet: @Component({ selector: 'unb-navbar', templateUrl: './navbar.html' }) export class NavbarComponent implements OnInit { @Input() brand: string; controlador:boolean=false; overlay:string=""; @Input() menu ...

angularvariablestypescriptinstance

Guide to incorporating Bootstrap icons into an Angular application through programming techniques

Have you checked out the official bootstrap documentation for information on how to use their icons? https://i.stack.imgur.com/N4z2R.png I'm currently trying to understand the package and its usage. However, none of the options in the documentation ...

angulartypescriptbootstrap-4icons