Twitter Bootstrap Question posted in

Align two icons to the far right of a parent div-Twitter bootstrap

I am trying to add an svg and another span element container an svg to the far right of an input however, with my current setting they are overlapping:

I have a structure like this:

/* How can I fix this such that the red will be aligned before the arrows? Currently my css is:  */

svg,
#mySvg {
  cursor: pointer;
  position: absolute;
  display: inline-block;
  opacity: 0.8;
  right: 0;
  position: relative;
  margin-left: -25px;
  z-index: 9999 !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex align-items-center input-fields">
  <input class="form-control textInput" type="text">
  <svg></svg>
  <span id="mySvg"></span>
</div>

currently they look like this: enter image description here

Tags:

2

Answers


  1. 0

    When you using absolute position for elements you can not control overlaping them.
    The only thing you can do is that add more right offset to one of them to prevent overlaping.
    Example:

    svg {
    right: 10px;
}

#mySvg {
    right: 40px;
}
    Login or Signup to reply.
  2. 0

    Here is a simple example that I managed to work on for this purpose. You can change your HTML like this:

    <div class="input-fields">
  <input class="form-control textInput" type="text">
  <div id="icons_container">
    <svg></svg>
    <span id="mySvg">&#9824;</span>
  </div>
</div>

    and for the CSS part, you do like this:

    #icons_container {
  position: absolute;
  display: flex;
  align-items: center;
  right: 0;
  top: 0;
  padding: 0px 5px 0 0;
}

    I have wrapped both the icons with div that is positioned as absolute and it’s display property is set to flex.
    Here is the example in full in CodePen. https://codepen.io/ahmadkarimi2009/pen/ExgpLbe

    Note: I haven’t used Bootstrap for tackling this issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search