+ Start a Discussion
Florian KatenbrinkFlorian Katenbrink 

Screen jumps to the top when clicking select-box on iPhone (Salesforce1)

Hey everyone,
I am having trouble with a select-box. This problem only occurs on iPhones, not on Android. I am using bootstrap-sf1.
So I have a select-box:
<apex:actionFunction name="filtertime" status="statusfilter" reRender="inadvance" action="{!queryHolidays}">
    <apex:param value="" name="timefilter" assignTo="{!InAdvanceTo}" />
    <apex:param value="true" name="queryinadvance" assignTo="{!QueryDataInAdvance}" />
</apex:actionFunction>

<select id="selectfiltertime" class="form-control" onchange="filtertime(this.options[this.selectedIndex].value);">
    <apex:repeat value="{!InAdvanceToValues}" var="fil">
	<option value="{!fil.Value}">{!fil.Label}</option>
    </apex:repeat>
</select>

Depending where I put this select-box, when I press it on my iPhone, the screen jumps to the top of my page and closes the select-box dialog to pick the values.
If the select-box is below this:
<div class="panel panel-info">
    <div class="panel-heading">Today</div>
    <div class="panel-body">
        "Some content"
    </div>
</div>
then the problem occurs. If I put my select-box above this, there is no problem.
The "Some content" is an outputpanel and within three repeats.

So this works:
.......

<select id="selectfiltertime" class="form-control" onchange="filtertime(this.options[this.selectedIndex].value);">
    <apex:repeat value="{!InAdvanceToValues}" var="fil">
        <option value="{!fil.Value}">{!fil.Label}</option>
    </apex:repeat>
</select>

<div class="panel panel-info">
    <div class="panel-heading">Today</div>
    <div class="panel-body">
        <apex:outputpanel id="now">
            <apex:outputpanel id="ooo1" rendered="{!HasDataNow}">
                <h3>Out Of Office</h3>
            </apex:outputpanel>
            <apex:repeat value="{!DataNow}" var="item">
                <div class="well well-sm">
                    <div class="media">
                        <img width="48px" height="48px" src="{!item.PhotoURL}" class="pull-left" />
                        <div class="media-body">
                            <apex:outpupanel>

                            .......

                            </apex:outputpanel>

                            .......

                        </div>

                        .......

                    </div>
                </div>
            </apex:repeat>

            .......

        </apex:outputpanel>
    </div>
</div>

.......
And this doesn't:
.......

<div class="panel panel-info">
    <div class="panel-heading">Today</div>
    <div class="panel-body">
        <apex:outputpanel id="now">
            <apex:outputpanel id="ooo1" rendered="{!HasDataNow}">
                <h3>Out Of Office</h3>
            </apex:outputpanel>
            <apex:repeat value="{!DataNow}" var="item">
                <div class="well well-sm">
                    <div class="media">
                        <img width="48px" height="48px" src="{!item.PhotoURL}" class="pull-left" />
                        <div class="media-body">
                            <apex:outpupanel>

                            .......

                            </apex:outputpanel>

                            .......

                        </div>

                        .......

                    </div>
                </div>
            </apex:repeat>

            .......

        </apex:outputpanel>
    </div>
</div>

<select id="selectfiltertime" class="form-control" onchange="filtertime(this.options[this.selectedIndex].value);">
    <apex:repeat value="{!InAdvanceToValues}" var="fil">
        <option value="{!fil.Value}">{!fil.Label}</option>
    </apex:repeat>
</select>

.......

I don't know how else to describe this problem.
Do you need more code?

Best regards,
Florian
logontokartiklogontokartik
Can you add return false on your onchange event on select and see if it works? something like below
onchange="filtertime(this.options[this.selectedIndex].value); return false;">

Florian KatenbrinkFlorian Katenbrink
Unfortunately, this doesn't help.
David Torres 15David Torres 15
this issue is a known issue and is still not fixed :(
https://success.salesforce.com/issues_view?id=a1p30000000T2oLAAS
VHanson1VHanson1
Added the css below to my VF page and it fixed the scrolling issue for me.
 
<style>
            html, body {
                height: 100%;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
            }
</style>