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

Label of TextField not aligned to the right direction in rtl mode (reopen of #9332) #25856

Closed
eran-or opened this issue Apr 20, 2021 · 6 comments
Closed

Label of TextField not aligned to the right direction in rtl mode (reopen of #9332) #25856

eran-or opened this issue Apr 20, 2021 · 6 comments
Labels
support: Stack Overflow Please ask the community on Stack Overflow

Comments

@eran-or
Copy link

eran-or commented Apr 20, 2021 •
edited
Loading

here is the https://codesandbox.io/s/2ezlw?file=/demo.tsx:0-453

And I just added the label: !!!This code not working - the solution is beneath!!!

import React from 'react';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const theme = createMuiTheme({
  direction: 'rtl', // Both here and <body dir="rtl">
});

export default function Direction() {
  return (
    <ThemeProvider theme={theme}>
      <div dir="rtl">
        <TextField label="ערן" placeholder="Name" />
        
      </div>
    </ThemeProvider>
  );
}

I followed this: #9332 and i don't know what they are talking about - the links inside not working and the demo in the documentation not working too. it's seems like old thread.

After wasting my time I did a simple solution for rtl with css:

[dir="rtl"] .textField label{
 left: auto;
 right: auto;
 transform-origin: top right;
 text-align:right;
}

(With this solution i don't need ThemeProvider nor createMuiTheme, but i do change the direction of the html dir attr with js in useEffect when someone change the language. )
@eran-or eran-or added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 20, 2021
@oliviertassinari oliviertassinari added support: Stack Overflow Please ask the community on Stack Overflow and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Apr 20, 2021
@support
Copy link

support bot commented Apr 20, 2021

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

@support support bot closed this as completed Apr 20, 2021
@oliviertassinari
Copy link
Member

@eran-or You need to configure the JSS plugin, as well. You can follow the guide in the documentation.

@eran-or
Copy link
Author

eran-or commented Apr 20, 2021

what if i want to use the create-react-app and prefer not to configure the webpack with fork or eject?
jss solution is not fits to everyone and everyone working with css in js. im working with css modules and i'm happy.
if I must configure then i prefer to not use the jss but this simple css solution.

@oliviertassinari
Copy link
Member

oliviertassinari commented Apr 20, 2021 •
edited
Loading

It's not related to webpack https://material-ui.com/guides/right-to-left/.

@ekbatani
Copy link

ekbatani commented Aug 4, 2021

I wonder even in demo link: https://codesandbox.io/s/nrblo?file=/demo.js the label is not working properly.

@erfanatp
Copy link

erfanatp commented Aug 4, 2022

@ekbatani Amir Khan did it fix?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
support: Stack Overflow Please ask the community on Stack Overflow
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@eran-or @oliviertassinari @erfanatp @ekbatani