Some button dropdowns do not work on IPhone

[J35P1N]

I have been scouring the internet looking for a solution to this issue and apparently it should have been fixed in Bootstrap 3. But, it isn't.

Basically, on a site I am developing we have several drop down buttons that form a search panel on the site. On desktop and other devices, when the user clicks on a field, a menu is produced allowing them to make a selection. This works perfectly on desktop and Android but on Iphone (tested on IPhone 5) the menu will trigger once but then no other menus will trigger at all.

The code I am using for each section is as follows (There is some razor code in there as well but just assume that is outputting options):

 <div class="col-lg-5ths col-sm-3" id="tour-type-selection">
                <div class="form-group">
                    <button type="button" placeholder="@(Umbraco.GetDictionaryValue("Tourfinder.Display.Type"))" class=" btn btn-default tf_option tour_finder" data-toggle="dropdown" data-text="@(Umbraco.GetDictionaryValue("TourFinder.Display.Type"))" aria-haspopup="true" aria-expanded="false" data-inactive="fa-arrow-circle-down" data-active="fa-check">
                        <i class="fa @(type.Count() > 0 ? "fa-check greenTick" : "fa-arrow-circle-down") pull-right"></i>
                        @Umbraco.GetDictionaryValue("TourFinder.Display.Type")
                    </button>

                    <div class="dropdown-menu tourtype-menu">
                        <div class="col-sm-6">
                            <label class="checkbox-inline"><input type="checkbox" name="Trip_Type" @(type.Contains("0") ? "checked='checked'" : string.Empty) value="0">All Tours</label>
                        </div>
                        @foreach (IPublishedContent item in categories)
                        {
                            var value = item.GetPropertyValue<string>("categoryId");
                            <div class="col-sm-6">
                                <label class="checkbox-inline"><input type="checkbox" name="Trip_Type" @(type.Contains(value) ? "checked='checked'" : string.Empty) value="@value" />@item.Name</label>
                            </div>
                        }
                    </div>
                </div>
            </div>
            <div class="col-lg-5ths col-sm-3" id="tour-date-selection">
                <div class="form-group">
                    <button type="button" placeholder="@(Umbraco.GetDictionaryValue("TourFinder.Display.Date"))" class="btn btn-default tf_option tour_finder" data-toggle="dropdown" data-text="@(Umbraco.GetDictionaryValue("TourFinder.Display.Date"))" aria-haspopup="true" aria-expanded="false" data-inactive="fa-calendar" data-active="fa-check"><i class="fa @(startDate != string.Empty && endDate != string.Empty ? "fa-check greenTick" : "fa-calendar") pull-right"></i>@(Umbraco.GetDictionaryValue("TourFinder.Display.Date"))</button>
                    <div class="dropdown-menu datepicker-menu">
                        <div class="form-group col-sm-12 col-xs-6">
                            <label for="dateFrom" class="">@Umbraco.GetDictionaryValue("TourFinder.Display.DateFrom")</label>
                            <input type="text" name="Date_From" id="dateFrom" title="Eg. yyyy/MM/dd" class="form-control" autocomplete="off" @(startDate != string.Empty ? "value=" + startDate : string.Empty) />
                        </div>
                        <div class="form-group col-sm-12 col-xs-6">
                            <label for="dateTo" class="">@Umbraco.GetDictionaryValue("TourFinder.Display.DateTo")</label>
                            <input type="text" name="Date_To" id="dateTo" class="form-control" autocomplete="off" @(endDate != string.Empty ? "value=" + endDate : string.Empty) />
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5ths col-sm-3" id="tour-duration-selection">
                <div class="form-group">
                    <button type="button" placeholder="@Umbraco.GetDictionaryValue("TourFinder.Display.Duration") " class="btn btn-default tf_option tour_finder" data-toggle="dropdown" data-text="@Umbraco.GetDictionaryValue("TourFinder.Display.Duration")" aria-haspopup="true" aria-expanded="false" data-inactive="fa-clock-o">
                        <i class="fa @(duration.Count() > 0 ? "fa-check greenTick" : "fa-clock-o") pull-right"></i>@Umbraco.GetDictionaryValue("TourFinder.Display.Duration")
                    </button>

                    <div class="dropdown-menu tourduration-menu">
                            <div class="col-xs-6 col-sm-12">
                                <label class="checkbox-inline"><input type="checkbox" @(duration.Contains("1") ? "checked='checked'" : string.Empty) name="Trip_Duration" value="1" />@Umbraco.GetDictionaryValue("TourFinder.Value.Duration.DayTours")</label>
                            </div>
                            <div class="col-xs-6 col-sm-12">
                                <label class="checkbox-inline"><input type="checkbox" @(duration.Contains("2") ? "checked='checked'" : string.Empty) name="Trip_Duration" value="2" />@Umbraco.GetDictionaryValue("TourFinder.Value.Duration.2-3Days")</label>
                            </div>
                            <div class="col-xs-6 col-sm-12">   
                                 <label class="checkbox-inline"><input type="checkbox" @(duration.Contains("3") ? "checked='checked'" : string.Empty) name="Trip_Duration" value="3" />@Umbraco.GetDictionaryValue("TourFinder.Value.Duration.4-6Days")</label>
                            </div>
                            <div class="col-xs-6 col-sm-12">
                                <label class="checkbox-inline"><input type="checkbox" @(duration.Contains("4") ? "checked='checked'" : string.Empty)  name="Trip_Duration" value="4" />@Umbraco.GetDictionaryValue("TourFinder.Value.Duration.7+Days")</label>
                            </div>

                    </div>
               </div>
            </div> 

