The placeholder tags in the input box are not aligning correctly with Bootstrap 3.2

Can someone help me figure out how to make the placeholders in my input box for the dates fit properly? I've been trying to adjust the bootstrap code but haven't been successful.

I have attached a screenshot of the issue.

Below is the code snippet showcasing the use of horizontal forms:

<div class="container nopadding">
    <div class="form-group">
        <label class="col-sm-2 control-label" for="txtPISIQueueManufacturer">Manufacturer:</label>
        <div class="col-sm-2">
            <input type="text" class="form-control height-auto" id="txtPISIQueueManufacturer" placeholder="Enter Manufacturer" />
        </div>
        <label class="col-sm-2 control-label" for="ddlPISIQueueRequestType">Request Type:</label>
        <div class="form-group col-sm-3">
            <select class="form-control" id="ddlPISIQueueRequestType">
                <option>Shipping Information</option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
    </div>
    <div class="form-group col-sm-8">
        <label class="control-label col-sm-offset-1">Requested Date:</label>
        <input class="height-auto" id="dtePISIQueueRequestedFromDate" placeholder="From Date" type="text" />
        <span class="label label-default">To:</span>
        <input class="height-auto" id="dtePISIQueueRequestedToDate" placeholder="To Date" type="text" />
    </div>
</div>

Answer №1

The issue you're facing is likely due to the CSS properties set for your input fields such as "text" or "date". You can easily identify any excessive padding or line height by using your browser's inspector tool and inspecting the input fields.

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

Finding the data type based on the button clicked with javascript: A beginner's guide

I am trying to work with a PHP function that generates dynamically created divisions. Each of these divisions contains a different data type and a button. How can I extract the data type of a division when the user clicks on the submit button using JavaScr ...

What causes the difference in CSS border-bottom-width rendering between IE and Chrome?

My ASP:MENU is styled with some CSS properties, such as setting the 'height' and 'line-height' of each element to 15px. This design appears fine in Internet Explorer but seems too cramped in Chrome. Additionally, a 'border-bottom-s ...

Retrieve the value of another ID within a form using the .innerHTML property

I would like to be able to show the value of a text field when the Search button is clicked. Currently, I have the following code on the search button: onclick="document.getElementByid('output').innerHTML = this.value" This code successfully r ...

Why is my Tailwind Grid displaying elements in a horizontal layout?

<div className='grid grid-cols-12 gap-12 mb-8'> <div className='col-span-8'> <div className='box'></div> </div> <div className='col-span-4'> <d ...

How can I make the hover effect only apply to the text and not the entire box?

I'm wondering how I can make the :hover property only affect individual letters in my navigation bar, instead of hovering over the entire box. * { margin: 0px; padding: 0px; } .navigation-bar { height: 3.2em; background: gray; text-align: ...

Looking for assistance with embedding content into an iFrame?

Having trouble writing into an iframe, I can locate the iframe but unable to input anything into it. Every time I attempt to write into the iframe, I encounter the following error. <div id="offer_description_field" class="control-group wysihtml5_type d ...

Identify the Presence of Hover Functionality

For a while now, the trend has been leaning towards feature detection. I am interested in determining whether a visitor's browser supports the :hover pseudo class. With many mobile devices not supporting hovering, I want to adjust my event listeners a ...

Error message in console: AngularJS throws an error saying 'No module found: uiCropper'

Hey there, I'm looking to add an image cropper to my webpage. I came across some code on Codepen, but when I tried using it, the code didn't work and I encountered this error https://i.sstatic.net/h5F4T.png angular.module('app', [&ap ...

Expand the range of input movement using a unique and oversized custom thumb graphic

In my project, I am creating a personalized input range feature by utilizing a 40px x 80px image as the background for the thumb. Typically, the thumb is limited to moving within the length of the track from edge to edge. However, I am aiming for the thu ...

Fresh HTML Division located above the Homescreen and fixed to the top of the webpage

I have successfully implemented a full page video background on the homepage of my website. However, I am facing an issue where the "About" section is stuck at the top of the site and I cannot seem to figure out why. I want the video background to remain f ...

The jQuery ellipsis extension is incompatible with the "max-height" property

Is it possible to use this plugin with the "max-height" css property? Currently, it only works with a specific height defined but not with max-height. Is there a way to make it compatible with max-height as well? (function($) { $.fn.ellipsis = f ...

Searching in Python Django with multiple attributes involvedUsing multiple attributes for

My search form consists of three fields: [Doctor][Specialty][City] Below is the HTML code for the form: <form data-provide="validation" data-disable="true" class="input-glass mt-7" method='POST' action='annuaire/'> ...

Toggling panel and sub-panel controls in AngularJS

In my project, which is a CV builder with front-end editing capabilities, I have multiple panels and sub-panels (DIVs) that I need to show their controls on click in order to perform specific tasks. Currently, my approach for show/hide panels is very basic ...

Content Division with Sticky Footer

I have successfully made my footer stay at the bottom of the page by following this method: Now, I am facing an issue where my #content div has borders on the left and right sides but does not expand to match the height of the #wrapper. Your help in reso ...

The submission of the HTML Form is experiencing difficulties in Internet Explorer 9

Having an issue with my basic HTML form not submitting in IE9, although it works fine in Chrome, FF, and IE10. I've attempted to submit the form in IE9 on Windows 7 and IE10 on Windows 8. In IE10, everything is functional. However, if I switch the b ...

Ways to show error messages from a JSON reply within a DIV element

I am currently working on an AJAX form that allows users to change their passwords. My goal is to display all validation errors within an HTML DIV element. Although the form submission functionality is working well, I am facing an issue with passing the e ...

Discover the position of a dynamic accordion using jQuery

After making an AJAX call, I am able to generate a list of accordions like this: data.items.forEach(function(item,index) { if(item.desciption != "") { $('#accordionList').append( create ...

Executing a JavaScript function within the HTML body and passing a variable as an argument to the function

I recently created the following HTML code: <html> <title> Upload Infected File </title> <body> <header id = "header"> <h1 align="center">Upload Malware File</h1> <p align="center"> Pleas ...

"Encountering an issue with AngularJS where the selected ng-model value is

I'm utilizing plain options for the select tag because I only need to display a few options when they meet a certain condition. In order to perform other operations, I require the value of the selected dropdown in the controller. However, the issue is ...

Storing a div in Javascript/HTML and concealing its descendants for later use

I have a div that I can select var selectedCell = null; $(".selectableBox").on('click', function (event) { selectedCell = $(this); } Later on, I need to hide one of the children inside selectableCell called selectableCe ...