Search code examples
cssreactjsinputoverlapemotion

Input text overlapping buttons inside input field

I am trying to create an input field using the <input /> field from React and style it using emotion. There are two buttons positioned to the right inside the input field like so:

enter image description here

The buttons are positioned using position:absolute. This makes the text and the buttons overlap: enter image description here

Do anyone know how I can stop the text from reaching the area where the buttons are positioned even though they are positioned absolute using emotion?

Solution

  • An easy method is to add padding-right to input with a value equal or higher than the buttons' width.

    A better way would be to create it similarly to Boostrap's input group: https://getbootstrap.com/docs/4.5/components/input-group/#button-addons

    In that case:

    <div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
  <div class="input-group-append" id="button-addon4">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

    and you can style it like that where you hide input's styles but add a border to the parent element.

    .input-group { 
  display: flex;
  align-items: center;
  padding: .25rem;
  border: 1px solid #ddd;
  border-radius: .25rem;
}

.input-group > .form-control { 
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  padding: 0 .25rem;
}

.input-group-append {
  flex: 0 0 auto; 
  display: flex;
  align-items: center;
}

.input-group-append > .btn {
  margin: 0;
}

    Full example: https://codepen.io/emendelski/pen/WNxyEXb