asked on

control font size of google autocomplete results

I am making a mobile web app, and I have made the buttons and fonts very large to be good for viewing on a mobile phone. I am using google's autocomplete on an address input field and an html5 datalist. It works, but the results come back too small to be read. How can I change the size of the results? Here's my code

function getGoogleAddressesNew() {
    getAddressesNew();
    var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
    var places = $("#addresses").load(autocomplete);
    $("#addresses").append(places);
}

Open in new window

<div id="newOrder">
            <div>PHONE</div>
            <div><input id="phone" type="tel"/></div>
            <div>AMOUNT</div>
            <div><input id="amount" type="number" step="any" /></div>
            <div>ADDRESS</div>
            <div>
                <input id="address" type="text" style="width: 100%" list="addresses" onkeydown="getGoogleAddressesNew();" onfocus="getAddressesNew();" />
                <datalist id="addresses" style="font-size:48px"></datalist>
            </div>
            <div class="submitButtons">
                <div id="addNew" class="button floatLeft" onclick="addItem(); hideNewOrder();">ADD</div>
                <div id="addCancel" class="button" onclick="hideNewOrder();">CANCEL</div>
            </div>
        </div>

Open in new window

ASKER CERTIFIED SOLUTION

Rainer Jeschor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Arnold Layne

ASKER

Thank you. This is correct. However, small note, when you style this, only the new letters as they are added to the results are the right size. The already matched ones don't. It turns out that pac-item has a span for the display inside of it, so you need to style that for proper results, at least for the text.
.pac-item span {}.
Then it works great

Thanks again