CODEWITHSUNDEEP
htmlcssflexbox
Pascal
Pascal

Reputation: 12885

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

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

http://codepen.io/helloworld/pen/zZeERw

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;
}

Upvotes: 1

Views: 77

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371679

Make this adjustment to your code:

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

revised codepen

More details here:

Upvotes: 1

user2548436
user2548436

Reputation: 925

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

Upvotes: 0

Related Questions