ionic - ion-row content not showing correctly

658 views Asked by At

In my html file in Ionic project I have an ion-grid with three rows. The first one contains a map, the second one a list and the third one a button. The problem is that the content of the second row is not showed anywhere.

This is the html code:

 <ion-grid>
<ion-row>
<div class="map-container">
  <div id="map">
  </div>
</div> 
 </ion-row>

 <ion-row>
<ion-list>
  <p>
    Prova
  </p>
  <p>
      Prova
    </p>
    <p>
        Prova
      </p>
</ion-list>
</ion-row>

<ion-row>
<button ion-button color="primary" block (click)='planTrip()' id="button_plan"> Pianifica il tuo percorso </button>
</ion-row>
 </ion-grid>

And this is the css:

#map{
width: 100%; 
height:92%; 
position: fixed;
}

#prova{
  position:fixed;
}

#button_plan{
  position: fixed;
  bottom: 0;
  width: 100%; 
  margin-bottom: 0px;
}
0

There are 0 answers