CODEWITHSUNDEEP
reactjsmaterial-ui
Santhosh
Santhosh

Reputation: 11774

material ui: how to align the Input Label properly

I have the following code for input with inputlable

<FormControl>
  <InputLabel htmlFor="my-input">
    Photo
  </InputLabel>
  <input
    type="file"
  />
</FormControl>

What I see is

enter image description here

What I want is

enter image description here

I get this using:

<TextField
  fullWidth
  label="photo"
  margin="dense"
  accept="image/*"
  type="file"
  InputLabelProps={{
    shrink: true,
  }}
/>

So how can get this same effect using the previous code i.e using formcontrol, inputlable etc.

The reason i have to use that intead of textfield is react hook form: materail ui: Textfield: onSubmit, not passing Filelist in the data

Upvotes: 1

Views: 1941

Answers (1)

Majid M.
Majid M.

Reputation: 4954

Just set shrink property of InputLabel true and add a custom margin:

  <FormControl>
    <InputLabel shrink={true} htmlFor="my-input">
      Photo
    </InputLabel>
    <input style={{ marginTop: "15px" }} type="file" />
  </FormControl>

Edit infallible-sanne-3t0q2

Upvotes: 2

Related Questions