0

I am working on a project which is completely done by HTML5,MVC 4,CSS 3, JQuery, LINQ. There are a lot of ui,li and other html controls and we have done styles for those elements.

Now i have a situation that i must include a JQ Grid (http://www.trirand.com/blog/jqgrid/jqgrid.html) , we were using our own client side grid. Now what the problem is if i use the style sheet of the JQ Grid on the page, there is a possibility to get affected to other element also. Anyway i am gonna use that particular grid inside a div element i need that style sheet should be affected to that the elements which all are inside that div.

Is there any possibilities?

(I wonder if this is possible in this way ;) 

 <div id="jqgridcontainer" stylesheet="styles/jqgrid/jqstyles.css">  my ui elements here </div>

I know its not possible in this way )

NB: editing http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css[^] by adding "jqgridcontainer" div id to all the element css is not possible.

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • 1
    It's not possible in the terms you are thinking. You would need to change all the styles in the stylesheet to only apply to that div. – Paulie_D Oct 09 '14 at 11:21
  • You can checkout from here .[DIVs inside another DIV inside another DIV with CSS][1] [1]: http://stackoverflow.com/questions/9438437/divs-inside-another-div-inside-another-div-with-css – praveen_programmer Oct 09 '14 at 11:23
  • @paulie Yeah i know its not possible in that way, but i need an alternative for that –  Oct 09 '14 at 11:45
  • Do you have its less or sass code? If so then it would be easy to modify it according to your own needs. – Emmad Zahid Oct 09 '14 at 11:47
  • @Emmad I explained my need already in that mark up, i know its not possible in that way, but i am looking for an alternative way –  Oct 09 '14 at 11:51
  • Duplicate of http://stackoverflow.com/questions/26263616/link-external-css-file-only-for-specific-div/26264176#26264176 and http://stackoverflow.com/questions/17667874/limit-scope-of-external-css-to-only-a-specific-element. –  Oct 09 '14 at 12:39
  • @torazaburo but i could not find your answer in answer section. You commented in my question, How can i up vote a comment? –  Oct 13 '14 at 05:10

3 Answers3

0

No you can't add css file to one div, you can only add style to the all document. The only way i see to use css file to only one part of your page is to put your grid in an iframe (which is not really good...)

Thibaud Lacan
  • 346
  • 1
  • 6
  • 13
0

You can't do <div id="jqgridcontainer" stylesheet="styles/jqgrid/jqstyles.css">. If jqstyles.css is not a big file you can change the div{...} rules in it with div.jq {...} and add class jq to your divs that you want to use jq styles. If jqstyles.css is so big that you can't go through it all, give your divs, which you want to have your style, a class like 'myDivClass' and change your css to div.myDivClass {...}. You may need to mark your rules as !important or just reference jqstyles.css first and your css 2nd..

artm
  • 8,554
  • 3
  • 26
  • 43
  • Sorry buddy that's not what i am looking for. I know the mark up which i used is not applicable. I wrote like that to make my question more understandable. –  Oct 09 '14 at 11:49
  • Fair enough. Have you considered my suggestions? What are the issues with implementing them? – artm Oct 09 '14 at 11:50
  • But if i do as you said, there will be problem with the other UI elements, there will be a css crash, i dont want this css style to be applied for the elements which all are outside of my div. And please see my updated question –  Oct 09 '14 at 11:53
  • @sibeesh I saw you can't edit jqstyles.css. Another option is to use `#myCss a{color:red}` in your own css and then mark the sections of the html to use your css inside a `
    `. But that probably won't fix it for you either.
     – artm Oct 09 '14 at 11:59
0

Use ids and classes properly to avoid all the division to get the same property..

Nandan Bhat
  • 1,573
  • 2
  • 9
  • 21