html - Change the Text Position of the Collapsible Header (Jquery Mobile Collapsible) -
i creating website mobile devices using jquerymobile. have simple collapsible looks this:
<div data-role="collapsible"> <h3>section</h3> <p>i content how you?</p> </div>
i managed change height of header after changing text of header no longer align collapsible icon.
is there way change headertext position horizontally aligns icon?
because can change position vertically using text-align: center
here fiddle have tried far.
you can use line-height
property center headline text vertically:
.ui-collapsible-inset .ui-collapsible-heading .ui-btn { line-height: 10vh; }
if set line-height of element same elements height, text vertically centered. in specific case solution, because have 1 line of text (one word).
.ui-collapsible .ui-btn { height: 10vh !important; } .ui-collapsible-inset .ui-collapsible-heading .ui-btn { color: red !important; /*margin-top:100px !important;*/ line-height: 10vh; } .ui-collapsible-heading .ui-btn .ui-btn-text { color: red !important; /*top: 10% !important;*/ }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://jsfiddle.net/0p92aec2/1/%22https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> <link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> <div data-role="page"> <div data-role="content"> <div data-role="collapsible"> <h3>section</h3> <p>i content how you?</p> </div> </div> </div>
Comments
Post a Comment