Placing an icon between Text Group: Bootstrap-CodePudding

I'm trying to place an icon at the center of two Input boxes.

What I've achieved until now is

What I wanted to achieve is

Source code : https://codesandbox.io/s/morning-brook-0vn6jb?file=/src/App.tsx

CodePudding user response：

Because this uses bootstrap, it seems that class position-relative can be added to the container div, and position-absolute top-50 start-50 translate-middle can be added for the icon.

Forked live demo on: codesandbox

The posted codesandbox is using reactstrap but did not seem to install bootstrap as it requires, so the above example had the package installed.

While the post is tagged with bootstrap-4, the installed version of reactstrap does not seem to support it, so this example had the new version of bootstrap installed. If bootstrap-4 is needed, some class names may need to be replaced as custom CSS.

A custom class is also added for the icon to add some higher z-index:

.custom-icon {
  z-index: 2500;
}

import "./styles.css";
import { Row, Col, Input } from "reactstrap";

export default function App() {
  return (
    <Row>
      <Col>
        <div className="input-group position-relative">
          <Input type="text" className="custom-input" placeholder="Origin" />
          <Input
            type="text"
            className="custom-input"
            placeholder="Destination"
          />
          <img
            src="https://cdn-icons-png.flaticon.com/512/1828/1828961.png"
            alt="icon"
            width="15"
            className="position-absolute top-50 start-50 translate-middle custom-icon"
          />
        </div>
      </Col>
    </Row>
  );
}

CodePudding user response：

App.tsx

export default function App() {
  return (
    <Row>
      <Col>
        <div className="input-group">
          <Input
            type="text"
            className="custom-input origin"
            placeholder="Origin"
          />
          <img
            src="https://cdn-icons-png.flaticon.com/512/1828/1828961.png"
            alt="star"
            width="15"
            className="star"
          />
          <Input
            type="text"
            className="custom-input destination"
            placeholder="Destination"
          />
        </div>
      </Col>
    </Row>
  );
}

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.input-group {
  position: relative;
}

.input-group .custom-input {
  height: 3rem;
  letter-spacing: 1.5px;
  font-size: 12px;
  border-radius: 0px !important;
  padding-left: 10px;
}

.input-group .destination {
  position: absolute;
  left: 170px;
}

.star {
  z-index: 999;
  position: relative;
  left: -8px;
}

.autocomplete {
  padding: 0px;
  background-size: 17px 15px;
  position: absolute;
}