search

zyra / ionic-super-tabs

Swipeable Tabs for Ionic
MIT License
664 stars 192 forks source link

supertabs and ion-split-pane #437

Open rodrigoGA opened 4 years ago

rodrigoGA commented 4 years ago

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.

Pacn91 commented 3 years ago

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.

nileshbandekar commented 3 years ago

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;
    }