[Solved]Text is hidden under ionicModal's header bar

ionic-v1
1

This is my modal:

image
Screen Shot 2016-01-19 at 9.31.24 AM.png834×324 11.1 KB

As you can see, the text is “Hello” and it’s hidden right under header bar. Nothing changes when I resize the window to a smaller one (making the ionicModal fullscreen).

I tried fixing it by putting black borders around the text’s <div> container so see if the container is hidden behind the header bar. It is not. I added class=has-header in <ion-content> but that didn’t fixed anything. I added the same class to the <div> container but nothing also.

The code is below:

   <ion-modal-view>
     <ion-header-bar class="bar-positive">
          <h1 class="title">Modal</h1>
          <button type="button" class="button button-energized" ng-click="cancel()">Cancel</button>
     </ion-header-bar> 
         <ion-content class="has-header">
             <div style="text-align: center; height: 50%; border: 1px solid black;" class="has-header">
                 <p style="font-size: 20rem;">{{ cupSizeDisplay }}</p>
             </div>
        </ion-content>
   </ion-modal-view>

I’ve only tested this on Firefox and Chrome (ionic serve) and an iOS Simulator iPhone 5.

I looked at the default Ionic properties using Firebug but couldn’t find the cause of this. Anybody has any hints, fixes, or knows the cause?

Thanks.

2

I got a feeling its because of your font-size: 20"rem", have you tried using pixels with the same amount of 20rem?

3

I changed the font-size to have 60px. But as you can see in the picture below, the top part of the text is below the header bar.

image
Screen Shot 2016-01-19 at 3.01.00 PM.png715×324 7.13 KB

I just want to know how to make the text start exactly where its container starts (which is right below the header bar).

4

Change your header class to:

<ion-header-bar class="bar bar-header bar-positive">

5

Hi @joonhl27, I tried your suggestion but it doesn’t work.

6

That’s pretty strange. I never ran into this problem before because I never had to make my font that big. I’m not really sure how to fix that besides adding breaks <br>. haha. sorry.

7

You need to override the line-height as well. It is being set to 20px. Setting it to match the font-size will increase the size of the paragraph and align the text properly.

  <ion-modal-view class="full-width-modal">
      <ion-header-bar class="bar-positive">
        <h1 class="title">Modal</h1>
        <button type="button" class="button button-energized" ng-click="cancel()">Cancel</button>
      </ion-header-bar>
      <ion-content class="has-header">
        <div style="text-align: center; height: 50%; border: 1px solid black;" class="has-header">
          <p style="font-size: 20rem; line-height: 20rem">Test</p>
        </div>
      </ion-content>
  </ion-modal-view>
2 Likes
8

@brandyshea Good to know.

1 Like
9

@brandyshea This works. Thanks a lot.

1 Like