text of input need to be more vertically aligned compared to other divs content

Question

I have created some chips/tags with an input element next to them.

The vertical orientation of the text inside the chips is different to the vertical orientation of the text inside the input element."Enter new customer name" is a bit higher or more top aligned.

How can I fix this without using hacks like padding-top:3px...

I would like to normalize that text orientation in the input because it seems to me that the text inside the input itself is also not centered vertically within that input, or am I wrong?

How can I do that?

HTML

<div class="md-chips-component">
  <div class="md-chips-container" tabindex="-1">
     <div class="md-chips d-flex">
        <div class="md-chip">
          <div class="md-chip-text">Neil</div><div class="md-chip-remove">X</div>        
       </div>
        <div class="md-chip">
          <div class="md-chip-text">Strongman</div><div class="md-chip-remove">X</div>
       </div>        
       <form [formGroup]="schoolclassForm">
         <input class="md-chip-input" type="text" value="Enter new customer name" />
       </form>
      </div>
  </div>
  <div class="error-messages">
    <p>That field is required.</p>
    <p>Minimum are 3 chars.</p>
     <p>customer already exists.</p>
  </div>
</div>

CSS

.md-chip {
     display: flex;    
    letter-spacing: 0.05rem;
    color: #444;
    border-radius: 16px;
    transition: all 0.3s;
    margin: 0.1rem 0.3rem 0.1rem 0;
    padding: 0.08rem 1rem;

    line-height: 34px;
    background: #efefef;
    user-select: none;
     outline: 0;
    cursor: pointer;
    position: relative;
}

.md-chips-container
{
  padding-bottom:5px;
  border-bottom:2px solid #efefef;
}

.md-chips-container:focus
{
  border-bottom:2px solid #2196F3;
}

.md-chip-text{
  margin-right:10px;
}

.md-chip-input {
    line-height: 34px;
    padding: 0;
    background:transparent;
    outline:none;  
    border-left: 5px solid #42A948; /* green */
    padding-left:5px;   
    } 

.error-messages p
{
  margin-bottom:0px;
  color:red;
}

.md-chip:hover {
  cursor: pointer;
}

score 1 · Accepted Answer · edited May 23 '17 at 11:46

1

Make this adjustment to your code:

.d-flex {
   display: flex;
   align-items: baseline; /* NEW */
}

revised codepen

More details here:

edited May 23 '17 at 11:46

Community

1
1

answered Apr 03 '17 at 23:24

Michael Benjamin

346,931
104
581
701

In my latest chrome I can not see any difference in your revised codepen? – Pascal Apr 04 '17 at 13:31
I tested it on Chrome and FF before posting the answer. It made a difference and lined up the text. – Michael Benjamin Apr 04 '17 at 13:52
1

Just tested it at home where it works. Might be a older chrome version in the office ;-) Thanks Michael, align-items is the correct and only solution someone should accept here no margin/padding-top hacks. – Pascal Apr 04 '17 at 16:47
1

Also works in Edge browser but in IE 11 the md-chip-input is just half the height of the chips, but this can be fixed with an explicit height:34px; same as line-height:34px; :-) – Pascal Apr 04 '17 at 19:10

score 0 · Answer 2 · answered Apr 03 '17 at 22:13

In your css class .md-chip-input, try to achieve this by working on "padding-top"

`.md-chip-input {
    line-height: 34px;
    padding-top: 2px;
    background:transparent;
    outline:none;
    border-left: 5px solid #42A948; /* green */
    padding-left:5px; 
    margin-top: 1px;
    }

`

I suggest also to add a small margin-top

text of input need to be more vertically aligned compared to other divs content

2 Answers2