ionic-super-tabs
ionic-super-tabs copied to clipboard
supertabs and ion-split-pane
If you use supertabs inside an ion-split-pane it takes 100% of the screen and not the content
Please set --super-tab-width: 100%;
as default value.
Just to complement the rodrigoGA answer you need to add the --super-tab-width: 100%;
to the super-tabs, like so:
super-tabs {
--super-tab-width: 100%;
}
The documentation talks about the --super-tab-width
css property only in the super-tab but to fix the problem with ion-split-pane you need to add that property to the super-tabs and not to super-tab.
There is problem in below condition in case of ion-split-pane i have corrected as below node_modules@ionic-super-tabs\core\dist\esm\super-tab-button_2.entry.js
async onTouchStart(ev) {
if (!this.scrollable) {
return;
}
this.debug('onTouchStart', ev);
const coords = pointerCoord(ev);
const vw = this.clientWidth;
const actualXPositionForSplit = window.innerWidth >= 758 ? window.innerWidth - this.clientWidth : 0; //note this
if (coords.x < this.leftThreshold || coords.x - actualXPositionForSplit > vw - this.rightThreshold) {
// ignore this gesture, it started in the side menu touch zone
return;
}
this.initialCoords = coords;
this.lastPosX = coords.x;
}