Adding Custom Style to AngularJS Directive using External CSS File

I am attempting to apply a unique style to an angularjs directive using a separate CSS file.

.index-nav-bar-directive{

    ul{
        list-style: none;
        margin: 0;
        padding: 0; 
    }
    h1{
        background-color: #2980b9;
        color:white;
        margin: 0;
        padding: 10px 20px;
        text-transform: uppercase;
        font-size: 24px;
        font-weight: normal;
    }

    .fa-plus{
        float: right;
    }`[![enter code here][1]][1]`
}

Here is my HTML file: 

<body ng-app="IndexApp" ng-controller="indexController">
    <index-nav-bar-directive> </index-nav-bar-directive>
</body>

This is the HTML content of my directive: 

<div class="root">
        <div id="container" class="col-md-2">
            <h1> Mongo : Data Bases</h1>
            <ul id="todoList">
                <li><span><i class="fa fa-trash"></i></span> Go to Hogwards</li>
                <li><SPAN><i class="fa fa-trash"></i></SPAN> Go to Potions class</li>
                <li><span><i class="fa fa-trash"></i></span> Kill Voldemort</li>
            </ul>

        </div>
</div>

I have already reviewed this answer: How to CSS style angular directive?

However, it did not yield the desired outcome.

Thank you for your assistance!

javascripthtmlcssangularjs

Answer №1

Solved by Inspecting The CSS Code: The correct form should look like this (you cannot target inner attributes in CSS as I did)

div[index-nav-bar-directive] ul{
    list-style: none;
    margin: 0;
    padding: 0;

}
 div[index-nav-bar-directive] h1{
    background-color: #2980b9;
    color:white;
    margin: 0;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: normal;
}

div[index-nav-bar-directive] .fa-plus{
    float: right;
}

div[index-nav-bar-directive] li{    
    cursor: pointer;
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    color: #666;
}

div[index-nav-bar-directive] span{
    background-color: #e74c3c;
    height: 40px;
    margin-right:20px;
    text-align: center; 
    color: white;
    width: 0;
    display: inline-block;
    opacity: 0;
    transition: 0.2s linear;

}
 div[index-nav-bar-directive] li:hover span{
    width: 40px;
    opacity: 1.0
}
 div[index-nav-bar-directive] input{
    font-size: 18px;
    color: #2980b9;
    background-color: #f7f7f7;
    width: 100%;
    padding: 13px 13px 13px 20px;
    box-sizing: border-box;
    border: 3px solid rgba(0,0,0,0);
}

div[index-nav-bar-directive] #container{
    background-color: #f7f7f7;
    width: 360px;
    margin: 100px auto;
    box-shadow: 0px 0px 7px 1px grey;
}

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 is the method for retrieving the CSS value of a pseudo element using Selenium in Python?

