1

I am designing an app that works on the desktop, tablets and phones.

I have some collapsible content that I want to be inset in the desktop browser and ipad landscape, but not inset in tablet portrait and on phones.

I have other responsive elements working correctly, but the following html & CSS are not working:

HTML

<div id="storagePage" data-role="page" data-theme="a">
   <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c" class="storage_devices" data-inset="true">
       <h2>Header 1</h2>
       <p>Content here</p>
   </div>
</div>

CSS

@media all{
.storage_devices {data-inset: "true";}
}

@media (max-device-width: 520px) and (orientation:portrait) {
    .storage_devices {data-inset: "false";}
}

I assume that the JQuery Mobile libraries are marking up the html and therefore the class is not identifying the div correctly. I have tried with id's as well with no luck.

Thanks

Elias Zamaria
  • 96,623
  • 33
  • 114
  • 148
glimmer
  • 577
  • 4
  • 7
  • You're attempting to apply a data-attribute via CSS, unless I'm missing something, those are two completely different processes. You can use CSS to override the jQM styling in your media queries or use JS to detect the window size and apply the correct data-attribute and refresh the widget (or just add/remove the specific classes you want to mess with). – Jasper Jan 09 '13 at 21:22

1 Answers1

0

I have used 

@media all and (max-width: 650px) {
   .storage_devices {data-inset: "false"}
}

You can change the width, then add the orientation to fit your needs.

JParadiso
  • 49
  • 2
  • Can you specify a DOM attribute as a CSS property? The CSS in the question looked funny to me and Jasper said in his comment that it shouldn't work. I tried it myself and it didn't work for me. I am trying to do something similar. The approach in the question and this answer both look wrong, but I don't know how it should be done, or if it is even possible. – Elias Zamaria Feb 20 '13 at 01:10
  • See this URL to see you can change a class with CSS using media queries. http://alistapart.com/article/responsive-web-design – JParadiso Feb 20 '13 at 01:21
  • I don't see anything in there about changing classes, and I don't see anything at all about data-attributes. I don't see what in the article suggests that a data-attribute can be used as a CSS property. – Elias Zamaria Feb 20 '13 at 01:31