Question

我使用了jquery插件，该下拉列表适用于桌面视图，但是该下拉列表在移动浏览器中不起作用。我该如何解决？这是代码段。

var mob_num = $('#mobile-number');
window.default_country_iso_code 
mob_num.intlTelInput({
  defaultCountry: "auto",
  geoIpLookup: function(callback) {
    $.getJSON('/geo_api/get_country_iso_code', function() {}, "jsonp").always(function(resp) {
      var countryCode = (resp && resp.country_iso_code) ? resp.country_iso_code : "";
      callback(countryCode);
      window.default_country_iso_code = resp.country_calling_code
      mob_num.val("+" + resp.country_calling_code + " ");

    });
  }
});

这是HTML。

 <div class="control-group <%= "error" if @errors.present? && @errors.messages.has_key?(:phone)  %>" >
   <label class="control-label required" for="mobile-number">Phone </label>
    <div class="controls">
      <input class="intl-tel-input" type="tel" id="mobile-number" name="client[phone]" value="<%= params['client']['phone'] if params['client'].present? %>" required>
          <% if @errors.present? %>
             <% if @errors.messages.has_key?(:phone) %>        
                 <div class="help-block"><strong><%= @errors.messages[:phone][0].to_s %></strong></div>
              <% end %>
           <% end %>
         <div class="help-block"></div>
      </div>
   </div>

用于此的css。

#wrapper {
    width: 70%;
    margin: 20px auto;
}

.setup-wizard-logo-container {
    margin: 10px 0;
}

.box {
    border: 1px solid #bbb;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .067);
    .border-radius(5px);
    overflow: hidden;
    background: #fff;
}

form {
    margin-bottom: 0px;
}

.intl-tel-input {
    height: 28px !important;
    width: 97%;
}

其余的CSS由库本身添加到其容器中。

Answer 1

这对我有用，我只是增加了其中一个库css类的z-index。

.intl-tel-input select{
  z-index: 3;
}

下拉列表不适用于移动浏览器

1 个答案: