CODEWITHSUNDEEP
javascriptcsshtmltwitter-bootstrapforms
zrneely
zrneely

Reputation: 1942

Twitter Bootstrap Form Input Overflow on Chrome Only

I'm having a weird problem where datetime-local inputs overflow their boundaries on Chrome (tested so far on Chrome 35 x64 for Linux), but don't on Firefox (29.0). Here's a screenshot of what happens in Chrome:

chrome screenshot

And here's what it looks like in Firefox:

firefox screenshot

Here's the relevant HTML:

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

There isn't any css except the twitter bootstrap affecting it. I'm using the most recent version (downloaded a few days ago).

How can I make it so that the input fields are constrained in their div? I do want them to take the whole width, but nothing more. Also, is it possible to get the spans with .input-group-addon to be the same width without giving them fixed, pixel-unit-ed values? I tried assigning them the same width as a percent but that didn't have any effect.

Upvotes: 0

Views: 244

Answers (1)

nolawi
nolawi

Reputation: 4649

datetime is no longer supported in firefox when you put datetime-local it seems to work

here is a discussion about it

in chrome the datetime-local which is supported has a min width regardless of the container div so appears to be broken but its not .. if you want the datetime-local input you have to have enough space in the container

http://html5test.com/compare/feature/form-datetime-local-element.html

Upvotes: 1

Related Questions