How can I align 2 buttons and a search bar on a single line so that they fully occupy the space?

Is there a more effective way to arrange 2 buttons and a search bar together on the same line so that they occupy the full width?

<div class="panel-heading">
  <div style="float:left;vertical-align: center;">
    <a type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-erase"></span><b> Search</b>
    </a>
  </div>
  <div style="float:right;">
    <a type="button" class="btn btn-warning">
      <span class="glyphicon glyphicon-erase"></span><b> Clear</b>
    </a>
  </div>
  <div style="overflow: hidden;padding: 1em;">
    <input type="text" value="Enter your search here..." ng-model="searchText" style="width: 100%;"></input>
  </div>
</div>

htmlcss

Answer №1

Your method was correct, the issue with your search bar dropping to the next line is due to the 1em padding you applied. Simply change it to padding: 0em 1em; and everything should display as expected. You can view an example at this link https://jsfiddle.net/osha90/z8erbr6h/

<div class="panel-heading">
<div style="float:left;vertical-align: center;">
<a type="button" class="btn btn-info">
  <span class="glyphicon glyphicon-erase"></span><b> Search</b>
</a>
</div>
<div style="float:right;">
<a type="button" class="btn btn-warning">
  <span class="glyphicon glyphicon-erase"></span><b> Clear</b>
</a>
</div>
<div style="overflow: hidden;padding:0em 1em;">
<input type="text" value="Enter your search here..." ng-model="searchText" style="width: 100%;"></input>
</div>
</div>

Answer №2

If your goal is to accommodate modern browsers, then this is one of the main reasons why flexbox was created: 

.panel-heading {
  display: -webkit-flex;
  display: flex;
}
.panel-heading > div {
  /* Added for visibility purposes only: */
  border: 1px solid;
  padding: 0.5em
}
.panel-heading .stretchy {
  flex-grow: 1;
  -webkit-flex-grow: 1;
}
.panel-heading .stretchy input {
  width: 100%
}
<br><br><br>
<div class="panel-heading">
  <div>
    <a type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-erase"></span><b> Search</b>
    </a>
  </div>
  <div class="stretchy">
    <input type="text" value="Enter your search here..." ng-model="searchText"></input>
  </div>
  <div>
    <a type="button" class="btn btn-warning">
      <span class="glyphicon glyphicon-erase"></span><b> Clear</b>
    </a>
  </div>
</div>

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

HTML5: Caption for Images: Movement of Image to Following Row

I'm currently working on designing an image gallery and I've encountered an issue with displaying captions below the images. Here's the code I'm using: <div> <figure> <img src="sample-image.png" /> <figcaption> ...

htmlcss

Combining numerous base64 decoded PDF files into a single PDF document with the help of ReactJS

I have a scenario where I receive multiple responses in the form of base64 encoded PDFs, which I need to decode and merge into one PDF file. Below is the code snippet for reference: var pdf_base1 = "data:application/pdf;base64,JVBERi0xLjQKJfbk/N8KMSAwIG9 ...

javascripthtmlreactjspdfbase64

The items are misaligned in a horizontal position

The 4 divs are styled with a width of 23% and displayed using inline-block. They have a fixed height of 220px and no margin applied. However, the issue arises as they are not aligning horizontally Despite attempting to adjust the height and width paramete ...

htmlcss

Using jQuery for slide shows in Ruby on Rails framework

I'm attempting to create a slideshow using jQuery and have the images stored in an array. However, I'm struggling with the implementation of the slideshow functionality. I've checked out 'http://jquery.malsup.com/cycle/' for guidan ...

jquerycssruby-on-railsajax

I am experiencing difficulties with my custom font not functioning properly

I've experimented with the following code: @font-face { font-family: Jua; src: url('/fonts/jua.ttf'); } @font-face { font-family: Jua; src: url('..../fonts/jua.ttf'); } @font-face { font-family: Jua; src: url('.../fonts/jua.t ...

cssfonts

Protect database entries from cross-site scripting attacks

I have a project in progress where I am developing an application that extracts text from tweets, saves it to the database, and then presents it on the browser. I am currently concerned about potential security risks if the text contains PHP or HTML tags. ...

javascriptphphtmlmysqlxss

