I am trying to position a menu within an ionic tablet application as ‘fixed’ and allow the adjacent column to scroll - without both of them scrolling.
Have been experimenting with Sass to setup fixed and sticky positioning but that is not working out so well. So instead I have given the left ‘fixed’ column a defined pixel height and then set the overflow in the right column to overflow.
However this technique is a bit ‘hit and miss’ considering the various tablet device dimensions. I attempted to use percentages for the height of the left column (#SortingFilters) but it did not work. Is there a proper solution for this? (Setting the height of left column to 100% is not working either).
Code is below:
HTML page/view
<ion-grid no-padding>
<ion-row>
<ion-col col-3 ion-fixed id="sortingFilters">
<h2>Sorting Filters</h2>
<div id="accordion">
<div class="accordion-content-wrapper">
<h4 class="accordion-toggle dormantState" (click)="toggleIconSize()">Size <ion-icon id="collapseIcon" [name]="buttonIconSize"></ion-icon></h4>
<div class="accordion-content">
<p>Select whether the creature is microscopic or bigger than microscopic (can be seen with naked eye).</p>
<ion-list radio-group [(ngModel)]="size">
<ion-item>
<ion-label>All Sizes</ion-label>
<ion-radio id="all" value="" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>Microscopic</ion-label>
<ion-radio id="micro" value="micro" ></ion-radio>
</ion-item>
<ion-item>
<ion-label>Non Microscopic</ion-label>
<ion-radio id="nonmicro" value="nonmicro" ></ion-radio>
</ion-item>
</ion-list>
</div>
</div>
<div class="accordion-content-wrapper">
<h4 class="accordion-toggle dormantState" (click)="toggleIconShell()">Shell <ion-icon [name]="buttonIconShell"></ion-icon></h4>
<div class="accordion-content">
<p>What type of shell does the creature have?</p>
<ion-list radio-group [(ngModel)]="shell">
<ion-item>
<ion-label>All Types</ion-label>
<ion-radio id="all" value="" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>No Shell</ion-label>
<ion-radio id="no-shell" value="noshell"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Single Shell</ion-label>
<ion-radio id="single-shell" value="oneshell"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Double shell</ion-label>
<ion-radio id="double-shell" value="doubleshell"></ion-radio>
</ion-item>
</ion-list>
</div>
</div>
<div class="accordion-content-wrapper">
<h4 class="accordion-toggle dormantState" (click)="toggleIconLegs()">Legs <ion-icon [name]="buttonIconLegs"></ion-icon></h4>
<div class="accordion-content">
<p>How many pairs of legs does the creature have?</p>
<ion-list radio-group [(ngModel)]="legs">
<ion-item>
<ion-label>All Types</ion-label>
<ion-radio id="all" value="" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>No legs</ion-label>
<ion-radio id="no-legs" value="nolegs"></ion-radio>
</ion-item>
<ion-item>
<ion-label>3 pairs</ion-label>
<ion-radio id="3pairs" value="threepairs"></ion-radio>
</ion-item>
<ion-item>
<ion-label>4+ pairs</ion-label>
<ion-radio id="4pairs" value="fourpairs"></ion-radio>
</ion-item>
</ion-list>
</div>
</div>
<div class="accordion-content-wrapper">
<h4 class="accordion-toggle dormantState" (click)="toggleIconTail()">Tail <ion-icon [name]="buttonIconTail"></ion-icon></h4>
<div class="accordion-content">
<p>Does the animal have a tail or not? If so, how many tails present?</p>
<ion-list radio-group [(ngModel)]="tail" class="propertFilters">
<ion-item>
<ion-label>All Types</ion-label>
<ion-radio id="all" value="" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>No tail</ion-label>
<ion-radio id="no-tail" value="notail"></ion-radio>
</ion-item>
<ion-item>
<ion-label>1 tail</ion-label>
<ion-radio id="oneTail" value="onetail"></ion-radio>
</ion-item>
<ion-item>
<ion-label>2 tails</ion-label>
<ion-radio id="twoTail" value="twotail"></ion-radio>
</ion-item>
<ion-item>
<ion-label>3 tails</ion-label>
<ion-radio id="threeTail" value="threetail"></ion-radio>
</ion-item>
</ion-list>
</div>
</div>
<div class="accordion-content-wrapper">
<h4 class="accordion-toggle dormantState" (click)="toggleIconSense()">Sensitivity <ion-icon [name]="buttonIconSense"></ion-icon></h4>
<div class="accordion-content">
<p>How sensitive is the animal?</p>
<ion-list radio-group [(ngModel)]="sensitive" id="sensitivity">
<ion-item>
<ion-label>All Types</ion-label>
<ion-radio id="all" value="" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>Very Tolerant</ion-label>
<ion-radio id="veryTol" value="veryTol"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Tolerant</ion-label>
<ion-radio id="tolerant" value="tolerant"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Sensitive</ion-label>
<ion-radio id="sensitive" value="sensitive"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Very Sensitive</ion-label>
<ion-radio id="verySens" value="verySens"></ion-radio>
</ion-item>
</ion-list>
</div>
</div>
</div>
<hr />
<button ion-button full color="danger" icon-left (click)="resetFilter()">
<ion-icon name="refresh-circle"></ion-icon>Reset Filters
</button>
</ion-col>
<ion-col style="background: white;" id="galleryDisplay">
<ion-grid>
<ion-row>
<div *ngFor="let macro of allMacros">
<ion-col col-12 (click)="goToMacroDetailsPage(macro)" class="item filter-item" *ngIf="(size == macro.filter_size || !size) && (shell == macro.filter_shell || !shell) && (legs == macro.filter_legs || !legs) && (tail == macro.filter_tail || !tail) && (sensitive == macro.filter_sensitivity || !sensitive)">
<ion-card>
<img src="./assets/imgs/thumbs/{{macro.thumbnail}}.jpg" />
<ion-card-content>
<ion-card-title>
{{macro.title}}
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-col>
</div>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
and the SCSS file:
page-filter {
.content {
height: 100%;
.grid {
#galleryDisplay {
.grid {
height: 100%;
overflow: scroll;
border: 1px solid pink;
position: absolute;
}
.item {
width: 135px;
height: 165px;
background: #eee;
margin: 3px;
display: inline-flex;
}
.card-content {
padding: 10px;
}
.card-title {
font-size: 1.2rem;
font-weight: 500;
padding: 0;
}
.card {
margin: 3px;
width: 100%;
}
.filter-item {
animation: fadeInUp 0.6s;
}
}
#sortingFilters {
//overflow: hidden;
padding: 1em;
height: 700px;
h2 {
color: #342392;
margin-top:0;
}
.accordion-content-wrapper {
border: 1px #488aff solid;
border-radius: 10px;
margin-bottom: 5px;
h4.accordion-toggle {
cursor: pointer;
color: #488aff;
padding: 8px;
margin-bottom: 0;
margin-top: 2px;
.icon {
float: right;
}
}
.accordion-content {
display: none;
padding: 5px;
p {
padding: 0px 5px;
}
}
.accordion-content.default {
display: block;
}
ul {
list-style-type: none;
}
}
}
}
}
}