Issue with alignment of Bootstrap inline form field on top and bottom levels

I seem to be encountering an issue highlighted in the image below:

My goal is to have the state dropdown perfectly aligned with the top and bottom edges of the other two controls. Here's the code snippet I've used to create this section of the interface:

<div class="form-group">
                    <label for="txtShipToCity" class="small-text-label"><strong>City St Zip:</strong></label><br />
                    <asp:TextBox ID="txtShipToCity" runat="server" CssClass="form-control-inline input-sm width-100 form-fixer"></asp:TextBox>
                    <asp:DropDownList id="ddlShipToState" runat="server" Font-Size="small" CssClass="form-control-inline input-sm width-50 form-fixer" Height="24px" ></asp:DropDownList>
                    <asp:TextBox ID="txtShipToZip" runat="server" CssClass="form-control-inline input-sm width-50 form-fixer" maxlength="5" ></asp:TextBox>
                </div>

The relevant CSS styles are as follows:

input.form-fixer{
    padding: 1px !important;
    font-size: x-small !important;
    height: 24px !important;
}

.width-50 {
    width: 50px !important;
}

All other CSS classes used are standard Bootstrap 3 styles.

How can I achieve the desired alignment in this scenario?

ADDED: http://jsfiddle.net/mikemahony/2E9Sz/

Answer №1

It appears that the styling of your input controls does not align with Bootstrap standards. The class form-control-inline you are using is not part of bootstrap-3.0 (be mindful not to confuse it with Bootstrap 2.3).

If you adhere to Bootstrap's recommendations, you can avoid encountering such issues.

However, a specific problem lies within this class:

.input-sm
{
  padding: 5px 10px;
}

This rule is defined in the bootstrap.min.css file. By removing this padding, you should achieve the desired outcome. You can override this class in your custom CSS file by setting padding:0.

.input-sm
{
  padding: 0;
}

To see a demonstration, check out this Js Fiddle Demo.

Answer №2

To fix the problem, apply padding: 0px to the element identified by id=ContentPlaceHolder1_ddlShipToState.

The current issue is caused by an excessive padding of 5px.

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

My function invocations seem to be malfunctioning

Originally, I wrote code without using functions to prototype and it worked perfectly fine: $(function() { $(".PortfolioFade img") .mouseover(function() { popup('PORTFOLIO'); var src = $(this).attr("src").rep ...

What is the best way to extract data from a textarea HTML tag and store it in an array before iterating through it?

I have a project in progress where I am developing a webpage that will collect links from users and open each link in a new tab. I am using the <textarea> tag in HTML along with a submit button for link collection. Users are instructed to input only ...

angularjs error: $window.location.href is not defined

I am currently working on developing an application using ASP.NET MVC6, AngularJS, and Bootstrap. One of the challenges I am facing is reloading a page after closing a Bootstrap modal. However, when attempting to do so using $window.location.href, I am enc ...

Access an image URL that is saved in a MySQL database

Currently, I am facing a challenge attempting to populate an img tag src attribute with a filename sourced from a mysql database. As of now, I retrieve two images through a single MySQL query (selected randomly). However, in the future, I anticipate needi ...

How can I ensure that my content stays fixed at the bottom of a scrolling div in Material UI React?

I have developed a React JS component using Material UI that includes a chat input feature. However, I am facing an issue where the width of the chat input is always half the screen size on desktop or mobile devices. When I try to change the width to 100%, ...

What is the best way to enhance specific sections of Django content by incorporating <span> tags, while maintaining the original paragraph text format?

I am currently in the process of trying to showcase a paragraph of text (content) from django. However, my aim is to incorporate <span class="modify"> into particular words that match pre-defined words located within a referenceList within the paragr ...

What is the best way to incorporate progress updates into a rendered jade page?

I am currently working on a small express.js application with a form. When the form is submitted, it triggers a python script that takes approximately 5 minutes to run and outputs messages to the console while it is running. At the moment, I am able to cal ...

Counter is effective for the initial post, yet it does not function properly for the subsequent post

Can anyone help with an issue I'm having with my JavaScript counter? It works for the first comment, but not the second one. This problem persists whether I use PHP or JavaScript. Below is the JavaScript code for the counter: var count = (function() ...

Using AngularJS to bind to the 'src' property of an <img> tag

There is a table on my website with numerous rows, and each row contains a preview image that should appear in the top right corner when the mouse hovers over it. I attempted to insert an image tag with AngularJS binding for the URL in the src attribute l ...

Creating a dynamic animation effect on a div with a changing number of child elements

Currently, I am utilizing the nganimate library and have implemented an animation that affects the max-height property of a div. Here is a snippet of my code: CSS .sublist.ng-hide { max-height: 0; } .sublist { max-height: 1300px; overflow: hidden; ...

Is it possible to implement an automatic clicking function on a bootstrap navigation bar similar to a carousel?

I am working on a website with a bootstrap navigation bar similar to the one shown in this image : bootstrap nav <ul class="nav nav-tabs" id="tab_home" role="tablist"> <li class="nav-item" role="pres ...

jQuery problem causes page to scroll when button is clicked

Is there a way to smoothly scroll to the second section of the page when a button is clicked using jQuery? $('.home_scroll_btn a').on('click', function(){ var scrollPosition = $('#intro-home').offset().top; $( ...

Tinymce editor does not display icons as expected

I am attempting to create a custom styled list that is editable with tinymce. The list-items are using Material-Check-Icons as bullet-points, which are added as css-pseudo-elements ::before. This setup works well, but when I integrate tinymce (v5) into the ...

Output PHP Array as JSON for specific content based on conditions

My code features "conditional content" based on the type of the content, as shown below: //--- SQL query to retrieve content --- if(mysqli_num_rows($niceSQL) > 0) { while($something = mysqli_fetch_array($niceSQL)) { $type = $something["typ ...

Combining strings within a string after a specific word with nested Concatenation

In a given string variable "str," I am looking to concatenate another string between "InsertAfterMe" and "InsertBeforeMe". str="This is a string InsertAfterMe InsertBeforeMe" s1="sometext" s2="soMoreText" aList=[1,2,3,4,5] The concatenated string shoul ...

Deactivate weekends when checkbox is marked and reactivate them when unchecked

Hello everyone! I've been experimenting with the code below in an attempt to enable/disable weekends on a datepicker, but it's not working as expected. What I'm aiming for is to disable weekends when a checkbox is checked and enable them whe ...

Ways to prevent mouse selection in an input field without disabling or making it read-only

Imagine this scenario: <input type="text"> The task at hand is to prevent text selection within the <input> field. ...

Rails: Ensure that JSON form fields remain populated in case the form encounters a validation error

I am using a rails simple form to create a product with three fields inside in order to associate it with appropriate categories: <div class="form-group"> <%= f.input :child_category_id, :collection => @categories.order(:name), :l ...

Buttons and links with intricate geometries

I am currently developing a web application using Java/JSF and I am interested in finding out about technologies that would allow me to define intricate shapes as clickable buttons or links. Right now, my only option is to split an image into smaller trans ...

"Getting Started with Respond.js: A Step-by-Step

I've been struggling to find clear instructions on how to properly set up respond.js. Should I just unzip it into the htdocs folder, or do I only need respond.min.js in there? Then, do I simply reference the file like this... <script src="respon ...