What is the best way to place a search icon beside my label?

Hello there! I am currently working on designing in Angular 4 using bootstrap 4. I attempted to include a search icon at the end of my label.

The code is as follows:

<div class="row ">
  <div class="form-group col-lg-2"></div>
  <div class="form-group col-lg-4">
    <label class="Bold">Location Id </label>
    <input type="text" class="form-control"  name="LocationId" >
    <span class="input-group-btn">
      <button class="btn btn-info btn-md" type="button"><i class="fa fa-search"></i></button>
    </span>
  </div>
  <div class="form-group col-lg-4">
    <label class="Bold">Description </label>               
    <input type="text" class="form-control" name="description">
  </div>
  <div class="form-group col-lg-2"></div>
</div>

However, it appears like the image attachedhttps://i.sstatic.net/x6RSG.jpg. How can I successfully add an icon at the end of the label? Is there an issue with my code?

cssangulartwitter-bootstrap-4

Answer №1

Utilize the input-group feature from Bootstrap 4 for better functionality.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="form-group">
        <label>Username</label>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon2">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button">Go</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

Here's a suggestion: Group the input and span elements within an input-group.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>

<div class="row ">
  <div class="form-group col-lg-2"></div>
  <div class="form-group col-lg-4">
    <label class="Bold">Location Id </label>
    <div class="input-group">
      <input type="text" class="form-control"  name="LocationId" >
      <span class="input-group-append">
        <button class="btn btn-info btn-md" type="button">
          <i class="fa fa-search"></i>
        </button>
      </span>
    </div>
  </div>
  <div class="form-group col-lg-4">
    <label class="Bold">Description </label>               
    <input type="text" class="form-control" name="description">
  </div>
  <div class="form-group col-lg-2">
  </div>
</div>

Answer №3

To ensure that the text box occupies the full width, utilize the Form-control class for Input. To combine the input field with any attached icon, make use of the input-group class. See the code snippet provided below for a clear example:

<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
    <i class="fa fa-search"></i>
</span>
</div>

Answer №4

Here is a snippet of the code:

<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
 <input type="text" class="location-txt form-control"  name="LocationId" >
 <span class="input-group-btn location-search">
<button class="btn btn-info btn-md" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>

CSS

