0

Making simple React application with inputs. I do not understand why inputs, button and icon in flex container do not get margins nor they can not be justified evenly. I am using Material UI textfield and button components.

My code is like this:

 <div className="InputContainer">
        <form onSubmit={(event) => handleAddPerson(event)}>
            <TextField
                className="input"
                id="name"
                required
                label="Name"
                variant="filled"
                value={name}
                onChange={handleNameChange} />
            <TextField
                className="input"
                id="email"
                required
                label="E-mail address"
                variant="filled"
                value={email}
                onChange={handleEmailChange} />
            <TextField
                className="input"
                id="phone"
                required
                label="Phone number"
                variant="filled"
                value={phone}
                onChange={handlePhoneChange} />
            <Button
                className="addButton"
                variant="outlined"
                type="submit"

            >Add
            </Button>
            <CustomizedTooltip className="tooltip" title={tooltipText}>
                <IconButton><HelpOutlineIcon /></IconButton>
            </CustomizedTooltip>
        </form>
    </div>

CSS is here:

.InputContainer {
  background-color: white;
  min-height: 72px;
  padding: 16px;
  margin-bottom: 16px;
  width: 878px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.input {
  display: inline-flex;
  min-height: 40px;
  /* margin-left: 20px; */
  background-color: #fafafa;
}

.addButton {
  display: inline-flex;
  height: 38px;
  margin-top: 16px;
}

I have tried things mentioned here: Columns of text not aligning evenly in flex container and here: Better way to set distance between flexbox items. No luck. Should be easy to implement, I don't understand what I'm doing wrong.

Here is what I am getting with this code: no space in between inputs and a button.enter image description here

aaa
  • 21
  • 5
  • Your button and icon should use `inline-block` as `display` property. Then add the margin you required. – Mir entafaz Ali May 14 '21 at 06:43
  • Does not work. Still not getting margins. Damn. – aaa May 14 '21 at 07:00
  • Try use `gap` rule for parent selector in css. – s.kuznetsov May 14 '21 at 07:02
  • Tried that earlier, and now tested: display: grid; grid-template-columns: auto auto auto; column-gap: 16px; Still no space in between. – aaa May 14 '21 at 07:09
  • 1
    `justify-content: 'space-evenly';` should be `justify-content: space-evenly;` – Mr T May 14 '21 at 08:14
  • Good catch! However, that was not the problem (just copy-pasted from the wrong place...). I'll fix that to the code. Ended up using divs to wrap the flex items and use margins to them. Still don't know what was the problem in the first place. Please educate me if you know! – aaa May 14 '21 at 13:20
  • At this point it's just a guessing game, Can you provide a working example ? – Rainbow May 14 '21 at 13:27

0 Answers0