Ways to ensure that both the Search text field and search button are of equal height

I am facing an issue with the layout of my HTML code within my ASP.NET MVC web application. Below is the snippet of code causing the problem:

<form class="customSearch" method="GET" action="@Url.Action("Search", "Home")">

<input  class="searchInput push-up-button" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "@Url.Action("AutoComplete", "Home")" type="text"/><input type="submit" value="Search" class="btn"/>
                            </form>

When rendered, the search button and text field appear on different heights. I need to align them horizontally. How can I achieve this?

Thank you

csshtml

Answer №1

To start, reset all values for both input:

input {
   margin:0;
   padding:0;
   border:0;
}

Next, ensure that the height, line-height, vertical-align, and box-sizing are equal:

input {
  height:30px;
  line-height:30px;
  vertical-align:middle;
  box-sizing:border-box;
}

Once you have set these basic styles, you can customize each input further by adding lateral padding and choosing colors for background and text.

Check out the demo here: http://jsfiddle.net/3TeHT/6/

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

Text will not be moved to a new line

Hello, I am encountering an issue with my messaging system where the messages retrieved from the database are not properly going to a new line in the window. Despite adjusting the width, the messages continue to overlap. Below is the code snippet: This co ...

cssajax

Data from the session is not displayed when a redirect occurs

On the main page, I include the following code: <?php $required = array('post_question'); // Checking if post field is not empty $error = false; foreach($required as $field) { if (empty($_POST[$field])) { $error = true; } } if(isset($_POST[&a ...

phphtmlsql

Toggle the current list item in Jquery to expand to 100% width, while simultaneously shifting any adjacent items on the left and right downwards if present

I am working with a list (ul) that contains multiple items displayed in a tiled format. Each item has a brief introduction and can expand to show more information when clicked on. What I would like to achieve is for the expanded item to take up the entire ...

cssjquery

Animating a child element while still keeping it within its parent's bounds

I have researched extensively for a solution and it seems that using position: relative; should resolve my issue. However, this method does not seem to work in my specific case. I am utilizing JQuery and AnimeJS. My goal is to achieve the Google ripple eff ...

javascriptjqueryhtmlcssanime.js

Crafting a captivating stacked image using just two segments

Recently, I designed my own personal website. To make it visually appealing, I decided to use a background picture as the header and placed my portrait as the avatar. My inspiration for the design was drawn from the sleek interface of Linkedin profiles. Ho ...

htmlcss

Creating if-else conditions in React can be achieved by utilizing the ternary

How can I make an if-else condition dynamic based on a button click? I have tried implementing it but it doesn't seem to work. I attempted to create conditions for different languages. For example, clicking the button labeled "Español" should print ...

htmlreactjs

Inject a list of titles into a pipe and randomize the items

I have a list of recipes on my website, with a "view more" button to redirect users to the full recipes page: <div class="recipes_list"> <ul> <li>Recipe 1</li> <li>Recipe 2</li> <li>Recipe 3</li> ...

htmlrandomhtml-listslistitem

Inquiring about the best method to determine the intersection point between two lines in Draw i.o

Can someone please explain how to find the coordinate point where two lines intersect in draw i.o? I am looking for a Javascript function to solve this issue and get the coordinate of the point only. For example: ...

javascripthtmlcssdraw

seeking a solution to simulate a variety of web browsers

Seeking a solution to preview my website on various browsers including IE7 and above, as well as different versions of Firefox. Although I am new to CSS, I previously tried installing software on my PC to assist with this task, which unfortunately caused ...

htmlcssinternet-explorer

Does anyone have insight on which JavaScript library is being utilized in this context?

While perusing an interesting article, I came across an image that caught my attention. Clicking on it revealed a unique way to view the full size. I am curious if anyone knows which JavaScript library was used for this effect. You can find the article her ...

javascripthtmlimage

`Is it possible to modify the background color of InputAdornment in Material-UI TextField?`

For the first 10% of the text field, one background color is used, while for the remaining 90%, another background color is applied. <TextField className={classes.root} type="text" placeholder="username" var ...

cssreactjsmaterial-uitextfield

What is the best way to use ajax to load a particular div or class from a file?

In my main.html file, there are several divs each with 2 classes. The first is their specific class and the second is a class called menu-item, which determines if an event will be triggered when clicked. For example: <div id="load-here"> </div ...

javascriptjquerycssajaxweb

Reactively created menu using JQuery

Looking to implement a dynamic JQuery menu using React (ES6). Utilizing the JQuery menu examples (https://jqueryui.com/menu/) as a guide, however, those examples only cover static menus. It doesn't clarify how to modify menu items like updating labels ...

javascriptjqueryhtmljsonreactjs

Troubleshooting issue with CSS in Django_tables2

Working with the django_tables2 plugin for the first time has been an interesting experience. I followed the installation and quick start guide provided in their documentation. After pip-installing django-tables2, adding 'django_tables2' to my ...

pythoncssdjango

Achieving the perfect balance: Centering and fitting an image into a div without any loss

As I delve into learning CSS, I keep stumbling upon solutions that are almost there for what should be a simple task. Being at a very basic stage of my learning journey, I am struggling with figuring things out. My current challenge involves placing one i ...

csshtmlcenteringstretching

Tips for Building Common Controller Logic in CakePHP

I am in the process of developing a website where I have set up dynamic content for the footer, which is retrieved from a database. I am looking to create a single controller logic code that can be used across all pages on the site. Any suggestions or gu ...

phphtmlcakephpcontroller

How to utilize CSS variable references across different files in React?

In my React project, I have integrated multiple variables that I would like to be able to access from other CSS files in order to maintain a unified codebase for specific UI configurations such as colors and buttons. However, I am uncertain whether these ...

cssreactjs

AngularJS directive for Ionic Leaflet - Utilizing Service to switch tileLayer from side menu

I am currently experimenting with developing an ionic app for the leaflet-angularjs-directive. Unfortunately, there are not many demos available for me to test out. The specific demo I am using is called ionic-leafletjs-map-demo by calendee on GitHub whic ...

javascripthtmlcssangularjsangular-leaflet-directive

Error encountered when attempting to utilize a variable within an EJS template document

I seem to be encountering some difficulties while attempting to get an EJS template file to recognize a variable that holds the rows from an SQLite3 table query in a related .js file. Whenever I try to access that route by launching the server, I receive a ...

htmlnode.jsexpressejs

How can the HTML email width be adjusted on Outlook 2016?

When I send out HTML emails, I encounter an issue where the content takes up the full width no matter what. I have tried adjusting the width of table, tr, td, div, and body elements, but it still persists. This problem occurs on Outlook 2016 across all W ...

htmlcssemailoutlookoutlook-2016