Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Action placement in RTL mode #607

Open
Farzin-Firoozi opened this issue Jul 29, 2024 · 2 comments
Open

Action placement in RTL mode #607

Farzin-Firoozi opened this issue Jul 29, 2024 · 2 comments

Comments

@Farzin-Firoozi
Copy link

Farzin-Firoozi commented Jul 29, 2024 •
edited
Loading

Expected Behavior

In RTL mode the actions needs to be aligned to the left

Current Behavior

image

Here's the code:

const theme = createTheme({
  direction: 'rtl',
  typography: {
    fontFamily: IranSansFont.style.fontFamily,
  },
})

const MUIProvider: FC<PropsWithChildren> = ({ children }) => {
  return (
    <body className={IranSansFont.className} dir="rtl">
      <AppRouterCacheProvider
        options={{
          key: 'muirtl',
          stylisPlugins: [stylisRTLPlugin],
        }}
      >
        <ThemeProvider theme={theme}>
          <SnackbarProvider
            dense
            preventDuplicate
            anchorOrigin={{
              vertical: 'top',
              horizontal: 'center',
            }}
            action={(key) => (
              <IconButton onClick={() => closeSnackbar(key)}>
                <RiCloseLine color="white" />
              </IconButton>
            )}
          >
            {children}
          </SnackbarProvider>
        </ThemeProvider>
      </AppRouterCacheProvider>
    </body>
  )
}

Your Environment

"dependencies": {
   "@emotion/cache": "^11.13.0",
   "@emotion/react": "^11.13.0",
   "@emotion/styled": "^11.13.0",
   "@mui/material": "^5.16.4",
   "@mui/material-nextjs": "^5.16.4",
   "@remixicon/react": "^4.2.0",
   "@tanstack/react-query": "^5.51.15",
   "@tanstack/react-query-devtools": "^5.51.15",
   "axios": "^1.7.2",
   "next": "14.2.5",
   "notistack": "^3.0.1",
   "react": "^18",
   "react-dom": "^18",
   "recoil": "^0.7.7",
   "recoil-persist": "^5.1.0",
   "stylis": "^4.3.2",
   "stylis-plugin-rtl": "^2.1.1"
 }
@Rezaabdi78
Copy link

Hi, Farzin.

I have the same problem with styling action button in snackbar shown.

I have solved it through className and CSS overriding like this:

in my global.scss:

.notistack-MuiContent-<variant_name>: {},
// this is the content container selector for every type of snacks  
.notistack-MuiContent {
// I think you need to add justify-content:space-between in your case
        // this is the action button selector
	& > :nth-child(2) {
		margin-left: -0.5rem;
		margin-right: 0rem;
		padding-right: 1rem;
		padding-left: 0;
	}
}

@pmahdicheraghi
Copy link

Issue: RTL Action Alignment

I noticed that in RTL mode, the actions are currently aligned to the right, but they should be aligned to the left to maintain proper layout consistency. This misalignment can create confusion in RTL interfaces where users expect actions to follow the natural reading order.

Suggested Solution:

I’ve submitted a pull request that addresses this issue. In my PR, I introduce flexGrow: 1 and justifyContent: 'end', which adapt the alignment dynamically for both LTR and RTL layouts. These changes ensure that:

  • In LTR mode, actions are aligned to the right.
  • In RTL mode, actions are correctly aligned to the left.

This approach not only fixes the RTL alignment issue but also improves overall flexibility and responsiveness of the layout. Feel free to review the PR, and let me know if there are any further adjustments or feedback!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Farzin-Firoozi @Rezaabdi78 @pmahdicheraghi