Click here to Skip to main content
15,921,622 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hi 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 perticular 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 ;)
HTML
<div id="jqgridcontainer" stylesheet="styles/jqgrid/jqstyles.cc">  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.
Posted
Updated 9-Oct-14 1:43am
v2
Comments
Sergey Alexandrovich Kryukov 9-Oct-14 11:33am    
It all makes no sense. CSS usage is very simple and logical. And your idea is not. Element's style is defined by one or more CSS classes, not a stylesheet (which is just a file).
Add your own style sheet and use it. Or use the same one. Stylesheets cannot be "affected", they affect the rendering. Artificial problem, I would say...
—SA
[no name] 9-Oct-14 11:42am    
But i am ready to use the stylesheet , he problem is when i drag and drop the new style sheet my existing UI element also getting affected. So the only possibility is to restrict the style sheet to that div.

1 solution

I have found the answer myself , after 2 hours of search in Google.

<div>
    <style scoped>
        @import "scoped.css";
    </style>
</div>


Read here : http://stackoverflow.com/questions/17667874/limit-scope-of-external-css-to-only-a-specific-element[^]


As Richard Deeming suggested, I am adding that option here. Thank you Richard Deeming
By default, that only works in Firefox:
http://caniuse.com/#feat=style-scoped

For all other browsers, you'll need a polyfill, as mentioned in the linked SO thread:
https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin
 
Share this answer
 
v2
Comments
Richard Deeming 9-Oct-14 13:13pm    
By default, that only works in Firefox:
http://caniuse.com/#feat=style-scoped[^]

For all other browsers, you'll need a polyfill, as mentioned in the linked SO thread:
https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin[^]
[no name] 9-Oct-14 13:16pm    
Thanks a lot for the great information . My vote of 10
Thanks7872 31-Oct-14 5:11am    
And then also you have accepted your own solution? Why?

Do you know what does it mean by accepting the solution?
[no name] 31-Oct-14 5:57am    
Yes, may i know why there is a button called "I've solved this myself!" ? After a lot of searching only i found this answer!. And i thought to share it here. What is the problem in it? Why did you down vote my answer sir?
Thanks7872 31-Oct-14 6:01am    
This code won't work with all the browsers,hence can not be a solution. After a lot of searching if you manage(I don't call it 'solve') your issue, that doesn't become solution.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900