.location-txt 
    width: calc(100% - 44px);
    float: left;
}
.location-search{ 
    display: inline-block;
    float: right;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for accessing properties in JSON objects using AngularJS

In my Angular project, I have a TypeScript class called CheckoutInfo. export class CheckoutInfo { lines: CheckoutInfoLine[]; taxRate: number; get subTotal(): number { return this.lines.reduce((acc: number, cur: CheckoutInfoLine) => ...

angularangular-pipeangular-json

displaying the name of the current admin center on the header

In my project, the admin registers an account with a center name. However, when they log in and see the admin page on the header, I need to display the center name that was registered for the current logged-in admin. Unfortunately, I have no idea how to ac ...

node.jsangularmongooseangular-materialmean-stack

Hovering over the Jquery menu will display only the first child element

Hey there, newbie here looking to learn some new things. I ran into an issue where only the first child of the menu shows up when hovering over the parent element. Can anyone help me out with this problem? Please ignore the css for now. Any assistance woul ...

jquerycssjquery-ui

Why is my Tailwind Grid displaying elements in a horizontal layout?

<div className='grid grid-cols-12 gap-12 mb-8'> <div className='col-span-8'> <div className='box'></div> </div> <div className='col-span-4'> <d ...

cssnext.jstailwind-csstailwind-ui

"I have successfully removed the URL from index.html. However, I am now wondering how I can include them in app

I have modified the URL in index.html to remove query parameters, but now I need my app.component.ts file to still be able to access and work with those query params using ActivatedRoute. However, when I implemented the script in index.html to remove query ...

javascriptangular

Two boxes each taking up half of the width, with content placed inside a container

How can I achieve the appearance seen in this image? https://i.sstatic.net/2oZW8.png The layout consists of four columns using regular Bootstrap code. The first two columns should have a white background within a .container, while the other two columns s ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

How can custom CSS and JS be loaded in Sencha Touch based on the user's device - PC, tablet, or smartphone?

Is there a way to configure a webpage so that when the user is accessing it from a PC (using Safari/Chrome/Firefox), they see the "normal" version of the page, but if they are using an iPad to view the same URL, they get Sencha Touch (css, js) files in t ...

javascriptcssipadsencha-touchnavigator

Transforming the mui stepper connection into a progress bar is simple. Each step contains individualized content to guide you through the process

Is there a way to make the MUI stepper connector act as a progress indicator? I have step content and connectors as separate divs, but I'm having trouble styling them. Any assistance would be greatly appreciated! ...

javascriptcssreactjsmaterial-ui

The full-page layout features a convenient scroll bar situated at the bottom for easy

I've been grappling with a perplexing CSS issue that is causing a scroll bar to appear on a full page. Initially, my div layout was as follows (with no scrollbar problem): Container 100% (width) wrapper 80% navMenu 100% centerDoc 100% Ho ...

css

What is the best way to add an external .js file to my Angular 2 application?

I'm currently working on a project using Angular 2's TypeScript API along with webpack to develop a web application. However, I've encountered an issue where one of my components needs to utilize functions from an external .js file that is p ...

google-app-engineangulartypescript

Having trouble implementing two-way binding in Angular for a specialized component?

Within my view component, I am fetching data from a service and setting it as a property. Custom components then use these fields to display the data. Everything seems to be working fine so far. <app-textbox [caption]="'First name'" ...

angulartypescriptangular-ngmodeltwo-way-binding

Avoiding navigation bar overlap in CSS techniques

I have successfully implemented dropdown navigation with absolute positioning, but it is causing the left side to squash and the content above it to be hidden behind the navigation. Is there a way to prevent my navigation from overlapping other content wh ...

csshtml

Ways to center text horizontally in a line with the help of bootstrap styles?

.list-group-item{ width: 165px; height: 32px; line-height: 1px; text-align: center; margin-bottom: 1px; margin-top: 58px; margin-left: 20px; } <ul class="list-group" v-if="showSearchHistory"> <li class="list-g ...

cssvue.jsbootstrap-4

Top method for embedding SVGs within Angular Universal

We are working on an innovative Angular 16 Universal project and are exploring optimal methods for utilizing SVG icons while prioritizing performance. Our web app requires multicolor icons which makes traditional font solutions like Icomoon impractical for ...

angularsvgiconsserver-side-renderinguniversal

There seems to be an issue with the functionality of Angular's updateValueAndValidity() method

I am facing an issue with a simple form setup: <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate> <input type="radio" id="enabled" formControlName="enabled" [value]="true" ...

angularangular-formsangular-formbuilder

I only notice certain text after carefully inspecting the elements in Google Chrome

While creating an application on Sitefinity (ASP.NET), I encountered an issue where certain elements, such as button text and labels, were not loading correctly when running the application. However, upon inspecting the element, they appeared to be working ...

c#javascriptasp.netcsssitefinity

The SVG syntax underwent alterations following its transmission via email

Can someone please help me fix this code? My visual studio code interpreter seems to be having trouble recognizing the style code within it. <?xml version="1.0" encoding="utf-8"?> <!-- (c) ammap.com | SVG weather icons --> <svg vers ...

htmlcsssvgsyntax

Unpacking intricate function arguments in TypeScript

I am working with the following model classes: export class Book { public name: string; public id: string; ... } export class Author { public firstName: string; public lastName: string; ... } The my-component triggers an event t ...

angulartypescript

How can I prevent my website layout from adjusting when the window is resized?

I want my website to remain the same regardless of window resizing, ensuring that no elements on the page shift or change size. Currently, my image and buttons are moving and resizing with the window, which I don't want. * { box-sizing: border-bo ...

htmlcssbuttonresizeresponsive

Managing the vertical positioning of grid items: tips and tricks

Is there a way to make the hexagons in my grid responsive to the layout, so that their height and width remain fixed relative to their container? Currently, they are overflowing from the grid container as shown in this jsfiddle: https://jsfiddle.net/gv5wc1 ...

htmlcsscss-grid