CODEWITHSUNDEEP
twitter-bootstrapinputbootstrap-4add-on
peter
peter

Reputation: 8652

how to make font awsome icon and control in same row

I have a Font Awesome search text box in grid table header header, but unfortunately below code making control and icon in separate lines. How can I solve this?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<table class="table table-bordered table-responsive-md table-striped text-left">
  <thead>
    <tr>
      <th>
        <input class="form-control " type="text" placeholder="Search" class="fas fa-search" aria-label="Search">
        <span class="input-group-addon">
            <i class="fas fa-search" aria-hidden="true"></i>
        </span>
      </th>
    </tr>
  </thead>
</table>

Upvotes: 0

Views: 59

Answers (2)

Venkaiah Nagella
Venkaiah Nagella

Reputation: 11

You need to use the display as inline-flex in the th tag like style="display:inline".

Upvotes: 0

isherwood
isherwood

Reputation: 61055

Per the docs, wrap the two elements in an input group and wrap the icon in an append div.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<table class="table table-bordered table-responsive-md table-striped text-left">
  <thead>
    <tr>
      <th>
        <div class="input-group">
          <input class="form-control" type="text" placeholder="Search" class="fas fa-search" aria-label="Search">

          <div class="input-group-append">
            <span class="input-group-text">
              <i class="fas fa-search" aria-hidden="true"></i>
            </span>
          </div>
        </div>
      </th>
    </tr>
  </thead>
</table>

Upvotes: 1

Related Questions