Question 370641 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React App.js not scrollable on smartphone browser

The react App.js has two panes, left page is menu and right pane is displaying content accordingly. The content in right pane should be scrollable if it is more than one page with style={{ overflowY: 'auto', maxHeight: '100vh' }}. Here is the App.js

import React, { useState, useEffect } from 'react';
import { createBrowserRouter, BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Layout } from "./components/common/Layout";
import SplitPane, {
  Divider,
  SplitPaneBottom,
  SplitPaneLeft,
  SplitPaneRight,
  SplitPaneTop,
} from "./components/common/SplitPane";
import Liubao from './components/Liubao';
import Sidebar from './components/Sidebar';
import ListWork from './components/ListWork';
import Itemdetail from './components/common/Itemdetail';
import helper from './components/lib/helper';
import global from './components/lib/global';

const App = () => {

  const [routes, setRoutes] = useState([]);

  useEffect(() => {
    let isActive = true, _routes=[];
    const asynctask = async (url) => {
      let _cates = [];
      try {
          _cates = await helper.getAPIp(url,  "GET"); //retrieve categories
          if (_cates.status === 200) {
              let cat = await _cates.json();
              cat.map(i => {
                let temp = {
                  path:`${i.value}`,
                  element:<ListWork title={i.name} cateid={i.id} />
                };
                _routes.push(temp);
              });
              if (isActive) {
                setRoutes(_routes);  
              };
          } else {
              setRoutes([]);
          } 
      } catch(err) {
          console.log(err); 
          setRoutes([]);
      }
    };
    let urlcate = `${global.BASE_URL}/api/categories/cates`; // no middleware required
    asynctask(urlcate);
    return () => isActive = false;
  }, []);
  
  return (
    <Layout>
      <SplitPane className="split-pane-row">
        <Router>
          <SplitPaneLeft>
            <Sidebar style={{ borderRight: '1px solid #ccc', padding: '0 16px' }} />
          </SplitPaneLeft>
          <Divider className="separator-col" />
          <SplitPaneRight style={{ overflowY: 'auto', maxHeight: '100vh' }}> //<< style for right pane which should be scrollable
              <Routes>
                <Route key={routes.length+2} path={'/liubao'} element={<Liubao />} />
                {routes.map(({ path, element, index }, idx) => (
                  <Route key={idx} path={path} element={element} index={index} />
                ))}
                 <Route key={routes.length + 1} path={'/itemdetail'} element={<Itemdetail />} />
                 <Route path="/*" element={<Navigate to="/liubao" />} />
              </Routes>
          </SplitPaneRight>
        </Router>
      </SplitPane>
    </Layout>
  );
};

export default App;

Here is the Layout.js:

import React from "react";
import Container from "react-bootstrap/Container";
export const Layout = (props) => {
    return (<Container>
        {props.children}
    </Container>
    )};

The content on right pane is shown in one page on PC browser. However the same content is shown in multiple pages on smartphone browser. But only first page is shown and scrollable does not work (by swiping up or down. only partial content is shown).

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The solution working is to use bootstrap Container, Row and Col, specify the screen width on various device pixel.

     import { Container, Row, Col } from 'react-bootstrap';
...
 return (
    <Container>
      <Router>
        <Row>      
          <Col xs={12} md={3} style={{ marginBottom: '20px' }}>
            <Sidebar style={{ borderRight: '1px solid #ccc', padding: '0 16px' }} />
          </Col>
          <Col xs={12} md={9}>
            
              <Routes>
                <Route key={routes.length+2} path={'/liubao'} element={<Liubao />} />
                {routes.map(({ path, element, index }, idx) => (
                  <Route key={idx} path={path} element={element} index={index} />
                ))}
                  <Route key={routes.length + 1} path={'/itemdetail'} element={<Itemdetail />} />
                  <Route path="/*" element={<Navigate to="/liubao" />} />
              </Routes>
          </Col>
        </Row>
      </Router>
    </Container>
  );

  2. 0

    To make the content in the right pane fully scrollable on mobile devices, add overflowY: ‘scroll’ to the style of the SplitPaneRight component. This allows vertical scrolling when the content exceeds the viewport height. Here’s the updated code snippet.

        <SplitPaneRight style={{ overflowY: 'scroll', maxHeight: '100vh' }}>
  <Routes>
    {/* Routes configuration */}
  </Routes>
</SplitPaneRight>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search