Generate a pair of rows using input-prepend

I am attempting to place two buttons on either side of the search field, so I implemented the following code:

<div id="fixtures-filter">
  <div class="input-group-btn">
    <div class="input-group-prepend"><button type="button" class="btn btn-light" aria-expanded="false" id="countries-btn">Filters</button></div>
    <div class="app-search">
      <div class="input-group"><input type="text" class="form-control" placeholder="Search..."><span class="mdi mdi-magnify"></span>
        <div class="input-group-append"><button type="button" class="btn btn-light" data-toggle="modal" data-target="#fixtures-filter-modal">Search</button> </div>
      </div>
    </div>
  </div>
</div>

the output appears quite unusual:

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

Here is a JSFIDDLE link.

htmlcssbootstrap-4

Answer №1

Utilize the append and prepend methods to customize the appearance of the search icon within the input field by adjusting the borders accordingly.

   <div class="input-group">
              <span class="input-group-prepend">
                    <button class="btn btn-primary" type="button">
                        Filters
                    </button>
              </span>
              <span class="input-group-prepend">
                    <div class="input-group-text bg-transparent border-right-0"><i class="fa fa-search"></i></div>
              </span>
              <input class="form-control py-2 border-left-0 border" type="search" value="..." id="example-search-input">
              <span class="input-group-append">
                   <button class="btn btn-outline-secondary border-left-0 border" type="button">
                       Search
                   </button>
              </span>
   </div>

Answer №2

To align the filter on the same line, simply nest it within the parent div containing the other input elements:

<div id="fixtures-filter">
  <div class="input-group-btn">
    <div class="app-search">
      <div class="input-group">
        <div class="input-group-prepend"><button type="button" class="btn btn-primary" aria-expanded="false" id="countries-btn"><span class="mdi mdi-magnify"></span></button></div>
        <input type="text" class="form-control padleft" placeholder="Search...">
        <span class="mdi mdi-magnify search-mg"></span>
        <div class="input-group-append">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fixtures-filter-modal">Search</button>
        </div>
      </div>
    </div>
  </div>
</div>

Custom CSS styling to display the magnifying glass icon inside the search input field:

#fixtures-filter {
  position: relative;
}
span.search-mg {
    position: absolute;
    z-index: 10;
    font-size: 20px;
    line-height: 38px;
    left: 45px;
}

.padleft {
  padding-left: 30px;
}

View the example on fiddle: http://jsfiddle.net/5xkbn3o0/

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

What could be causing my inability to accurately guess people's ages?

My latest project involves developing a game where players have to guess names from images. Each game consists of 10 rounds, followed by a bonus round where participants must wager their points on guessing the age of the person in the image within a 2-year ...

javascripthtmlcss

Content within a Row of a Data Table

Hello! I am just starting to learn JavaScript and jQuery. Can you help me with an issue I am experiencing? Basically, I have a table and I need to identify which tr contains a td with the text "Weekly", "Daily", or "Monthly". Once I locate that specific t ...

javascriptjqueryhtmlcss

Pinterest sharing feature is currently experiencing technical difficulties

I recently added a Pin It share button to pin my images in posts. Check out the URL. <!--Pin It--> <a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>" class="pinit" title="Share this post on Pinterest!" t ...

phphtmlwordpressshare

Trouble with using .className for form validation

The .className is not applying the formValidation class on getWeight.length < 1 and getHeight.length < 1. I am stuck trying to figure out why this is happening after reviewing the code extensively. Any thoughts on what could be causing this issue? Y ...

javascripthtmlcss

Hover over the drop-down menu to enable tab on hover mode

Is it possible to make the tab switch to hover mode when I rollover the drop down sub-menu without using JavaScript, and only using CSS? <li id="anchor" class="title dropdown"><a href="#">Main Tab</a> <div class="co ...

htmlcss

Background image in full view

Can anyone help me create a full background on my page? I'm not sure if there's an issue with my code. https://i.sstatic.net/vdOVs.png This is my code: return ( <div className="bg welcome container text-center" style={{ ...

htmlcssreactjs

What could be the reason for the sudden malfunction of the .tabs li:hover property on my

