html - cut off corners jquery mobile collapsible sets -
i cut off top-left corner of jquery mobile header in collapsible set.
here html:
<div data-role="content" id="one" class="ui-content" role="main"> <div data-role="collapsible-set" data-corners="false"> <div data-role="collapsible" data-collapsed="false" data-theme="f" data-content-theme="f" class="cornered ui-collapsible-heading"> <h3>witness</h3> <p>content witness tab. content witness tab. content witness tab. content witness tab. content witness tab. content witness tab. </p> </div> <div data-role="collapsible" data-theme="e" data-content-theme="e"> <h3>victim</h3> <p>content victim tab. content victim tab. content victim tab. content victim tab. content victim tab. content victim tab. </p> </div> <div data-role="collapsible" data-theme="d" data-content-theme="d"> <h3>information</h3> <p>25% of chinese women have experienced domestic violence.</p> </div> </div> </div>
and css:
.cornered { width: 176px; height: 0px; border-bottom: 40px solid #30c2df; border-left: 40px solid transparent; }
after adding little custom css can make cut off corner can't find in jquery.mobile.css make change, because if add class=cornered div adds cut off corner on left side of header , doesn't effect header itself.
this approach changed width of header in collapsible set, , made content drop behind other headers when expanded (see photo example).
jquery mobile uses .ui-corner-*
classes add rounded corners. 1 option have remove class on doc ready. example $("[data-role='collapsible-set']").removeclass("ui-corner-all");
let me know if works, or if have questions :)
Comments
Post a Comment