Utilize React to float the Material UI SwipeableDrawer component to the right side of the screen

I'm currently working on a project that involves using material UI alongside React/Redux. There has been a recent change in the Figma file where the SwipeableDrawer component is now positioned on the right side of the screen instead of the left. I've been struggling to figure out how to adjust its position.

Below is the JSX for the component:

 <SwipeableDrawer
      className="swipeDrawer"
      anchor="bottom"
      variant="temporary"
      open={isFilterShown}
      onOpen={toggleFilterModal}
      onClose={toggleFilterModal}
      sx={{
        '& .MuiDrawer-paper': {
          height: '50%'
        }
      }}
    >
      <Box
        className="filterBox"
        sx={{
          height: '14%',
          backgroundColor: '#525F75',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          paddingTop: '5%'
        }}
      >
        <Typography variant="h5" color="white">
          Water Filter
        </Typography>
      </Box>
     <!-- More content here -->
  </ScalingComponent></pre>

<p>Here's the CSS class related to the issue:</p>
<p><code>  .filterBox { width: 100%; padding-right: 0; }



I've experimented with various solutions like using display block and float-left, but none seem to work effectively. I've spent over a week trying different methods without success and feel quite stuck.


Edit: A snippet of the resulting HTML was requested.
cssreactjsuser-interfacematerial-uijsx

Answer №1

To modify the position of appearance of the component, simply adjust the anchor prop within the available Drawer props inherited from SwipeableDrawer:

<SwipeableDrawer
  anchor={'left'} // 'right', 'bottom', 'top'
  ...other props
>
  Your content here
</SwipeableDrawer>

It is unnecessary to utilize custom styling for setting the positioning of the SwipeableDrawer

For more information and examples, refer to: https://mui.com/material-ui/react-drawer/
Explore SwipeableDrawer API documentation here: https://mui.com/material-ui/api/swipeable-drawer/

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

Leveraging the flexibility of an undefined variable as a useEffect dependency

Summary: Need help using listRef.current.clientWidth as a dependency in useEffect. I'm working on creating a dynamic list that automatically adjusts the width of its items based on the list's width. I've almost got it working, but I'm ...

javascriptnode.jsreactjsnpm

Error encountered in React V16.7: The function is not valid and cannot be executed