I'm having trouble with the :hover effect not working on my .tabs li element. I've tried commenting out my jQuery script, but it still won't apply. Can anyone help me figure out why? Here's a JSFiddle link for reference: https://jsfidd ...

htmlcsshover

How to send PHP email using HTML form

After attempting to find an answer to my inquiry here, I am now starting a new thread. Just a brief explanation: I have a Contact Form with 180 input fields and calculations for each field. I wish to send all the fields along with the calculated values v ...

phphtmlemail

I'm having trouble with the live sass compiler plugin in vs code - it's not syncing up with my css file properly

click here for image description I am facing an issue where my CSS file is not translating the codes in my SCSS file properly and adding unwanted comment lines. If anyone has insights on why this might be happening, I would greatly appreciate it. ...

javascripthtmlcssvisual-studio-codesass

Altering Image Order Across Various Slides

I have customized a parallax website template that is divided into various sections and slides. I want to incorporate a fixed image sequence on each slide that animates based on the scroll position. With 91 images in the animation sequence, it moves quickl ...

javascriptjqueryhtmlcss

How to use AngularJS to collapse various panels with unique content

Hey everyone, I'm working on developing a collapsible panel using Angular. The panel should consist of a header and body to display the content. The desired behavior is that when a button is clicked, the content collapses down, and clicking the same b ...

javascriptjqueryhtmlangularjscss

How can I enable the "Open in a new tab" functionality while utilizing ng-click?

I've encountered an issue with my HTML table where each row is supposed to link to a different page, providing more detailed information. However, because I am using angularjs and utilizing ng-click on the rows, I am unable to right-click and select & ...

htmlangularjsangularjs-ng-click

Is there a way to eliminate overflow on a section of my CSS page without sacrificing the 100vh height?

My professor requested a section in my project to have its height adjusted to the viewport, however this has created a large gap between that section and the rest of my content. How can I remove the overflow and close the gap? <main> <sect ...

htmlcss

JavaScript error occurring when trying to validate Ajax response

I am attempting to create a report using a dynamically generated form. The form loads successfully through XMLHttpRequest, but the validation for the form fields does not seem to be working. I have experimented with using eval() and found that it only work ...

phpjavascripthtmlajax

Rotate the circular border in a clockwise direction when clicked

I have successfully designed a heart icon using SVG that can be filled with color upon clicking. Now, I am looking to add an outer circle animation that rotates clockwise around the heart as it is being created. Currently, the circle only spins in the code ...

javascriptcss

Tips for keeping the scroll position of a bootstrap table when reloading the page

Displayed below is a bootstrap table with specific features. <div class="row"> <table id="question-selection" class="table table-sm table-hover table-wrapper"> <tbody> {% for placer in chapter_questions %} ...

htmlajaxbootstrap-4bootstrap-table

Why is the size not showing when I use driver.find_elements_by_class_name('radio')?

Whenever I attempt to scrape this particular link https://hbx.com/brands/reebok/club-c-85-1 When I make the following calls: driver.find_elements_by_class_name('radio') or driver.find_elements_by_class_name('hidden-xs') or driver.fi ...

htmlpython-3.xseleniumweb-scraping

In Chrome, CSS automatic hyphens are displayed as question mark symbols

On my website, I have implemented automatic hyphenation using CSS: article > p, article > li { -o-hyphens: auto; -o-hyphenate-limit-before: 3; -o-hyphenate-limit-after: 3; -o-hyphenate-limit-chars: 6 3 3; -o-hyphenate-limit-lines: 2; -o-h ...

htmlcssreactjs

Enhance your jQuery datepicker by incorporating classes

I have customized the layout of tables on my webpage using CSS. TABLE:not(.base) { border-spacing: 0; border-style: none; border-collapse: collapse; } TABLE:not(.base) > * > TR > * { border: 0.2rem solid #88F; padding: 0 0.37 ...

cssjquery-ui

Tips for including a permanent button at the bottom of a material ui dialog box

I want to implement a dialog popup in my react js application. When the user clicks on a button, the dialog should open up. Inside the dialog, there is a form with input fields. After the user fills out all the inputs, they can submit the information by cl ...

javascriptcssreactjsmaterial-uidialog