My webpage contains the following HTML snippet: <div id="foo" class="bar" title> ::before </div> When using Chrome or Firefox and selecting ::before, I can view the CSS in the Styles tab: .SomeTitle .bar::before{ content: "required_value" ...

pythonhtmlcssselenium

Saving dynamic elements within nested AngularJS scopes

I'm experiencing difficulties with scopes created by directives and saving these dynamic elements' scope back to the parent. Below is my directive: app.directive('action', function() { return { restrict: "E", scope: {}, temp ...

angularjsangularjs-scopeangularfire

Plan a website refresh using Dreamweaver

As the website manager for a resort, it's crucial to keep the activities section updated daily. However, there are days when activities run late and I'm not available to make updates. Is there a feature in Dreamweaver CS 5.5 that allows me to sc ...

htmldreamweaver

The validation message from the requiredfieldvalidator is persisting even after filling the textbox with javascript

Is the textbox empty or not when using RequiredFieldValidator? When clicking the submit button, an error message appears but if the textbox is filled using javascript and then clicked elsewhere, the error message does not disappear. However, if something ...

javascriptc#asp.netwebforms

The key to successful filtering in Next.js with Hasura is timing - it's always a step

I am fetching data from Hasura using useRecipe_Filter and passing the searchFilter state as a variable. It seems that every time I press a key, the UI updates with one keystroke delay before filtered data is passed to the results state. const SearchBar = ( ...

javascriptnext.jsgraphqlhasura

Troubleshooting problem with CSS formatting on Safari and Internet Explorer 8

Currently, I am utilizing a CSS stylesheet on one of my web pages. The styles are functioning flawlessly on Mozilla and IE 7 and older versions. However, there seems to be an issue with IE8 and Safari. The class width in the CSS is set at 700px. But when ...

cssasp.netcross-browserwidth

What is the best way to retrieve information from an http website and display it in an html table using javascript

I am attempting to retrieve data from the specified site: . The website appears to feature a list of objects, and my goal is to extract each object enclosed in {} into separate columns within a row (6 columns total - one for gameNumber, one for teams, and ...

javascriptjqueryhtmlajaxget

The browser is not showing JavaScript alerts and prompts when they are called inside a function

/*I am attempting to run a color guessing game in my browser, but when I try opening the code in Chrome, it doesn't work. Any suggestions or ideas would be greatly appreciated.*/ var colors = ["Aqua", "Black", "Blue", "Brown", "Coral", " ...

javascriptarraysloopswhile-loop

building CharFields dynamically in Django

I am looking to gather input from the user using CharField. Using the value entered in CharField, I want to generate the same number of CharFields on the same page. For example, if the user enters "3" and clicks OK, it should display "3" CharFields below ...

javascriptdjangodjango-forms

After installation, the Tailwind classes seem to be malfunctioning

Let me start by mentioning that although the title of this question is reminiscent of this other question on Stack Overflow, I have already tried the solutions provided there with no success. I initially attempted to set up Tailwind using their official C ...

htmlcsstailwind-css

Styling with CSS in Play Framework version 2.0.3

Running into issues when using CSS in Play Framework 2.0.3 and could really use some help spotting where I'm going wrong. My view, called siteview.scala.html, is defined as: @(name: String, records: List[Record]) @import helper._ @main(name) { < ...

cssplayframeworkplayframework-2.0

Node.JS Plugin Management - Enhance Your Application with Customized

Currently, I am deeply involved in the development of a complex application using Node.JS, built on top of Express. I decided to implement a flexible plugin system to make things easily plug-and-play. The structure of this system consists of: root/ | p ...

javascriptnode.jspluginsexpressmodule

Struggling to construct a project using parcel, continually encountering issues with unsupported file types

My attempt at creating a project using parcel has hit a snag. Despite diligently following the guidelines provided in my assignment, an error message consistently appears in my terminal each time I initiate the command: parcel src/index.html The error mes ...

javascriptnpmpackage.jsonparceljs

Issue: `Alert` not triggering after clicking on anchor link in AJAX response

Below is the code I am currently working with: $('.ver').click(function(e) { e.preventDefault(); var id = $(this).next().val(); $.post('cotizar_detalles.php', {'id': id}) .done(function(response) { ...

javascriptjqueryajaxfunctionanchor

Creating a 2D array of multiplication tables using JavaScript

My current task involves creating a program that generates a multiplication table for a given variable 'n'. The results must be stored in a two-dimensional array and displayed in the console with proper data formatting. Although I am familiar wit ...

javascriptarraysloops

Issue with NPM peer dependencies enforcement

Forgive me if this question seems basic - I am new to Meteor... I am creating an application using meteor 1.3.1 and following the Socially tutorial for guidance as it aligns closely with my needs. However, I am encountering a persistent error in my consol ...

angularjsmeteornpmrequirementspeer

What is the best way to implement a custom toast delay in a React application using setTimeout

The concept is straightforward: When the function showToast is called, I aim to change my toast's className to show, and then remove it by replacing with an empty string after displaying it for 3 seconds. HTML: <div id="toast">New col ...

javascriptreactjs

Adjusting form elements with Javascript

I'm looking to refresh my knowledge of JS by allowing users to input their first and last names along with two numbers. Upon clicking the button, I want the text to display as, "Hello Name! Your sum is number!" I've encountered an issue in my co ...

javascriptforms

Tips for getting the jQuery accordion to return smoothly to its original position (instead of stacking on top of each other)

I'm a complete beginner at this and could really use some assistance. Here's my JS Fiddle: http://jsfiddle.net/hAZR7/ The problem I'm facing seems to be more related to logic or math, as the animation works fine when starting and moving to ...

javascriptjqueryhtmlmath

Tips for crafting a perpetually looping animated shape using canvas

Lately, I've been experimenting with canvas and have encountered a challenge that I can't seem to solve. I've mastered creating shapes, animating them, and looping them across the canvas. However, I'm struggling to figure out how to spa ...

javascriptcsshtmlcanvas