Home » Android » html – select dropdown not active on Android browser

html – select dropdown not active on Android browser

Posted by: admin June 15, 2020 Leave a comment

Questions:

I have a problem where a drop-down select box does not drop-down (it’s essentially inactive) when viewed on an Android mobile device. It works fine on desktop browsers as well as ios browser – bringing up a picker wheel on ios and a dropdown select list from the desktop.

Sample code is;

<select id = "log_or_norm" autofocus>
<option value="1">Lognormal</option>
<option value="2">Normal</option>
</select>

I tried the suggestion found at;
http://youngliferamblings.wordpress.com/2011/08/09/select-dropdown-in-android-webview/

which was

The select tag just doesn’t work sometimes in Android, especially in an app using webview. This drove me nuts for a long long time. The main fix I found, even if your select is buried deep in divs and rows and what ever, is this css:

select {
visibility: visible;
-webkit-appearance: menulist-text;
}

The -webkit-appearance might be the only one actually needed and setting it to ‘listbox’ works too.

That’s all. This deserved its own post.

Without luck….

Am hoping that one of the gurus here can provide an elegant solution that will avoid me having to go down the route of making discrete buttons for each option. I’m not fussed as to whether the Android experience gets a nice picker wheel or not, but need to be able to allow Android users to select an option.

Thanking you in advance

How to&Answers:

Try

getDriver().createElement(By.id("your locator"));
getDriver().createElement(By.id("your locator")).sendKeys("option Name you want to give");

Answer:

var divCreated = false;
$(document).ready(function () {
        var value = "";
        $("select").each(function (i) {
                $(this).click(function () {
                        //alert(($(this).is(":focus")));
                        if (!($(this).is(":focus"))) {
                            if (!divCreated) {
                                $("body").append('<div class="for_select"></div>');
                                divCreated = true;
                            }
                            $(this).clone().appendTo(".for_select");
                            open($(this));
                        }
                    });
            });

        function open(obj) {
            var pos = $(obj).offset();
            $(".for_select select").css("position", "absolute");
            $(".for_select select").css("zIndex", "9999999999999");
            var toAdd = $(obj).innerHeight();
            $(".for_select select").offset({
                    top: pos.top + toAdd,
                    left: pos.left
                });
            $(".for_select select").attr("size", ($(obj).children("option").length > 10 ? 10 : $(obj).children("option").length));
            $(".for_select select").change(function () {
                    value = $(".for_select select").val();
                    $(obj).val(value);

                    $(obj).children("option").each(function () {
                            if ($(this).text() == value)
                                $(this).attr("selected", "selected");
                            else if ($(this).attr("selected")) {
                                $(this).removeAttr("selected");
                            }
                        });
                    var parentHeight = $(obj).parent().innerHeight();
                    $(obj).parent().css("height", parentHeight + "px");
                    $(obj).parent().css("position", "relative");
                    $(obj).css("position", "absolute");
                    $(obj).css("left", "0px");
                    var prevElementsHeight = 0;
                    var isSelect = false;
                    $(obj).parent().children("*").each(function () {
                            if ($(this) == $(obj))
                                isSelect = true;
                            if (!isSelect)
                                prevElementsHeight += $(this).innerHeight();
                        });
                    $(obj).css("top", (prevElementsHeight / 2) + "px");
                    $(obj).css("zIndex", "9999");

                    close($(".for_select select"));
                });
        }

        function close(obj) {
            $(obj).css("position", "static");
            $(obj).attr("size", "1");
            $(".for_select").empty();
        }
    });

Answer:

The solution came rather simple after I battled this for days.

Try debugging by bringing out the select from nested divs until you find the problematic div.

In my case, the problem was that I wrapped all the data-role=”page” divs in a parent div (for loading sake on low-end devices). For some reason, < Android 2.3 has a problem with that.