Placing the `fa fa search` icon directly beside the text box

UPDATES:

Upon incorporating the recommended 

<span class="input-group-addon">.00</span>
, this is the current rendering:

https://i.sstatic.net/WQohm.png

Even after trying to use style="margin-left:200px;", there was no visible change.

UPDATE COMPLETION

Is there a way to insert fa fa search on the right side of a textbox? Below is the HTML code post-rendering:

https://i.sstatic.net/BbzGB.png

<div class="form-group">
    <label class="col-sm-2 control-label">Search </label>
    <div class="input-group" style="margin-left:210px">
        <span class="input-group-addon"><i class="fa fa-search"></i></span>
        <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
        <input class="form-control ui-autocomplete-input" data-jqui-acomp-delay="200" data-jqui-acomp-hiddenvalue="PartId" data-jqui-acomp-minlength="2" data-jqui-acomp-source="/Search" data-jqui-type="autocomplete" id="Part" name="Part" placeholder="Search..." required="required" style="width:215px !important;" type="text" value="" data-parsley-id="6454" autocomplete="off">
        <ul class="parsley-errors-list" id="parsley-id-6454"></ul>
        <input id="PartId" name="PartId" type="hidden" value="" data-parsley-id="9361">
        <ul class="parsley-errors-list" id="parsley-id-9361"></ul>

    </div>
</div>

Placing the span directly beside the textbox results in the following:

<span class="input-group-addon"><i class="fa fa-search"></i></span>

https://i.sstatic.net/xwkdi.png

htmlcssfont-awesome

Answer №1

Here is a solution for what you are searching for (rearranging the order of spans and ensuring that the icon span is within the input-group-addon span)

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

Answer №2

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

Take a look at this code snippet on Bootstrap's website: http://getbootstrap.com/components/#input-groups

This code will help you achieve your desired result, just remember to include the appropriate fa icon where the $ symbol is located.

In addition, consider using Glyphicons for better results.

http://getbootstrap.com/components/

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

Output text to a div element within a freshly opened window

I am facing a challenge with an HTML page called X.html: ...... <div id = "content"></div> ...... Currently, I am using the code below to open X.html and insert content into the content div. content = "show in the div in the new window"; new ...

javascripthtml

Updating user credits through the Model::factory() method is a common practice in my workflow

I need to update the UserCredits after a purchase. For example, if a user currently has 10 credits and purchases 10 more, I want to add the purchased credits to their existing total. The goal is to increment the current credit score with the new credits ...

phphtmlcsslaravel

Troubleshooting issues with embedding an Excel file using iFrame

Currently, I'm utilizing an iframe to embed an Excel file into an HTML page using the Microsoft OneDrive embed function. The issue I'm facing is that while it displays the excel file, it doesn't embed it properly; instead, it takes over the ...

htmlexceliframeembedonedrive

How to Implement Angular ngStyle with ChangeDetectionStrategy.OnPush?

Check out this StackBlitz demonstration that demonstrates how ngStyle is being used to style the h1 element in the following way: <h1 [ngStyle]="{'background-color': backgroundColor}" The component named HelloComponent employs the O ...

javascripthtmlcssangulartypescript

When using the resize property in monaco-editor, it may result in editor popups being obscured or

My current task involves utilizing the deltaDecorations method to display errors in my editor. Feel free to check out my code here: https://gist.github.com/dinager/41578bd658b60cc912a6023f80431810 Below is the output: https://i.sstatic.net/Dtj9A.png ...

htmlcssmonaco-editor

Error: ShowModalEdituser has not been defined

When implementing this code to display a modal in ASP.NET Core 5, I encountered the following error: Uncaught ReferenceError: ShowModalEdituser is not defined at HTMLButtonElement.onclick(). As a result, the modal does not appear. How can I resolve this er ...

javascripthtmljqueryajaxasp.net-core

Is it possible to utilize the Linear-gradient property for creating a vertical background color effect?

I'm currently attempting the following: body { height:100%; background: -moz-linear-gradient(left, #DB2B39 50%, #2B303A 50%); background: -webkit-linear-gradient(left, #DB2B39 50%,#2B303A 50%); background: linear-gradient(to right, #D ...

