Hi There!
I am currently building a KendoUI+PhoneGap app combination. This app has several windows and each of these windows have separate styles.
Is there a way to separate the CSS styles for each of these windows so that other windows' styling does not get affected. In my current structure, even though I code each window on separate html files, when I run the app, it seems that all the files are being combined into one and so the CSS of one window sometimes overrides the others.
What is the best way to get around this? Does anyone of you have had the same problem? Please help! Many thanks in advance!
Many thanks!
Best regards,
Antonio
I am currently building a KendoUI+PhoneGap app combination. This app has several windows and each of these windows have separate styles.
Is there a way to separate the CSS styles for each of these windows so that other windows' styling does not get affected. In my current structure, even though I code each window on separate html files, when I run the app, it seems that all the files are being combined into one and so the CSS of one window sometimes overrides the others.
What is the best way to get around this? Does anyone of you have had the same problem? Please help! Many thanks in advance!
Many thanks!
Best regards,
Antonio
4 Answers, 1 is accepted
0
Hi Antonio,
I am not sure whether your question is related to the native Kendo UI styling or some other custom styles in the application. Generally, if you have a collection of stylesheets, which are shared across different pages, but need different styling on these pages, you can use different CSS classes and appropriate selectors to selectively style particular elements or areas or pages.
http://css.maxdesign.com.au/selectutorial/
Greetings,
Dimo
the Telerik team
I am not sure whether your question is related to the native Kendo UI styling or some other custom styles in the application. Generally, if you have a collection of stylesheets, which are shared across different pages, but need different styling on these pages, you can use different CSS classes and appropriate selectors to selectively style particular elements or areas or pages.
http://css.maxdesign.com.au/selectutorial/
Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Antonio
Top achievements
Rank 1
Rank 1
answered on 04 Apr 2013, 03:08 PM
Hi Dimo,
Thanks for the reply. I've attached three files here extracted from the PhoneGap project that I am working on and I hope that would help explain what I am trying to do.
On the index page, clicking on the "My First Pregnancy" icon will take you to the "first_pregnancy_home.html" page/window. Here, you'll see two large icons "Pregnancy Guide" and "Pregnancy Tools" that are list view items. On this page is a CSS styling override on .km-ios .km-list>li. When you click on "Pregnancy Guide", the "pregnancy_topic_list.html" page will be loaded. Again this page has a listview in the center and it has its own styling override for .km-ios .km-list>li.
Now at this point, when you try to click on the "Back" navigation button, you will notice that the styling override which is supposed to be for "pregnancy_topic_list.html" only, now gets applied to ""first_pregnancy_home.html" as well.
Could you give me some advice me on how to get around this please? Many thanks!
Regards,
Antonio
Thanks for the reply. I've attached three files here extracted from the PhoneGap project that I am working on and I hope that would help explain what I am trying to do.
On the index page, clicking on the "My First Pregnancy" icon will take you to the "first_pregnancy_home.html" page/window. Here, you'll see two large icons "Pregnancy Guide" and "Pregnancy Tools" that are list view items. On this page is a CSS styling override on .km-ios .km-list>li. When you click on "Pregnancy Guide", the "pregnancy_topic_list.html" page will be loaded. Again this page has a listview in the center and it has its own styling override for .km-ios .km-list>li.
Now at this point, when you try to click on the "Back" navigation button, you will notice that the styling override which is supposed to be for "pregnancy_topic_list.html" only, now gets applied to ""first_pregnancy_home.html" as well.
Could you give me some advice me on how to get around this please? Many thanks!
Regards,
Antonio
0
Hi Antonio,
Generally, putting <style> tags in the <body> is not standard compliant and correct, unless you use <style scoped="scoped">, which is still not an official standard and is still not properly supported.
When partial views are loaded, we take the <style> elements and move them to the page <head>, so that they are properly handled by the browsers. This means that if you have identical selectors (and you do), the latest will take precedence. When moving back, we do not remove styles from the page. In short, you need to define appropriate selectors, as mentioned earlier, which will apply different styles to different views. Use the views' IDs, for example:
Greetings,
Dimo
the Telerik team
Generally, putting <style> tags in the <body> is not standard compliant and correct, unless you use <style scoped="scoped">, which is still not an official standard and is still not properly supported.
When partial views are loaded, we take the <style> elements and move them to the page <head>, so that they are properly handled by the browsers. This means that if you have identical selectors (and you do), the latest will take precedence. When moving back, we do not remove styles from the page. In short, you need to define appropriate selectors, as mentioned earlier, which will apply different styles to different views. Use the views' IDs, for example:
#pregnancyhome .km-list > li{ /* ... */}Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Accepted
Antonio
Top achievements
Rank 1
Rank 1
answered on 10 Apr 2013, 04:17 AM
Thanks Dimo. This worked for me.