2

I have an input text as

 <div class="slds">
    <div class="slds-form">
        <div class="slds-form-element " >
            <ui:inputText aura:id="textSearch" class="slds-input searchInputText searchclass" value="{!v.keyToSearch}" updateOn="keyup" keyup="{!c.searchKeyChange}" 
                          placeholder="Type Name Here">
            </ui:inputText>
        </div></div></div>

.THIS .searchclass {
background-image: url(/resource/testSearchImage);
background-repeat: no-repeat;
text-indent: 20px;
background-size: 27px;
background-position: 98%;
border-radius: 155.25rem;
border: solid #137FC3 1px;}

.THIS .searchInputText {
border-radius: 155.25rem;
border: solid #137FC3 1px;
color :#9B9B9B;
margin-left : -3rem;}

When testing on iPhone 6 every time I click into the input bar the screen zooms in slightly, and causes for a bad UX.

How could i prevent zooming in of input text?

1 Answer 1

0

I had the same issue on SF mobile for iPhone. The fix is to limit the viewport maximum scale to 1.0. Add the following code to your init function and this should fix your issue:

//add viewport meta tag var meta = document.createElement("meta"); meta.setAttribute("name", "viewport"); meta.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1"); document.getElementsByTagName('head')[0].appendChild(meta);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.