As you can see I am just using the standard bootstrap code to implement the drop downs so can anyone explain why this is not working on IPhone as I have the entire Bootstrap library in place:

http://getbootstrap.com/components/#btn-dropdowns

The site in question can be found here:

http://icelandmountainguides.axumdev.com

NB. I have tried the touchstart fix described in this thread for Bootstrap 2 but this does not seem to do anything

Why doesn't Bootstrap button dropdown work on iOS?

[J35P1N]

I'm sorry, but I can't read Chinese

[kkirsche]

@JasonEspin it's an autoresponder. He puts it up occasionally. It's annoying as hell. Also, think that may be Korean not Chinese.

Per CONTRIBUTING.md, bug reports should include an isolated example of the problem with instructions (as necessary) for us to reproduce the problem. The following can be used as a template on JSBin if that would be helpful.

Thanks for your understanding and cooperation!

EDIT: sorry, used the wrong textexpander shortcut.

[J35P1N]

This is not a personal support request. This is an issue with Bootstrap core.

[kkirsche]

@JasonEspin I changed it. Wrong textexpander link...

[J35P1N]

Changed what? I don't see anything above.

[kkirsche]

Per CONTRIBUTING.md, bug reports should include an isolated example of the problem with instructions (as necessary) for us to reproduce the problem. The following can be used as a template on JSBin if that would be helpful.

Thanks for your understanding and cooperation!

instead of

Per CONTRIBUTING.md please do not use the issue tracker for personal support requests. Stack Overflow (twitter-bootstrap-3 tag) or Slack, or IRC are better places to get help with these types of requests.

You may want to refresh your browser or clear your cache if you don't see the edit.

[cvrebert]

Also, please state what version of iOS you're using.

[mdo]

Please provide a simplified example in a JS Bin without all the templating code in the snippet you provided above. There are a few things in there not found in Bootstrap (e.g., the 5ths grid class).

[twbs-closer]

Hey there!

We're automatically closing this issue since the original poster (or another commenter) hasn't yet responded to the question or request made to them 14 days ago. We therefore assume that the user has lost interest or resolved the problem on their own. Closed issues that remain inactive for a long period may get automatically locked.

Don't worry though; if this is in error, let us know with a comment and we'll be happy to reopen the issue.

Thanks!

(Please note that this is an automated comment.)