jQuery мобильные горизонтальные кнопки выбора слишком малы на телефоне - PullRequest
Новая
       35

jQuery мобильные горизонтальные кнопки выбора слишком малы на телефоне

0 голосов
/ 12 июня 2019

На моем телефоне мои кнопки выбора оказываются очень маленькими. Я пытаюсь заставить их занять вместе взятые 100% горизонтального пространства, чтобы каждый занимал 33% горизонтального пространства.

На моем компьютере они занимают 100% горизонтального пространства, как я хочу.

Как это исправить для моего мобильного телефона?

Edited screenshot from phone

HTML: 

<div data-role="page" id="Gauntlet">
  <div data-role="header">
    <div data-role="navbar">
      <ul>
        <li><a href="#home" class="ui-btn-active ui-state-persist">Home</a></li>
      </ul>
    </div>
  </div>
  <div data-role="main" class="ui-content">
    <div data-role="collapsible-set">
      <div data-role="collapsible" data-collapsed="false" data-mini="true">
        <h3>Gauntlet Traits:</h3>
        <div class="ui-field-contain">
          <fieldset data-role="controlgroup" data-type="horizontal" class="custom-fieldset">
            <select id="myList1" data-mini="true"></select>
            <select id="myList2" data-mini="true"></select>
            <select id="myList3" data-mini="true"></select> 
          </fieldset>
        </div>
        <button type="button" id="submit" data-mini="true">Submit</button> 
      </div>
    </div>
    <div id="table_div"></div>
  </div>
  <div data-role="footer">
    <h2></h2>
  </div>
</div>

CSS: 

.custom-fieldset .ui-controlgroup-controls {
    width: 100% !important;
}

.custom-fieldset .ui-controlgroup-controls .ui-select {
    width: 33.33% !important;
}

Ответы [ 4 ]

2 голосов
/ 14 июня 2019

Попробуйте добавить метатег view-port : 

return HtmlService
        .createHtmlOutputFromFile('index')
        .addMetaTag('viewport', 'width=device-width, initial-scale=1');
0 голосов
/ 13 июня 2019

Ну, это не точно ответ на имеющуюся проблему, но это решает проблему ... Я могу использовать навигационную панель, чтобы держать мои выбранные меню, а-ля это решение .

0 голосов
/ 13 июня 2019

Используйте мобильные сетки jQuery, как описано здесь: http://demos.jquerymobile.com/1.4.5/grids-buttons/

$(document).on("collapsiblecreate", function(e) {
  /* Add a nice smooth animation to the collapsible */
  $(this)
    .on("collapsiblebeforeexpand", function(event) {
      $(this).find(".ui-collapsible-content").each(function() {
        $(this).stop().slideDown("fast");
      });
      return true;
    })
    .on("collapsiblebeforecollapse", function(event) {
      $(this).find(".ui-collapsible-content").each(function() {
        $(this).stop().slideUp("fast");
      });
      return true;
    })
    .find(".ui-collapsible-content").css({
      "display": "block"
    });
});
/* JQM no frills */
.ui-btn,
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn:visited {
  text-shadow: none !important;
}

/* Remove JQM blue halo */
.ui-btn:focus {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/* Speed-up some android & iOS devices */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>My App</title>
  <meta name="description" content="My App">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0001, maximum-scale=1.0001, width=device-width, minimal-ui shrink-to-fit=no">
  <meta http-equiv="cleartype" content="on">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script>
    $(document).on("mobileinit", function() {
      /* SEO - Remove h1 tag from loader */
      $.mobile.loader.prototype.defaultHtml = "<div class='ui-loader'><span class='ui-icon-loading'></span><h6></h6></div>";

      /* Add onbefore events to the JQM collapsible */
      $.widget("mobile.collapsible", $.mobile.collapsible, {
        _handleExpandCollapse: function(isCollapse) {
          if(this._trigger("before" + (isCollapse ? "collapse" : "expand"))) {
            this._superApply(arguments);
          }
        }
      });

    });
  </script>
  <script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
  <div id="Gauntlet" data-role="page">
    <div data-role="header" class="ui-flipswitch-active ui-overlay-shadow">
      <h2>Home</h2>
    </div>
    <div data-role="content" role="main">
      <div data-role="collapsible-set">
        <div data-role="collapsible" data-collapsed="false" data-mini="true">
          <h3>Gauntlet Traits:</h3>

          <div class="ui-grid-b ui-responsive">
            <div class="ui-block-a">
              <select name="myList1" id="myList1" data-native-menu="false" data-mini="true">
                <option value="1">The 1st Option</option>
                <option value="2">The 2nd Option</option>
                <option value="3">The 3rd Option</option>
                <option value="4">The 4th Option</option>
              </select>
            </div>
            <div class="ui-block-b">
              <select name="myList2" id="myList2" data-native-menu="false" data-mini="true">
                <option value="1">The 1st Option</option>
                <option value="2">The 2nd Option</option>
                <option value="3">The 3rd Option</option>
                <option value="4">The 4th Option</option>
              </select>
            </div>
            <div class="ui-block-c">
              <select name="myList3" id="myList3" data-native-menu="false" data-mini="true">
                <option value="1">The 1st Option</option>
                <option value="2">The 2nd Option</option>
                <option value="3">The 3rd Option</option>
                <option value="4">The 4th Option</option>
              </select>
            </div>
          </div>
          <div class="ui-grid-solo">
            <div class="ui-block-a">
              <button type="button" id="submit" data-mini="true">Submit</button>
            </div>
          </div>
        </div>
      </div>
      <div id="table_div"></div>
    </div>
  </div>
</body>

</html>
0 голосов
/ 12 июня 2019

не применять ширину 33,33% для класса настраиваемых полей

CSS: 

.custom-fieldset > select {
    width: 33.33%;
}
...