'Material UI input field looking weird

Anyone knows why this is happening. I am using material UI. the default value and the label for the field are overlapping for some reason.

Here's the code for the rendering of the fields:

{formSchema.map((element, index) => (
                        <Grid key={element.name} className={classes.gridItems} item sm={6}>
                            {formInputRender(element, index)}
                        </Grid>
                    ))}

and this is the field in the forSchema array:

4:
dataType: "number"
defaultValue: null
mandatory: false
name: "Amount"
validation: {minLength: null, maxLength: null}
[[Prototype]]: Object

formInputRender function:

case 'number':
                return (
                    <TextFieldElement
                        name={formElement.name}
                        type="number"
                        required={formElement.mandatory}
                        label={formElement.name}
                        value={formik.values[formElement.name]}
                        onChange={formik.handleChange}
                        onBlur={blurHandler}
                        onKeyDown={(evt) => evt.key === 'e' && evt.preventDefault()}
                        error={errorHandler(formElement)}
                        helperText={errorHandlerText(formElement)}
                        className={classes.flexGrow}
                        InputProps={
                            apiFields.includes(formElement.name)
                                ? {
                                      endAdornment: (
                                          <InputAdornment position="end" style={{ outline: 'none' }}>
                                              {apiErrorHandler(formElement.name)}
                                          </InputAdornment>
                                      )
                                  }
                                : false
                        }

Solution 1:^[1]

In your Material UI TextField, you can add InputLabelProps setting, I provide the code snippet you can try, hope this can help you.

<TextField InputLabelProps={{ shrink: true }} />

Solution 2:^[2]

Assuming the file is in the same directory as the app, you could do something like

import os

path = os.path.dirname(os.path.realpath(__file__)) # directory path of the app
conn = sqlite3.connect(path+"/down.db")

# or - after @S3DEV comment
conn = sqlite3.connect(os.path.join(path, "down.db"))

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	wildgamer
Solution 2

'Material UI input field looking weird

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]