Ionic - Different layouts for mobile and tablets

@brunocoder wrote:

Hi
I am building a mobile application using Ionic and angularjs and Highcharts. In most of the pages there are sliders to display data. Every slide has two vertical divs containing highchart.

Now the requirement of the app is that when it is open in mobile device(Iphone 4 & 5) it should display one div per slide and when open on tablet(Ipad) it should display two vertical divs per slide containing highchart. All the Highchart data is dynamic. I am posting html code. As for angularJs I am not sure What approach I should take? I have posted image links of screenshots of the desired layouts for both the devices.

Screenshot for a tablet/Ipad

post2.png529x708 19.4 KB

Screenshot for a mobile/Iphone

chart1.png378x623 13.3 KB

Html

 <ion-view>
  <div ng-controller="chartHomePage">
    <ion-content>
      <ion-slide-box  show-pager="false" on-slide-changed="slideHasChanged($index)" >
        <ion-slide>
          <div class="card chart-box">
            <div class="item item-divider">
              Chart 1
            </div>
            <div class="item item-text-wrap">
              <div ng-controller="ChartController1">
                <highchart id="" config="chart1"></highchart>
              </div>
            </div>
          </div>
          <div class="card chart-box">
            <div class="item item-divider">
              Chart 2
            </div>
            <div class="item item-text-wrap">
              <div ng-controller="ChartController2">
                <highchart id="" config="chart2"></highchart>
              </div>
            </div>
          </div>
          <iom-slide>
      </ion-slide-box>
    </ion-content>
  </div><!--end controller div-->
</ion-view>

Thanks

Posts: 4

Participants: 2

Read full topic