React Material-UI Textfield padding top - Thai Language

Question

I'm use the library for input. But when use with Thai language, it need additional top padding to display word correctly as Thai has 2 level of vowel. For example, word like "ที่นั่น" will be cut on the top. Below is the code I use.

      <Grid item xs={12} md={10}>
        <TextField required id="name" label="Remark name" fullWidth />
      </Grid>

When i put word "ที่นั่น" inside Textfield will display only this. I try various style to change this but not success.

Screencap run of the code

Is not a language problem. Because i'm reproduced you case and everything works. See example: https://codesandbox.io/s/vibrant-jones-5wt94. I think that you use some style that gives you this problem. — Fiodorov Andrei, Mar 31 '20 at 09:24
@FiodorovAndrei Yes, I can set 'label' with Thai language, but the problem happens when I enter something inside Textfield when i run the script. — Tony TK, Mar 31 '20 at 11:56

score 1 · Accepted Answer · answered Apr 01 '20 at 02:02

Thank you for all your comment. For my case, I found out that I need to put paddingTop in InputProps. So, the code I use is:

const styles = theme => ({
  thaiTextFieldInputProps:{
    paddingTop: '5px'
  },
});

and then

<TextField
   InputProps={{
      classes: {
         input: classes.thaiTextFieldInputProps
      }
   }}
   label="Thai Remark"
   fullWidth
/>

score 0 · Answer 2 · answered Mar 31 '20 at 08:34

0

Since you are using MUI you can use their css wrapper function withStyles like this

const styles = theme => ({
  name: {
    paddingTop: '50px', // for example
  },
});

and then

  <Grid item xs={12} md={10}>
    <TextField 
     className={classes.name}
     required 
     id="name"
     label="Remark name"
     fullWidth
    />
  </Grid>

After this you just need to wrapp your component in withStyles HOC:

export default withStyles(styles)(NameOfYourComponent);

answered Mar 31 '20 at 08:34

Lazar Nikolic

4,261
1
22
46

Thank you @Lazar. But it cannot solve the problem. With paddingTop, it just increase the white space between text and label but the content was still blocked by white color. – Tony TK Mar 31 '20 at 12:02
Could you maybe create codesandbox like Fiodorov Andrei did in his comment so that we could see what do you mean exactly – Lazar Nikolic Mar 31 '20 at 15:11

Fiodorov Andrei · Answer 3 · 2020-03-31T19:49:27.803

To fix you problem need to update default styles:

Add class name for text field

    <Grid item xs={12} md={10}>
      <TextField
        className="fix-thai" // <<<<<
        required
        id="name"
        label="ที่นั่น"
        fullWidth
      />
    </Grid>

In you styles add this class and reset styles for input:

.fix-thai input {
  height: 20px;
}

See live example:

I'm make pull request to fix it. With new release I think fixed it.

React Material-UI Textfield padding top - Thai Language

3 Answers3