Strake Strake - 5 months ago 17
HTML Question

Eternicode Bootstrap datepicker selecting input behind on touch Android Webkit< 534

On the stock Android browser, User Agent Mozilla/5.0 (Linux; U; Android 2.3.4; en-gb; imx53_nitrogen Build/R10.3.2_3) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1, Bootstrap popover 'touches' will be bypassed to the enabled input element behind the popover. I fixed this by generating the generic Bootstrap popover relative to the trigger element so that no elements could be behind the popover. However, the eternicode datepicker remains an issue as by default the datepicker is floated to the element thus overlapping inputs and causing the selection-behind issue.

Ex. When August is 'touched' it will select the input highlighted in blue behind the popover

Ex. When August is 'touched' it will select the input highlighted in blue behind the popover

Any ideas on how to fix this behavior?

Answer

Workaround

Extended the datepicker javascript to inject the datepicker relative to the source element. This will push surrounding elements away from the datepicker eliminating the selection issue

Javascript Snippets

 if (this.element.hasClass('datepicker-relative')) { //relative datepicker
                this.isRelative = true;
            }

Build

if (this.isInline) {
        this.picker.addClass('datepicker-inline').appendTo(this.element);
    } else if (this.isRelative) {
        this.picker.addClass('datepicker-relative datepicker-dropdown dropdown-menu').appendTo(this.element.parent());
    } else {
        this.picker.addClass('datepicker-dropdown dropdown-menu');
    }

CSS

.datepicker-relative{
position: relative;
top: 0;left: 0;right: 0;bottom: 0;
font-size: 14px;}