A control that changes how many columns a row divides into — 2, 3 or 4 — for the reader rather than the author. The same joined dropdown the mode control uses, because it is the same kind of thing — a small exclusive choice about how the page is presented.
<div class="mk-btn-group mk-btn-group--join dropdown mk-row-width" data-row-width data-row-width-target="#all .mk-row" data-row-width-value="3">
<button type="button" class="mk-btn mk-btn--sm" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Columns">
<i class="bi bi-columns-gap"></i>
<span class="mk-row-width__value">3</span>
<i class="bi bi-chevron-down"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end" role="menu">
<li>
<button type="button" class="dropdown-item d-flex align-items-center gap-2" role="menuitemradio" aria-checked="false" data-row-width-set="2">2 across</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center gap-2" role="menuitemradio" aria-checked="true" data-row-width-set="3">3 across</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center gap-2" role="menuitemradio" aria-checked="false" data-row-width-set="4">4 across</button>
</li>
</ul>
</div>target: #all .mk-row
value: 3| Field | Type | Notes |
|---|---|---|
target |
text required | CSS selector for the row it steers, e.g. #all .mk-row |
min |
number | |
max |
number | |
value |
number | Rendered server-side too, so the page is correct before any script runs |
label |
text | |
class_names |
text |