position the input and span elements side by side

Need help aligning an input and a span element next to each other. The span is currently positioned below the input, but I want it to be on the right side of the input. I am trying to create a search bar using this input and span tag, so they need to be aligned next to each other.

I have placed both elements inside a single division, but they are not positioning correctly.

Not sure if there is a missing CSS property or if there is incorrect CSS in my code.

.modal-body .search-input{
  width:100%
}
#custom-search-input {
  margin:0;
  margin-top: 10px;
  padding: 0;

}

htmlcss

Answer №1

To enhance the design of your search form, add display: flex; to your .search-form

If you're interested in a more contemporary approach to layout challenges, consider exploring the benefits of flexbox by visiting this link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#custom-search-input {
  margin:0;
  margin-top: 10px;
  padding: 0;

}

.form-control{
  border-radius: 0;
}
#custom-search-input .search-query {
  padding-right: 3px;
  padding-right: 4px \9;
  padding-left: 3px;
  padding-left: 4px \9;
  border: 1px solid   #494949 ;
  /* border-right-style: none; */
  margin-bottom: 0;
}

#custom-search-input button {
  background-color:rgb(0,0,0,0.3) ;
  height: calc(1.5em + .75rem + 2px);
  padding: 2px 10px;
  position: relative;
  vertical-align: middle;
}
.ion-android-search{
  font-size: 150%;
}
.btn-danger{
  border:none;
  border-radius: 0;
}
.search-query:focus + button {
  z-index: 3;   
}
 .search-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.search-input{
  flex-grow: 1;
}

.search-form input:focus + .results { display: block }

