CODEWITHSUNDEEP
cssionic-frameworksass
user2805507
user2805507

Reputation:

Split Screen Scss (ionic)

i am trying to achieve a split division using html for mobile. I tried declaring 2 division but it cant work . one of the other way i tried to do was using ion-content , inside ion-content ,i used div and declared the top as 80% (height .class : main ) and bottom div(class : footer).

For an example, these is what i tried.

html code

<ion-content class="ionMain">
   <div >
      main content
   </div>
</ion-content>


<ion-content class="ionFooter">
   <div>
      main content
   </div>
</ion-content>

my scss is 

.ionMain{
   div{
     height:80%;
   }
}

.ionFooter{
      div{
  height:2%
  bottom: 0;
  position:fixed;
   }     
 }

these are the codes i tried but nothing seems to work . anybody facing the same problem ?

Upvotes: 0

Views: 480

Answers (1)

Joerg
Joerg

Reputation: 3101

Here an basic example which I copied from an app of mine (I hope have nothing forgotten to copy):

<ion-content class="no-scroll">

    <div class="sidebarBody">

       // Left side bar

    </div>
    <div class="mainContent">

      // Right main content.

    </div>

</ion-content>

And here the SCSS:

$sideBarWidth: 150px;

.sidebarBody {
    width: $sideBarWidth;
    right: $sideBarWidth;
    overflow-y: scroll;
}

.mainContent {
    left: $sideBarWidth !important;
    width: calc(100% - #{$sideBarWidth};
    overflow-y: scroll;
    padding: 10px;
}

.no-scroll .scroll-content {
    overflow: hidden;
    display: flex;
}

The trick is to use css flex boxes and to calculate the positions of the boxes.

Change the width of the right container in $sideBarWidth to your needs.

In the next days I will publish an Ionic 2 project with splitview and multiple headers on Github and will post the link here.

Update:

Here you find a working example: https://github.com/JoergHolz/Ionic-2-Splitview

Upvotes: 0

Related Questions