0

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.

Styphon
  • 10,304
  • 9
  • 52
  • 86
zrneely
  • 1,802
  • 3
  • 17
  • 26
  • can you create a jsfiddle with full code? You should probably create a parent div as a wrapper, and use that to control inner divs by percentage. – tremor Jun 03 '14 at 18:17
  • Here it is: http://jsfiddle.net/RdMXV/ – zrneely Jun 03 '14 at 18:23
  • interesting, one thing i see already is the way timestamps are displayed are different between the 2 browsers.. this is interesting, and date/time selector not working for me on firefox – tremor Jun 03 '14 at 18:25
  • Do you mean that the I should use a div around the `.input-group` ones, and give those a width of 100%? – zrneely Jun 03 '14 at 18:28
  • So perhaps it would be better to use a different input type entirely, if this one is so inconsistent across browsers. – zrneely Jun 03 '14 at 18:30
  • It appears that changing from `datetime-local` to `datetime` fixed the issue in chrome. I'm not sure why that fixed it, but it did. – zrneely Jun 03 '14 at 19:30

1 Answers1

1

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

Community
  • 1
  • 1
nolawi
  • 4,439
  • 6
  • 22
  • 45
  • That's unfortunate. I don't really want to do browser detection for something like this. Do you have a suggestion other than more room (I really can't add space to the sidebar, the rest of the content is the whole point of the page)? – zrneely Jun 03 '14 at 20:35