.search-form .results {
  display: none;
  /* position: absolute; */
  top: 35px;
  left: 0;
  cursor: pointer;
  right: 0;
  z-index: 10;
  padding: 0;
  margin: 0;
  margin-top: 5px;
  border-width: 1px;
  border-style: solid;
  border-color: #cbcfe2 #c8cee7 #c4c7d7;
  border-radius: 3px;
  background-color: #fdfdfd;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
  background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
  background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
  background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
  background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
  background-image: linear-gradient(top, #fdfdfd, #eceef4);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

...

</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

jquery has a strange behavior where the dialog window will cover up the scrollbar when the main

Currently, I am utilizing jQuery dialog to display a dialog window. I have managed to position it at the bottom left corner as desired. However, when the main window contains a scrollbar, the dialog ends up overlapping with the scrollbar instead of alignin ...

javascriptjquerycssjquery-uijquery-ui-dialog

PHP: Establishing SESSION Variables

On Page1.php, there is a variable called "flag" with the value of 1. When clicked, it triggers the JavaScript function named "ajaxreq()" which will display the text "Click me" from an AJAX request originating from page2.php. If you click on the "Click me" ...

phpjavascriptjqueryhtmlajax

Stop Swiper Slide from moving when clicked on

I am currently utilizing Swiper JS and have encountered an issue. In my Swiper slider, each slide contains a button. Whenever I click on the slide or the button itself, the slide becomes the active one, causing the entire slider to move. Is there a way to ...

javascripthtmlvue.jsswiper.js

Steps to align the table to the left with the header

I created a webpage that includes a header and a table at this link Can anyone help me align the left border of the table with the left border of the header image? I'm not sure how to do it. Appreciate any assistance! ...

htmlalignment

The form submission did not yield any results

function calculateCost() { var projectorCost=0,price=0,quantity=0,discountPrice=0,totalCost=0; var modelName=document.getElementById('projectormodel').value; var quantity=document.getElementById('q ...

javascripthtmlcssweb

A guide on dynamically altering text upon hovering over an element using Vue.js

On my website, I have the following HTML code: <div class="greetings"> <img @mouseover="hover='A'" @mouseleave="hover=''" src="a.png" alt="A" /> <img @mouseover="hover='B'" @mouseleave="hover=''" ...

javascripthtmlvue.js

Personalize the color and icon of the checkbox marks in sapui5

I'm trying to customize the color of the tick on a UI5 checkbox. After inspecting the CSS, I noticed that it can be modified using the ::before selector: https://i.sstatic.net/2IMc4.png To target the checkbox, I added a class called .accept and defi ...

csscheckboxsapui5

Guide on how to gather values into a variable from the DOM using jQuery

Trying to make this function: The current issue I'm facing is that when changing a digit (by clicking on a hexagon), I want to save the selected number as the value of a hidden input field next to the digit in the DOM. Any ideas on how to achieve th ...

javascriptjqueryhtmlformsodometer

Jquery function for determining height across multiple browsers

I am currently facing an issue with setting the height of table cells in my project. While everything works smoothly on most browsers, Firefox seems to add borders to the overall height which is causing inconsistency across different browsers. If anyone k ...

javascriptjquerycss

When implementing auto-generated IDs in HTML forms, rely on randomly generated values for increased uniqueness

When developing a form with multiple complex controls built as Backbone views, one wants to ensure that the labels are correctly linked to the input elements. This is typically done using the "for" attribute. However, in cases where the same control needs ...

javascriptjqueryhtmlbackbone.js

Angular ensures that the fixed display element matches the size of its neighboring sibling

I have a unique challenge where I want to fix a div to the bottom of the screen, but its width should always match the content it scrolls past. Visualize the scenario in this image: https://i.sstatic.net/i7eZT.png The issue arises when setting the div&apo ...

htmlcssangularjstypescript

What are some ways to prevent popups from being hidden by CSS?

I encountered a problem with my popup that I created using pure CSS. When I move my mouse to the top or bottom of the window, the popup disappears. However, if my cursor is in the body area, the popup appears as intended. I have not used any JavaScript in ...

htmlcss

Tips for passing variables through onclick to JavaScript file

My task involves querying a database and implementing a filter based on country selection from a map. After writing the JavaScript and PHP code, everything seems to work fine except for one issue - passing a name with an onclick function to initiate the qu ...

phpjqueryhtml

Showcasing Information Using AngularJS from a Json Array

My goal is to present data from a JSON array in a table using the code below. However, all the data is currently being shown in one row instead of each record appearing on separate rows with alternating colors - grey for even rows and white for odd rows. I ...

javascriptcssjsonangularjs

The progress bar is visually enhanced with a border style that doubles as a background color

While experimenting with a jsfiddle to create an animated progress bar, I stumbled upon something peculiar. I had a single CSS rule applied to the progress tag: progress { border:2px solid #ccc; } Prior to adding this CSS rule, the progress bar looke ...

htmlcss

What is the method for displaying an asterisk in a select box option?

Is there a way to append an asterisk after the first option in a select element? Here is my html <select class="form-control textyformcontrol"> <option selected>Service area</option> <option>First Option</option> &l ...

htmlcss

Unable to scroll within a div while utilizing Tailwind CSS framework

Setting up this middle div on a page presents the following situation: The Top Bar should remain sticky and stationary The Middle section should scroll as new content is added or if the user scrolls up or down The Bottom Bar sh ...

csstailwind-css

What factors could potentially cause Internet Explorer to fail in processing conditional comments effectively?

I am currently developing JSP pages with Tomcat and I need to ensure compatibility with IE 7, as requested by the client, along with Firefox and Chrome. Despite including both sets of code in my program, it seems to work perfectly fine for browsers other ...

javascripthtmlinternet-explorerconditional-comments

What is the best way to shift a text element within the footer section?

I have arranged two columns within the container, but I am looking to position the .company and .copyright text at the bottom left of the footer column. The Follow Us heading should be on the right side with the .justify-text below it, followed by social m ...

htmlcsstwitter-bootstrapbootstrap-5

AngularJS 1 - CSS glitch occurs when navigating between tabs

Upon loading my homepage, it appears as follows: https://i.sstatic.net/CTlj1.png Initially, certain rows were filled with a blue background color using ng-class, specifically "row-answered-call" as shown below: <tr ng-repeat="item in list" ng-class=" ...

javascripthtmlcssangularjs