2

I have been trying to use views for my sample practice.The scenario is the index.html contains navigation-header and footer. Any options we select from navigation header changes the view in between navigation bar and footer.

The problem which I am facing if that the views which are being loaded, also overrides the css attributes of index.html. It results in distorted navigation-header.

<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">

Its also happening with other div tags. One way is to get into those long css codes and change them, but I found out that we can decide which css and js file to load in a view using DIRECTIVES in AngularJS.

I found below links but it couldn't help me in loading the css file for the index.html page (which is the first page which is getting loaded).

Link --> [How to include view/partial specific styling in AngularJS

Can someone gimme any idea?

Community
  • 1
  • 1
Shashank Vivek
  • 16,888
  • 8
  • 62
  • 104
  • What do you mean with overriding the attributes of index.html? It's a bit unclear what the problem is. – Chrillewoodz Jul 05 '15 at 11:22
  • @Chrillewoodz: I mean for exmple - class="abcd" is defined in CSS file of homepage "index.html", but the view which I am loading after some click, lets say "product.html" , has also some css file with class="abcd" having different attribute. As soon as the product.html page is loaded , the index.html page is distorted. Does it clarify my question? – Shashank Vivek Jul 06 '15 at 08:36

1 Answers1

0

I'm not 100% sure of what you are doing. But I think you have an index.html with a css-link and the product.html has also a css-link? I think that is bad practise. What's probably happening is that the second css is overwriting some css declared in the index.html. Just like when you are linking bootstrap first and your style.css afterwards you can overwrite the bootstrap style.

If this is the case, you could put your content of your product.html in a div with an id of let's say #product and in your css you access that specific abcd-class by doing #product .abcd{your style here} OR if you have a stylesheet for every single html in the view, you give them all a container with class="view" and reference it by .view .abcd. Just make sure your specific css isn't overwriting styling in your index.html

Arjan Treur
  • 76
  • 8