Utilizing React Material UI to divide the screen in half with one half being scrollable and the other half remaining fixed using UI Grid

My setup involves two Grid components, with one structured like this:

<Grid container alignItems="stretch" spacing={3}>
  <Grid className="left-pane" item md={4} xs={12}>
    <Navigation />
  </Grid>
  <Grid className="right-pane" item md={8} xs={12}>
    <img src={Background} />
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
  </Grid>
</Grid>;

I am trying to achieve a layout where the left-pane remains fixed while the right-pane is scrollable. However, when I fix the left-pane, it overlaps and shifts to the left. How can I implement this using Material UI React in such a way that the left pane stays fixed and the right pane remains scrollable? Any guidance on how to achieve this would be greatly appreciated.

Answer №1

To create a responsive drawer in your React application, it is recommended to use the Material-UI library's Drawer component. You can find more information about it at https://material-ui.com/components/drawers/. Avoid using grid as a workaround for this purpose.

import React from 'react';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
... (other imports and code remain the same)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Design that adapts to various screen sizes and devices

I'm facing an issue where the two elements are misaligned on mobile, even though they display perfectly on desktop. In some cases, the bottom element is partially hidden on the left side as shown here: Any suggestions on how to center these elements ...

Ways to customize the color of a ReactSelect component?

Hey there! I'm currently utilizing the React select component, with the following import statement: import ReactSelect, {ValueType} from 'react-select'; Here is what my component currently looks like: https://i.stack.imgur.com/yTmW4.png Th ...

Custom div element obstructs information window on map due to lack of auto panning feature

I created a unique div that is absolutely positioned on a Google Map. You can view the image below to see it. My issue is that the info window is being covered by this custom div element, as demonstrated in the picture. https://i.stack.imgur.com/1TgyQ.jpg ...

Styling a Razor view using inline CSS and responsive media queries

I need to add some simple inline styling for print purposes to an .cshtml page I'm working on. I initially tried using the @media print media query, but it is causing issues with my cshtml page. Is there a workaround for this problem? The culprit see ...

Is there a way to dynamically import several CSS files in React Native depending on the data stored in this.state?

How can I dynamically import multiple CSS files in a React Native project based on language? import React, { Component } from "react"; if(this.state.language === "he"){ import styles from "./he"; }else{ import styles from "./en"; } I attempted the ab ...

Save room for text that shows up on its own

I am currently dealing with a situation where text appears conditionally and when it does, it causes the rest of the page to be pushed down. Does anyone know the best way to reserve the space for this text even when it's not visible so that I can pre ...

Custom component not rendering expected CSS style

I have successfully developed a custom web component without using any framework. I then proceeded to populate it with content from a template tag. Although I was able to manipulate the content using JavaScript, I encountered difficulties when trying to m ...

Step-by-step guide on triggering a button using another button

I have a unique question that sets it apart from others because I am looking to activate the button, not just fire it. Here is my syntax: $("#second_btn").click(function(){ $('#first_btn').addClass('active'); }) #first_btn ...

Redirecting a React page to a SAML login using an Express backend with Passport integration

I have successfully built an application in Express, but I am now transitioning to React, with express serving as an API. My current challenge involves migrating the login page, particularly when it comes to authentication methods: Implementing Passport f ...

The position of the carousel items changes unpredictably

My jQuery carousel consists of 6 individual items scrolling horizontally. Although the scroll function is working correctly, I have noticed that 2 of the items are randomly changing their vertical position by approximately 15 pixels. Upon reviewing the HT ...

Best practices for managing and coordinating the state of Next Js components

I am working on a feature that involves product cards with an "add to basket" button and a cart component that shows the number of products added. The added products are currently stored in local storage. My goal is to have the number in the cart compone ...

Updating the iFrame source using jQuery depending on the selection from a dropdown menu

I want to create a dynamic photosphere display within a div, where the source is determined by a selection from a drop-down menu. The select menu will provide options for different rooms that the user can view, and the div will contain an iframe to showca ...

DIV height adds a layer of design to a website, making it visually

I have a situation where one of my web pages contains a DIV element with text inside, set at 1.1em size. Here's an example: <div id="displaydiv"> <b>Hello World</b> </div> On another page, I have the same DIV element but ...

Is the CSS and jQuery plugin combination blocking the AJAX call or event listener from functioning properly?

After finally getting superfish to work, I encountered a problem where an ajax call would not trigger due to the event listener being prevented. By commenting out the plugin initialization, the event fired but with incorrect data. Any insights on why this ...

What is the best way to apply background color to match the height of the parent element?

When creating cards, I encounter a challenging issue. I am struggling to fill the background-color of the entire box content as I am new to HTML and CSS and unsure how to achieve this. Below are my codes. .box-container1 { display: flex; justify-con ...

Why is the last move of the previous player not displayed in this game of tic tac toe?

Why does the last move of the previous player not show up in this tic-tac-toe game? When it's the final turn, the square remains empty with neither an "O" nor an "X". What could be causing this issue? Here is the code snippet: The HTML code: <div ...

Ways to include active class in specific section within React/Preact app sans the use of react-router router

Currently, I am working on a preact/react application that lacks routing functionality. Our method of navigation involves scrolling or clicking links using the ID of specific sections. While I am aware that react-router allows for adding an active class u ...

ng-class not functioning properly when invoked

In my controller, I have the following function: $scope.menus = {}; $http.get('web/core/components/home/nav.json').success(function (data) { $scope.menus = data; $scope.validaMenu(); }).error(function () { console.log('ERRO') }); ...

Is it possible to extract the value displayed on a Typography component in Material UI and store it in a state variable?

I'm currently facing an issue with mapping a data array onto material-ui Typography elements. Here's the code snippet: { array.map((item, id)=> <Typography key={id} value={item.name} />) } While this code successfully displays the val ...

Playfully imitating cross-fetch

I am currently running tests on a Next/React project using Jest with Node. I have also implemented cross-fetch in my project. However, I encountered an issue when trying to mock cross-fetch for a specific component: import crossFetch from 'cross-fetc ...