Struggling to correct alignment issues with buttons within a container using Bootstrap 5

I'm struggling with a piece of html code where everything looks good except for the placement of the button. It seems to be too far away from the container. Here's the code snippet: <div class="container-fluid mt-1 d-flex align-items-cent ...

htmlbootstrap-5

"Ensure div remains at the bottom of the page even while

In order to implement a feature where the menu sticks to the top when scrolling down, you can use the following JS code. You can view a live example of this functionality on this Plunker by widening the preview window to see the columns side by side. wi ...

javascriptjqueryhtmlcss

Incorporating Image Caching Optimizations in CSS

My current dilemma I currently implement Cache Busting for my CSS files like this: echo "&lt;link href='stylesheet.css?" . filemtime('stylesheet.css') . "' />" My objective Now I want to achieve a similar approach for th ...

phpcsscache-controlfilemtime

Notifications for AngularJS tabs

I need help finding a method to incorporate "tab notification" using AngularJS, in order to show that there are important alerts that require attention. For example: (1) (3) TAB_ONE TAB_TWO TAB_THREE Could you provide any recom ...

javascripthtmlcssangularjs

Are Django form widgets like datepicker and tabindex being snubbed?

I have been working on creating a stylish form and managed to find some interesting CSS to enhance it. The form is looking good, however, a couple of fields are not displaying correctly; particularly one that is associated with a choice field as the model ...

jquerycssdjangodjango-forms

Text overlay on Material UI Card

I am currently using the Material UI Card and CardMedia components in my application, but I am having trouble with overlaying text on top of the image. Below is a simplified version of what I have been attempting: <Card> <CardMedia image={this. ...

cssreactjsoverlaymaterial-ui

Transforming images with Imagick

I've been trying to generate thumbnails from PDF uploads using Imagick. I have a script that is supposed to handle this task, but unfortunately, it only uploads the file without creating a thumbnail. I know some of you may find this basic, but PHP is ...

javascriptphphtmlmysqlimagick

Achieving uniform alignment of multiple field labels in Bootstrap and Simple Form

Here is the current layout of my form: https://i.sstatic.net/2vZjl.jpg You may notice that the labels are not properly aligned. I would like them to appear like this: https://i.sstatic.net/gm39D.jpg Below is the code for all the input fields: <%= si ...

htmlcssruby-on-railstwitter-bootstrapsimple-form

Exploring the world of Django static files, along with the magic of CSS and

Currently running on django 1.3 for production and encountering an issue with using static files in my CSS and JavaScript. Strangely, there are no problems in my HTML code! How can I resolve this dilemma? Unfortunately, the Django documentation does not pr ...

javascriptcssdjangodjango-staticfilesdjango-1.3

The website is displaying a strange mix of text and HTML when viewed on a PC

While browsing the internet for C programs, I stumbled upon this particular program that caught my eye: <span style='color:#004a43'>#</span><span style='color:#004a43'>include</span><span style='color:#8 ...

javascripthtmlcssfirefox

Tips for keeping elements in a table cell from overflowing onto multiple lines

Here is the structure I am working with: <table> <tr> <td> <div> <input type="text" placeholder="Enter your name""/> <input type="button" value ="save"/> </div> </td> ...

htmlresize

Modify the button background image, text, and shape simultaneously when hovered

Can a button's background image or text change, along with its shape, when hovered over using CSS, JS, or both? For example, if I have a button displaying a checkmark symbol ✓ and I want it to transform from a circle shape to a rectangle shape, and ...

javascriptjquerycssbutton

Having trouble connecting to the webserver? Make sure the web server is up and running, and that incoming HTTP requests are not being blocked by a firewall

While working on my Visual Studio 2013 Asp.Net web code using the Local IIS Web server Version 7 (Windows 7 x64) and Framework 4.0, I encountered an error message stating: "Unable to start debugging on the web server. Unable to connect to the webserver. V ...

javascripthtmlasp.netc#-4.0visual-studio-2013

Attempting to squeeze a lengthy word into a small span

Apologies for my poor English. I tried searching for an answer online but couldn't find a solution. Maybe I'm just not able to figure it out myself. All I need is to make those long words fit inside a button. This is how it currently looks. My ...

htmlcss