FetchMyTip: IE 11

Monday, August 21, 2017

date type IE-11 limitation

Working in MVC project and using different browser's, I ran into this issue with the date picker supported natively in Chrome but not in IE.

@Stephen Muecke pointed the reason of the problem:

Refer comparision here. The type="date" attribute is not supported in either IE-11 or FireFox-38 so you're out of luck for the time being.

@section Scripts {
    /* ... */
    <script type="text/javascript">
        /* ... */
        if (!Modernizr.inputtypes.date) {
            $('.datepicker').datepicker();
        }
    });

</script>

Source
https://stackoverflow.com/questions/31099367/datetime-picker-doesnt-appear-in-internet-explorer-and-firefox-with-bootstrap

Wednesday, July 6, 2016

Bootstrap 3 and IE11 clash. Flushing footer to bottom of the page, twitter bootstrap

Problem:

I was having issues with my site in IE 11. Chrome and other browsers were doing fine.
The site navigation bars would not work with the vertical scroll. The behavior was quite ugly. The page would render correctly and the navigation menus would work fine. As soon as the user scrolled the fixed horizontal navigation bar would spread all over the screen. The only way to get the browser to redraw the screen was to resize the window. This is hardly a state I can hand over a solution to a customer.:

Solution:

This was a footer and bootstrap problem. First issue was that the main screen was using a fixed position reference which would not work properly in ie 11.

{
position:fixed;
}

The fixed property forced the footer to stay in place but the navigation bar would bleed into the main work area.

Step 1: Removed the fixed position but then the footer started to move around.

Step 2: The final fix was to use the bootstrap css class,navbar-fixed-bottom, this forced the footer to stay in place.

<div class="navbar-fixed-bottom">
...
</div>