import React, { useContext } from 'react'; The useContext function is returning undefined. Error Details: Uncaught (in promise) TypeError: Object(...) is not a function Error occurred when processing: const context = useContext(UserCon ...

javascriptreactjs

Find a solution for displaying custom product badges

Having some issues with a custom product badge on my website. I tried adding a new badge (besides "Sale"), but it seems to be displaying in the wrong position. The badge should display as "Choice" on the featured products, so I added this code to the chil ...

phphtmlcsswordpresswoocommerce

Which is better: NextJs or just pure ReactJs?

Although I recognize the advantages of NextJs such as SSR (which supports SEO), built-in routing, and image rendering optimization, it seems that using a state management library like Redux or Thunk is still necessary for managing app-wide state. While the ...

reactjsnext.js

Using Selenium to interact with a checkbox in a React component's ::before pseudo-element

I've been attempting to select a checkbox, and here are some of the methods I have tested: //label[string()=('Notify user')]/i //div[@class='b-checkbox'] //div[@class='b-checkbox']//label//input[@type='checkbox&apo ...

javahtmlreactjsselenium

Optimizing performance: Enhance readback operations in Canvas2D by enabling the willReadFrequently attribute for faster getImageData processing

I am currently utilizing the react-wordcloud package and encountering an issue where the word cloud adjusts to fit 70% of the screen size whenever the container size changes. My console is being flooded with this warning message: https://i.sstatic.net/vdV ...

javascripthtmlreactjscanvasword-cloud

Seeking animated SVGs using CSS styling

I've been trying to animate my SVG icon, but I seem to be missing something. I'm still fairly new to CSS animations. The issue I'm facing is that the position of the SVG isn't correct when the website loads. Additionally, during the an ...

htmlcssanimationsvg

React Dependency Conflict: Material-UI (Mui) Causing Issues of Incompatibility

While trying to install react dependencies using npm i in Netlify, it appears that there are some missing or unresolved libraries in material-ui. Could someone offer assistance in determining the correct versions? 1:48:24 PM: Failed during stage "Ins ...

reactjsnode.jsnpmmaterial-ui

How can I troubleshoot an image not appearing in Bootstrap within a Laravel Blade file while using PHPStorm?

Forgive me if this sounds like a silly question: I attempted to use the following src attribute in an img tag to show an image on a website created with Bootstrap, while using phpstorm with a laravel blade file: src="C:\Users\MAHE\Pictures&b ...

htmlcsstwitter-bootstraplaravel-5laravel-blade

The slicing of jQuery parent elements

Hey there! I recently created a simulated "Load More" feature for certain elements within divs. However, I've encountered an issue where clicking on the Load More button causes all elements in both my first and second containers to load simultaneously ...

javascriptjquerycssjquery-selectors

Is there a way to ensure that the fixed modal remains at the forefront and that its top stays in view even as the user scrolls?

Can you assist me in simplifying this code? import { LoginProps } from '@/layouts/layout.props'; import { Box, Button, Divider, Flex, FormControl, FormLabel, Heading, HStack, IconButton, Input, Link, Stack, Text, } from ...

cssnext.jstailwind-csscss-positionchakra-ui

Having trouble setting a background image for my CSS button

Recently started experimenting with button styles and I wanted to create a design where there is a background image on the left of the button with text located on the right side of the image. Here's the code snippet I've been working on. Here&apo ...

cssbuttonstyling

To initiate the development environment, execute the following command: `cross-env NODE_ENV=

[email protected] start /Users/ssurisettii/Documents/il-17g5-app cross-env NODE_ENV=development npm run webpack-development sh: cross-env: command not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ER ...

reactjstypescript

babel-node encountered an error: 'Reference error - window has not been defined'

I recently took on the challenge of incorporating server-side rendering into a React application. After following a tutorial from this source, I attempted to replicate the steps on the actual project. While everything went smoothly with client-side ...

reactjsserver-side-renderingreferenceerrorscrollmagicbabel-node

Can a shape similar to an inverted circle be created using CSS and jQuery?

I'm stumped on how to create an inverted circle in the corners. I've included a picture for reference. https://i.stack.imgur.com/jeNdh.jpg Is it feasible to achieve this effect using CSS3 or maybe jQuery? ...

javascriptjquerycsscss-shapes

How do Box and Grid components differ in Material-UI?

Can you please explain the distinction between Box and Grid in Material-UI? How do I know when to use each one? I'm struggling to understand their differences. ...

cssreactjsmaterial-ui

Guide on setting a minimum date in TimePickerAndroid for React Native

I recently created a form using react-native that includes start and end time fields. I noticed that setting the start and end times works fine in iOS but not in Android. After checking the official documentation, I learned that the min time option is no ...

androidreactjsreact-nativeandroid-timepicker

React is throwing an error that says, "You cannot use the import statement outside a

My journey with learning React has just begun. I followed the steps outlined in the starting guide at https://react.dev/learn/add-react-to-an-existing-project, but unfortunately, I encountered an error: "Cannot use import statement outside a module." Here ...

javascriptnode.jsreactjs

Displaying images above a Bootstrap Carousel

I am looking to create a dynamic mobile image slider using Bootstrap carousel with overlaying images. However, I am facing two issues with responsive resizing and the overlapping of sections due to absolute positioning. <section> <h2 style= ...

htmlcssimagebootstrap-4

Autocomplete Feature in MUI Not Providing Filtered Results

When I input a partial string into the text field, the options in the dropdown menu are not being filtered correctly. For example, if I type '112', it should only display values that include '112' but instead, it shows all options. < ...

reactjsmaterial-uiautocomplete