CODEWITHSUNDEEP
javascripthtmlcssionic-framework
Gaston Flores
Gaston Flores

Reputation: 2467

Having trouble with ion-nav-bar and ion-tabs with Divs with 100% height

just started using ionic so I guess it's a kinda newbee question here but I have not been able to do the following:

- div h:100% w:100%
  - div 30% 100%
    - image 100% 100%
  - div 5% w:100%
    - button 100% 100% 
  - div 65% w:100%    
    - image 50% 50%
    - image 50% 50%
    - image 50% 50%
    - image 50% 50%

I need something like this (The images must maintain aspect ratio inside the div):

enter image description here

And this is my app:

enter image description here

This is my code:

ion-view view-title="">
  <ion-pane>
    <div style="height: 100%;width:100%;position:fixed;left:0;top:0">
      <div style="padding:0;margin: 0;height: 35%;width:100%;">
        <img ng-src="images/a_i.png" style="width:100%;height: 100%">
      </div>
      <div style="padding:0;margin: 0;height: 5%;width:100%;">
        <button class="button button-block button-positive">
          Button
      </div>
      <div style="padding:0;margin: 0;height: 60%;width:100%;">
        <div style="padding:0;margin: 0; width: 50%;height: 50%;float: left;">
          <img ng-src="images/a_i.png" style="width:100%; height: 100%;">
        </div>
        <div style="padding:0;margin: 0; width: 50%;height: 50%;float: left;">
          <img ng-src="images/b_i.png" style="width:100%; height: 100%;">
        </div>
        <div style="padding:0;margin: 0; width: 50%;height: 50%;float: left;">
          <img ng-src="images/a_i.png" style="width:100%; height: 100%;">
        </div>
        <div style="padding:0;margin: 0; width: 50%;height: 50%; float: left;">
          <img ng-src="images/b_i.png" style="width:100%; height: 100%;">
        </div>        
        </div>
      </div>
    </div>
  </ion-pane>
</ion-view>

The problem I see is that the on-nav-bar and ion-tabs is part of the 100% of my main container (in this case ion-pane), Images range below the header. Perhaps the only solution can be done using html-css-javascript because I have not found a way using tools from ionic-framework. Any ideas?

Upvotes: 0

Views: 1103

Answers (1)

Swaminathan Vetri
Swaminathan Vetri

Reputation: 413

You can use ion-content instead of ion-pane to load the contents within the ion-view. Also, ionic inherently offers css classes for most of the frequently required use cases. Please check out the css classes item-image for the top area which renders the image in full width, button-block to show a full width button and col col-50 for displaying items in two column style. below the complete snippet making use of all these classes.

   <ion-view>
    <ion-content>
     <div class="row item-image">
      <img ng-src="images/a_i.png">
     </div>
     <div class="row">
        <button class="button button-block">button</button>
    </div>
    <div class="row">
     <div class="col col-50">
      <img ng-src="images/a_i.png">
     </div>
     <div class="col col-50">
      <img ng-src="images/b_i.png">
     </div>
    </div>
    <div class="row">
     <div class="col col-50">
      <img ng-src="images/a_i.png">
     </div>
     <div class="col col-50">
      <img ng-src="images/b_i.png">
     </div>
    </div>
   </ion-content>
  </ion-view>

Upvotes: 0

Related Questions