htmlcssbackground-color

Menu that adjusts to fit your browsing needs

Struggling to implement a fixed bottom menu on my page. Can anyone help with making it responsive? I've attempted to create the menu, but I'm having trouble linking the logo and menu items together. HTML <header class="header"> ...

css

Using Bootstrap's collapse class with a smooth linear transition

I've been attempting to implement Bootstrap collapse with a linear effect, but have been encountering challenges. After trying different versions of Bootstrap, I found that the transitions were quite similar. I decided to go with the latest version av ...

htmlcssbootstrap-4

What is the best way to halt the ticking of this clock in JavaScript?

I can't seem to figure out how to stop this clock using JavaScript Even though I press the stop button, the clock keeps running <!DOCTYPE html> <html> <head> <h1> Welcome to the clock. Press the stop button to halt the clo ...

javascripthtml

Tips for adjusting the size of icons in Ionic Framework v4 and Angular 7

The library ngx-skycons offers a variety of icons for use in projects. If you're interested, check out the demo here. I'm currently incorporating this icon library into an Ionic project that utilizes Angular. While the icons work perfectly, I&ap ...

cssangulartypescriptionic-frameworkicons

Retrieve the ID of the clicked list item

Below is a list that I have: <ol class="sortable ui-sortable"> <li id="list_1608"><div>One</div></li> <li id="list_1609"><div>Two</div></li> <li id="list_1610"><div>Three</di ...

javascriptjqueryhtmlnested-sortable

What is the best way to implement rotation functionality for mobile devices when dragging on a 3D globe using D3.js and an HTML canvas?

I have been experimenting with the techniques demonstrated in Learning D3.js 5 mapping to create a 3D globe and incorporate zoom and rotation functionalities for map navigation. Here is the function that handles both zooming and dragging on devices equipp ...

javascripthtmld3.jscanvas

Phone website doesn't display properly on mobile device (CSS and HTML)

I am experiencing an issue where my website is not loading on mobile devices, but it functions properly when I adjust the size of my Chrome window on my laptop. @media screen { body{ background-image: url(background.jpg); backgroun ...

htmlcssmobile

Iterate through each line of code and modify the integer in order to target elements by their class

Originally shared on the MrExcel forum www.mrexcel.com/board/threads/change-integer-in-code-line-for-htmldoc-getelementsbyclassname.1146814/ The initial line of code I used was Set DogRows1 = HTMLDoc.getElementsByClassName("rpb-greyhound rpb-greyhou ...

htmlvbaloopsgetelementsbyclassnameclassname

Whenever I adjust the layout of the navigation bar, the edges end up getting clipped

I'm having trouble with the border shape of my navbar. When I try to make it a rounded pill shape, the edges get cut off instead of being properly displayed. https://i.stack.imgur.com/sUN2Y.png Below is the HTML template: <template> <div cl ...

javascriptcssvue.jsbootstrap-4bootstrap-5

Smoothly transition between the new and existing child elements in a React component with a

Currently, I am utilizing a React component that renders a child element through props.children. The content within this child element varies dynamically. I am looking for the most effective method to smoothly transition (fade out the old element and fad ...

javascriptcssreactjs

Search for every div element and locate the ul element within it. Calculate the total number of table rows present in the ul element. Add this

There is a list on my website with a sublist called .cart-items. This sublist contains a table with multiple rows. My goal is to iterate through each .cart-select item and count the number of tr elements within the cart-items. The count should then be disp ...

jqueryhtml

Tips on creating a keypress function for a div element with the contenteditable attribute

Hey there, I have managed to create a textarea within a div by using -webkit-appearance. However, I am currently struggling to add an event to this div on key press. I have been trying my best to figure it out but seem to be missing something. If you coul ...

javascriptphpjqueryhtmlcss

Expanding a flexbox child using transform creates gaps between elements

I am working with a flexbox containing 5 direct children. My goal is to scale the first and last column (.colonnade__column) to zero instead of using display: none. When I achieved this, the content scales as expected but still keeps the space reserved, ca ...

cssflexboxcss-transforms