<p>A page grid is a type of grid designed to provide a responsive container for wrapping the entire contents of your page.</p>
<div class="ui page grid">
<h4 class="ui header">Using Containers</h4>
<p>a <a href="/elements/container.html">container</a> can be used alongside a grid to provide a responsive, fixed width container for wrapping the entire contents of your page.</p>
<div class="ui grid container">
<div class="four wide column"></div>
<div class="four wide column"></div>
<div class="four wide column"></div>
@ -300,8 +300,8 @@ themes : ['Default']
</div>
<div class="no example">
<h4 class="ui header">Page Grid Breakpoints</h4>
<p>Semantic's page grid, by default, uses percentage values for page gutters. This means your page container will <b>constantly adjust</b> as the browser width changes, giving you the largest possible space for each breakpoint.</p>
<h4 class="ui header">Container Breakpoints</h4>
<p>Containers . This means your page container will <b>constantly adjust</b> as the browser width changes, giving you the largest possible space for each breakpoint.</p>
<p>Grids, rows, and columns can receive responsive classes to make them appear only on a particular device.</p>
<p>Using <code>maxSelections</code> lets you force a maximum number of selections. You can also use <a href="http://laptop-vm:9778/behaviors/form.html#validation-rules">form validation</a> rules to specify minimum and maximum validation settings for multi-selects inside forms.</p>
<h4 class="ui header">Tagging and User Additions</h4>
<p>Using <code>allowAdditions: true</code> gives users the ability to add their own options. This can work with either single or multiple search select dropdowns</p>
<div class="ui ignored warning message">
Although all dropdowns support <code>select</code> initialization, custom choices <b>will not be saved on page refresh</b> unless you use a hidden input. This is because <code>option</code> created dynamically are not preserved on page refresh.
<p>Search selection dropdowns can specify <a href="/behaviors/api.html">API settings</a> for retrieving values remotely, this can use either a named API <code>action</code> or <code>url</code>.</p>
<p class="ignored">Using API can allow users to select choices from large datasets that would be too large to include directly in page markups.</p>
<p class="ignored">If your backend is not designed to return the correct markup you can use API's <code><a href="/behaviors/api.html#adjusting-server-responses">onResponse</a></code> callback to adjust the format of an API response after it is received from the server.</p>
<p class="ignored">Requests for the same API endpoints will automatically cached locally, to avoid server roundtrips. You can disable this by adjusting the <code>cache</code> API setting.</p>
<div class="ui ignored positive message">When a user refreshes the page, selection labels are automatically recreated by using <code>sessionStorage</code> to store the corresponding names for selected values. You can disable this feature by setting <code>saveRemoteData: false</code></div>
<div class="ui warning ignored message">If your backend is not designed to return the correct markup you can use API's <code><a href="/behaviors/api.html#adjusting-server-responses">onResponse</a></code> callback to adjust the format of an API response after it is received from the server.</div>
<p>Using <code>maxSelections</code> lets you force a maximum number of selections. You can also use <a href="http://laptop-vm:9778/behaviors/form.html#validation-rules">form validation</a> rules to specify minimum and maximum validation settings for multi-selects inside forms.</p>
<h4 class="ui header">Tagging and User Additions</h4>
<p>Using <code>allowAdditions: true</code> gives users the ability to add their own options. This can work with either single or multiple search select dropdowns</p>
<div class="ui ignored warning message">
Although all dropdowns support <code>select</code> initialization, custom choices <b>will not be saved on page refresh</b> unless you use a hidden input. This is because <code>option</code> created dynamically are not preserved on page refresh.
<p>Sometimes multiselect include options which are long and would appear awkwardly as labels. Setting <code>useLabels: false</code> will display a selected count, and allow reselection directly from the menu.</p>
jlukic
10 years ago