如何阻止jQuery Mobile按钮组溢出？

Posted 2021-05-06

我试图水平放置7个按钮，但是在较小的屏幕尺寸上看到一些溢出。

Button Group Overflow

<div data-mini="true">
    <fieldset data-role="controlgroup" data-type="horizontal">
      <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
      <label for="checkbox-h-2a">Sun</label>
      <input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b">
      <label for="checkbox-h-2b">Mon</label>
      <input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c">
      <label for="checkbox-h-2c">Tue</label>
      <input type="checkbox" name="checkbox-h-2d" id="checkbox-h-2d">
      <label for="checkbox-h-2d">Wed</label>
      <input type="checkbox" name="checkbox-h-2e" id="checkbox-h-2e">
      <label for="checkbox-h-2e">Thu</label>
      <input type="checkbox" name="checkbox-h-2f" id="checkbox-h-2f">
      <label for="checkbox-h-2f">Fri</label>
      <input type="checkbox" name="checkbox-h-2g" id="checkbox-h-2g">
      <label for="checkbox-h-2g">Sat</label>
    </fieldset>
</div>

答案

尝试直接在fieldset标记中应用set mini版本，如下所示：

<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"> 

另一答案

好吧，我前段时间遇到了同样的要求，我发现这并不容易。这就是我解决它的方式：

假设你的<div data-mini="true">有一个类：<div data-mini="true" class="no-wrap">：

.no-wrap {
  box-sizing: border-box;
  text-align: center;
  width: 100%;
}

.no-wrap .ui-controlgroup-controls {
  display: inline-block !important;
  width: 100%;
}

.no-wrap .ui-controlgroup-controls .ui-checkbox {
  float: left;
  clear: none;
  width: 14%; // <- 100% / num. of controls
}

.no-wrap .ui-btn {
  text-overflow: initial !important;
}

.no-wrap label.ui-btn {
  text-align: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

说明：每个控件的宽度应以百分比形式设置为100 / num。在你的controlgroup控制。例如，如果您需要：

• 8个控件：宽度：12.5％
• 7个控件：宽度：14.2％

... 等等。

通过添加容器div，您还可以在JQM页面中指定整个controlgroup的宽度：

.no-wrap .ui-controlgroup-controls {
  display: inline-block !important;
  width: 80%; // <- this will set the width of the whole controlgroup
}

但是：ぁzxswい

也许它似乎有点过度烹饪，但原因是保持跨浏览器的东西，也在IE中。