Chrome-exclusive: Dealing with Overflow in Twitter Bootstrap Form Inputs

I've encountered a strange issue where datetime-local inputs exceed their boundaries on Chrome (tested on Chrome 35 x64 for Linux), but not on Firefox (29.0). Here's a screenshot demonstrating the problem in Chrome:

chrome screenshot

And here's how it appears in Firefox:

firefox screenshot

Here is the relevant HTML code snippet:

<div class="container-fluid">
    <div class="row">
        <div id="filter-panel" class="col-md-3">
            <ul class="list-group">
                 <!-- Filter by time -->
                     <li class="list-group-item">
                         <h4>Filter by Time</h4>
                         <div class="input-group">
                             <span class="input-group-addon">Oldest</span>
                             <input type="datetime-local" class="form-control" id="log-filter-early-time">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">Newest</span>
                            <input type="datetime-local" class="form-control" id="log-filter-late-time">
                        </div>
                    </li>
                    <!-- more li elements -->

No additional CSS styling except for Twitter Bootstrap has been applied. I am using the latest version of Bootstrap that was downloaded just a few days ago.

How can I ensure that the input fields stay within their respective divs? While I want them to occupy the entire width, I do not want them to extend beyond it. Additionally, is there a way to make the spans with .input-group-addon be the same width without assigning fixed pixel values? Attempting to set their width as a percentage did not yield any results.

javascriptcsshtmltwitter-bootstrapforms

Answer №1

datetime is no longer supported in Firefox, but using datetime-local seems to work fine.

For more information on this topic, check out this discussion.

In Chrome, the datetime-local input, which can be seen as supported here, may appear broken due to its minimum width requirement within a container. To make it work properly, ensure there is enough space in the container for the datetime-local input.

Additional comparison details can be found at

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

Direction of hover effect (crossfade image)

My goal is to create a hover effect that involves crossfading images. The setup includes two images: img-2 and img-1, along with text overlayed on top, creating layers as follows: [img2]>[img1]>[text]. When hovering over the text layer or the front i ...

jqueryhtmlcssimagehover

Error message in Typescript: "Property cannot be assigned to because it is immutable, despite not being designated as read-only"

Here is the code snippet I am working with: type SetupProps = { defaults: string; } export class Setup extends React.Component<SetupProps, SetupState> { constructor(props: any) { super(props); this.props.defaults = "Whatever ...

javascriptreactjstypescriptreadonly

Replacing HTML elements with PHP's str_replace function

Looking for help with code: $newphrase = str_replace('href="/Css/IE6.css"', 'href="http://www.company.com/pgrddedirect/iefix.css"', 'href="/Css/IE6.css"'); I am trying to use PHP's DOM to search an HTML file and modify ...

phphtml

Is there a way to retrieve all values in the pathname from a URL after the initial slash

Extracting pathname pathname: "/kids/dlya-malyshey/platya-i-yubki" By using the substr function, I will remove the initial slash location.pathname.substr(1,); Now, the result is kids/dlya-malyshey/platya-i-yubki The challenge is to extract all ...

javascriptreactjstypescript

Managing callback functions within an Angular 1.5 component

I am facing a challenge with handling callbacks in my Angular application. My goal is to load an image, convert it to base64 - which I have successfully achieved. However, I need to access the converted image data outside of the filesSelect.onchange; func ...

javascripthtmlangularjscallbackpromise

Is it acceptable to include the bundled main.js file in the gitignore for a HUGO project?

Is it possible to exclude the bundled main.js file from a HUGO project by adding it to .gitignore? ...

javascripthugo

Pass data dynamically to router in ExpressJS

Within my app.js file, there are several variables defined: var user = "max"; Additionally, there is a route function set up like so: app.post('/register', user.postRegister); In the /routes/user.js file, there is a module function structured ...

javascriptnode.jsexpress

Are you in search of an opening <html> tag for your project?

When I use Initializer to quickly generate HTML5 + Boostrap boilerplates, I noticed that the HTML document it creates does not include an opening <html> tag. This got me curious. Here is the beginning portion of the code generated by Initializr: &l ...

htmltwitter-bootstrapinitializr

Node.js: Calculating the number of requests processed per second in the http.get()

In my node.js project, I am creating a simple application for sending HTTP requests. var http = require('http'); var options = { host: 'www.example.com', port: 80, path: '/index.html' }; for(var i = 0; i < 500; i++ ...

javascriptnode.js

Why are static files failing to load on my live Django server when they work fine locally?

My Django website, running version 1.11.29, is failing to load the CSS and JS scripts from the static folder on the live server. Strangely, everything loads properly when I run it locally. Any suggestions? The path to the CSS file appears to be correct, b ...

pythoncssdjangodjango-viewsdjango-templates

What steps can I take to prevent my JavaScript code from interfering with my pre-established CSS styles?

I'm currently designing a mini-email platform that serves as a prototype rather than a fully functional application. The HTML file contains placeholder emails that have been styled to appear presentable. I've implemented an input bar and used Jav ...

javascripthtmlcss

"Using jQuery to append a new div after the last div that matches a specified class on

I am looking to dynamically add a new div element at the end of the last match on click. <form id="form"> <div class="border item-block"> <p><b>Color :</b> silver </p> <input type= ...

jqueryhtmlcss

"Selecting options from a range - Bootstrap multiple

Currently, I am in the process of implementing a multiple-choice tick box for PHP. The code I have so far is as follows: <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="inp ...

phpcsstwitter-bootstrap

The content of my menu is concealed within a DIV. It may remain hidden or malfunction

I am in the process of creating master pages. In one of the master pages, I have implemented a dropdown menu using jQuery and CSS. While it works perfectly fine on some pages, it seems to be hidden on others that contain a div element. This is because the ...

jqueryhtmlcss

The div with a 'inline-block' display and maximum width appears to be wider than needed after a line break

The red div labeled as inline-block-1 in the jsFiddle takes up more space than needed for the text. Is there a way to eliminate the extra space, making it resemble the green inline-block-2 without removing the max-width and avoiding hard-coding width? Feel ...

jqueryhtmlcss

Safari automatically zooming in on static webpages

Whenever I open my static HTML webpage on Safari, the browser automatically zooms in, causing a horizontal scrollbar for my users. This issue doesn't occur on any other browser or device. I have made sure that all text on the site is 16px or larger an ...

htmlcssiossafari

Unfortunately, IE8 does not support binding with underscores

In my code, I am utilizing _.bind from underscore.js but unfortunately, it is not functioning properly in IE8/9. I have come across a workaround on MDN (MDN Polyfill), however, I am uncertain if this can be implemented with the underscore library. I am al ...

javascriptjqueryinternet-explorer-8underscore.js

WebStorm failing to identify Node.js functions

I recently began my journey in learning node.js and I'm currently utilizing WebStorm 11 as my preferred IDE. However, I've encountered an issue where WebStorm does not seem to recognize the writeHead method: var http = require("http"); http.cre ...

javascriptnode.jswebstorm

What is the correct way to utilize negative margins effectively?

Welcome to my website. I'm currently trying to make the black div break out of its parent div and stretch across the entire width of the browser. My approach involves using negative margins, like this: .aboutTop { background-color: black; w ...

htmlcss

Struggling to make basic PHP code function properly: a straightforward elseif statement to switch images at specified intervals

The issue I'm facing seems to revolve around my PHP code. I am currently hosted on GoDaddy and have set up a basic password protection using an .htaccess file for a client's website. However, my PHP code is not functioning as expected. I am new t ...

phphtmlapache.htaccess