1

I despair of swiping components that have different lengths/heights .. So what I need is "auto height" - but it doesn't make a difference!

What I actually want is 4 or 5 pages that my app should consist of and I wand to switch pages through swiping/sliding. I placed all of the components in the return () of App.js as you can see below ...

not working with Router instead because I basically need 2 urls to switch between -> login and the pages inside App.js. But if there is an alternative, please let me know :)


     componentDidUpdate(prevProps){
        // Typical usage (don't forget to compare props):
        if (this.state.id && (this.props.id !== prevProps.id)) {
            this.props.loadProfile();
        }
        this.swipeableActions.updateHeight();
     }

     render() {
        const { isLoading, isAuthenticated} = this.state;

        // Loader
        if (isLoading) {
            return <Splash />
        }
        if (!isAuthenticated) {
            // You can render any custom fallback UI
            this.props.history.push('/signin')
            //redirect to login
        }

        return (

            <html>
                
                <header className='App-header'>
                    <img src={require('./images/logo-multicolor.png')} className='logo-header' alt="logo" />
                </header>
                <SwipeableViews
                    animateTransitions
                    animateHeight
                    action={actions => {this.swipeableActions = actions;}}
                    enableMouseEvents
                    containerStyle={{ width: '100vw', height: '100vh', WebkitOverflowScrolling: 'touch', }}
                >

                    <BlogPosts/>

                    <SearchPics/>

                    <UserSettings/>

                    
                </SwipeableViews>
                
            </html>

        );
    }

So these components are my pages and I want to slide / swipe through all pages. But each of these are of different length /height:

  • one has an appbar as a footer. There is content between header and footer that can be scrolled vertically;
  • Another component is simply a long list of content that has to be scrolled vertically ... etc.

With the code above using react-swipeable-views the components behave as follows:

I do 1 vertical scroll down and land right at the end of the content.Perfect. But I can continue scrolling into blank space (assumption: height: 100vh and thus the complete "swiper / slider" with all components inside is as long / as high as the longest / highest component?).

In the case of the component with header and footer (scrollable content is only between the header and footer), the first scroll brings me to the end of the list inbetween and my footer stays nicely at the bottom. Perfect! Scrolling again leads to blank space after the footer (even though bottom: 0 and position: fixed or static or whatever..).

When I set the height to auto containerStyle = {{width: '100vw', height: 'auto', ..}}

(instead of "height: 100vh") I can't scroll anymore, not even a little! .. the same thing happens if I set height: '100%' . In both cases even the footer disappears in that one component!!!

Here are the css parameters for html, body and root:

@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body {
  height: 100% !important;
  width: 100% !important; 
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  font-family: 'Roboto';
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-repeat: no-repeat;
} 

#body {
  height: calc(100% - 50px) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* The element with id="root" */
#root {
  overflow: hidden !important;
  height: 100% !important;
  min-width: 100% !important; 
  margin: 0 !important;
  padding: 0 !important;
}

Please help me! Should I use a different lib instead of react-swipeable-views? If yes, which? Or is there a way to fix this?

Versions:

"react": {
      "version": "16.13.1",
...

"react-dom": {
      "version": "16.13.1",
...

"react-swipeable-views": {
      "version": "0.13.9",
..
      "react-swipeable-views-core": "^0.13.7",
      "react-swipeable-views-utils": "^0.13.9",

PS: if I set the height for html, or body or root to 100vh inside the css, I get the extra space when scrolling vertically, which of course I want to avoid (assumption: is related to the url bar in Chrome?).

Ninja
  • 21
  • 6

1 Answers1

0

After I have tried react-swipeable-routes and CSSTransition to achieve custom heights + swipable but unfortunately without any profit/changed behaviour.. I have splitted up the components into 2 swipeable views and wrapped them in a div that deletes height of my header, so there is no additional space at the bottom:

<div style={{maxHeight: 'calc(100% - 52px)'}}>
   <SwipeableViews
    animateTransitions={true}
    enableMouseEvents={true}
    containerStyle={{width: '100%', height: '100%',WebkitOverflowScrolling: 'touch', }}
   >

      <Component that has footer and should only be 100% height without scrolling />

   </SwipeableViews>

   <SwipeableViews
    animateTransitions={true}
    enableMouseEvents={true}
    containerStyle={{width: '100%', height: '100vh',WebkitOverflowScrolling: 'touch', }}
   >

      <Component that has long content and should be 100vh height with scrolling />

   </SwipeableViews>

</div>

solved my problems..

EDIT: Did not solve it. After I have deleted browserdata (cash and history), the views didn't display correctly - had to put it back into one swipeable view...

Ninja
  • 21
  • 6