The position of the searchclear button has been shifted

My livesearch script is working well, but there seems to be a displacement issue with the searchclear button in the image below. I have two JavaScript scripts on my page and I loaded two CDNs, which I believe is causing this displacement. Can someone please help me identify what's wrong with my code?

Here is my entire code: https://jsfiddle.net/blueink/hq86Lxs2/3/

This is my livesearch section:

    <div class="btn-group">
        <input type="text" name="search" placeholder="input 1" class="search form-control" size="3000"
               onkeypress="return event.keyCode!=13"/>
      <span class="searchclear glyphicon glyphicon-remove-circle"></span>
    </div>

    <ul class="list-group result"></ul>
</div>

https://i.sstatic.net/YGp3l.jpg

jquerycss

Answer №1

If you want to implement an input group, make sure to include the input-group-append class.

Check out the official documentation for some useful examples.

<div id="searchComponent-1">

<div class="btn-group">
    <input type="text" name="search" placeholder="Enter text here" class="search form-control" size="3000"
           onkeypress="return event.keyCode!=13"/>
  <div class=input-group-append>
    <span class="searchclear glyphicon glyphicon-remove-circle"></span>
  </div>
</div>

<ul class="list-group result"></ul>

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

Get unique values from a Backbone collection and calculate the sum of those unique values

linked to this inquiry provided with this "example assortment data": [{brand:'audi', amount: '100.16', id:'1234'}, {brand:'audi', amount: '67.84', id:'3456'}, {brand:'bmw', amount: &ap ...

javascriptjquerybackbone.jsunderscore.js

Is it best to stick with a static page size, or

While I typically design my webpages dynamically by determining the screen size and creating divs accordingly, I'm curious about the advantages of using a 'static' sizing approach (such as using pixels). Any insights on this contrasting meth ...

javascripthtmlcss

Activate the use of $_GET for a specific controller

Currently, I am utilizing jquery ajax in conjunction with CI. Unfortunately, when the ajax sends a request, it redirects to http://localhost/ci_2/index.php/path/controller/method?_=1297364139171 The issue arises when CI loads my default controller instea ...

ajaxcodeigniterjqueryget

Is there a way to determine if a container is overflowing at the top?

Currently, I am using Puppeteer to scrape Slack. My goal is to confirm whether I have scrolled to the very top of the channel feed. The issue arises because the channel feed does not actually scroll, making it impossible for me to utilize the method outli ...

javascripthtmlcssoverflow

Graphic selectors: a new take on radio buttons

I've been attempting to make this work, but it's not functioning correctly. Below is the CSS code: .input_hidden { position: absolute; left: -9999px; } .selected { background-color: #000000; } #carte label { display: inline-bl ...

javascripthtmljquerycssradio-button

What can be done to address the narrowing of the left div element as the right div's child elements grow in size?

Utilizing the power of flexbox, I have organized the UI into left and right panels. The child elements within the right panel are stacked vertically by utilizing the white-space: nowrap; CSS property. However, there seems to be an issue where increasing t ...

htmlcssuser-interfaceflexbox

Is there a way to replace a text box with a <label>, <div>, or <span> using jQuery?

Currently, I am working on "single sourcing" a form page that can switch between edit mode and view mode. Rather than utilizing the ASP.Net FormView or DetailsView controls, I am exploring alternative methods. One of the challenges I encountered is that t ...

asp.netjavascriptjqueryhtml

The HTML navbar seems to have a mind of its own, disappearing and shifting around unpredictably as I zoom in or resize

WHEN DISPLAYING THIS CODE, IT IS ADVISED TO VIEW IN FULL PAGE MODE This code includes navigation, header, and styling elements. However, when the browser is zoomed in or out, the navbar tends to move around and eventually disappears off the screen if wind ...

htmlcsswebnavigation

Exploring the method to reveal the password hidden field in MVC by utilizing the Html helper

@Html.Password("password", null, new { @class = "form-control frmField", placeholder = "Password" }) I want to incorporate a button that when clicked will make the password visible. I know this can be achieved using jQuery or Javascript, but I am unsure h ...

javascriptc#jqueryasp.net-mvcasp.net-mvc-4

An issue arises when attempting to remove or add attributes to the select box

In an attempt to change the 'disabled' and 'selected' properties, I am trying to set them to false and then apply the 'selected' and 'disabled' properties to the first option of a select box. Below is the code snippe ...

javascriptjquery

Tips on choosing the initial N website elements that match a specific CSS selector using Python Selenium

Currently, I am utilizing phantomJS in a python/selenium configuration to scrape the screen. My main objective is to extract the first N elements that match a specified CSS selector. An issue I am encountering is that there are significantly more matching ...

pythoncssseleniumscreen-scraping

Table-cell display for spanning columns

Can elements be extended across columns by using the display: table-cell property similar to how <td> is stretched in a table with colspan="100%"? ...

htmlcss

Execute the function if the element has a specific class; otherwise, execute a different function

Currently, I am working on a page where I need to make an element draggable. Upon clicking on the element, I add the 'active' class which expands the div along with the image inside it. Initially, the div is structured as... <div class="wor ...

javascriptjquerycsshtml

Move the absolutely positioned div on either side of the parent element to create a dynamic animation

I am working with a structure that looks like this: .sectors-column-right { float: right; width: 800px; height: 796px; position: relative; } .sectors-modal { background: #fff; width: 764px; height: 500px; position: absolute; top: 58px; ...

jqueryhtmlcss

Integrate spaces into HTML list items

Trying to include a specific number of spaces within a list string, such as: <li>Going (25 -going.length spaces added) to New York</li> <li>Departing (25 - departing.length spaces added) to Boston</li> These lines of HTM ...

javascripthtmlcss

What is the process for verifying the current row order in a sortable table?

I've been tackling a project where I need to create a "sortable" list of items arranged vertically. However, I've encountered an issue that's stumped me. Each row has its own unique id. How can I verify the new order and save it to the datab ...

jqueryjquery-ui-sortable

Tips for enhancing the appearance of a dir-paginate

As a newcomer to AngularJS, I'm interested in learning how to apply styling to a pagination box. Below is the code for displaying a rectangular box view: ` <dir-pagination-controls max- size = "10" direction-links = "true" ...

cssangularjs

Continuously spinning loading icon appears when submission button is triggered

We are currently experiencing some issues with our mobile forms. Our users utilize a mobile form to submit contact requests, but the problem arises when they hit 'submit' - the loading icon continues to spin even after the form has been successf ...

javascriptjqueryhtmlajaxforms

PHP loop to change the color of the initial line

I have a challenge where I am trying to read the content of a txt file using PHP and display it on a webpage. Everything is working smoothly in terms of loading and displaying the content. However, my goal is to have each word displayed in a different colo ...

phphtmlcss

Create dynamic div animations triggered by changes in size of another div

Struggling to get this animation to function correctly. I have a vertical scrolling page with various sized div elements that change based on the content. The problem is that when these size changes occur, the other elements are moving abruptly. I want to ...

javascriptjqueryhtmlcssangularjs