CODEWITHSUNDEEP
jquerycsshtmljquery-mobile
TheWandererr
TheWandererr

Reputation: 514

Change the Text Position of the Collapsible Header (Jquery Mobile Collapsible)

I am creating a website for mobile devices using jQueryMobile. I have a simple Collapsible that looks like this:

<div data-role="collapsible">
    <h3>Section</h3>
    <p>I am the Content how are you?</p>
</div>

I managed to change the height of the header but after changing it the Text of the Header is no longer align with the Collapsible Icon.

Is there a way to change the HeaderText Position Horizontally so it aligns with the Icon?

Because i can change the Position Vertically using text-align: center

Here is the FIDDLE with what i have tried so far.

Upvotes: 0

Views: 296

Answers (1)

andreas
andreas

Reputation: 16936

You can use the line-height property to center the headline text vertically:

.ui-collapsible-inset .ui-collapsible-heading .ui-btn {
    line-height: 10vh;
}

If you set the line-height of an element the same as the elements height, than the text will be vertically centered. In this specific case this would be a good solution, because you only have one 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 am the Content how are you?</p>
    </div>
  </div>
</div>

Upvotes: 3

Related Questions