More grouping on the "Examples" page.
* "Loading array data" and "Loading remote data" now go together under "Other data sources", * "Events" and "Programmatic access" under "Programmatic control", * "Theme support", "Responsive design" and "Templating" under "Themes, templating and responsive design"
This commit is contained in:
Florian Kissling
parent
cd13697695
commit
a728044fa9
@ -10,16 +10,17 @@
|
||||
<a href="#placeholders">Placeholders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#templating">Templating</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#data-array">Loading array data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#data-ajax">Loading remote data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#responsive">Responsive design</a>
|
||||
<a href="#data-other">
|
||||
Other data sources
|
||||
</a>
|
||||
<ul class="nav">
|
||||
<li>
|
||||
<a href="#data-array">Loading array data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#data-ajax">Loading remote data</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#disabled">Disabled mode</a>
|
||||
@ -27,9 +28,6 @@
|
||||
<li>
|
||||
<a href="#disabled-results">Disabled results</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#programmatic">Programmatic access</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#multiple-max">Limiting the number of selections</a>
|
||||
</li>
|
||||
@ -37,7 +35,15 @@
|
||||
<a href="#hide-search">Hiding the search box</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#events">Events</a>
|
||||
<a href="#programmatic-control">Programmatic control</a>
|
||||
<ul class="nav">
|
||||
<li>
|
||||
<a href="#events">Events</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#programmatic">Programmatic access</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tags">Tagging support</a>
|
||||
@ -48,9 +54,6 @@
|
||||
<li>
|
||||
<a href="#matcher">Custom matcher</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#themes">Theme support</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#localization-rtl-diacritics">Localization, RTL and diacritics support</a>
|
||||
<ul class="nav">
|
||||
@ -64,6 +67,23 @@
|
||||
<a href="#diacritics">Diacritics support</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#themes-templating-responsive-design">
|
||||
Themes, templating and responsive design
|
||||
</a>
|
||||
<ul class="nav">
|
||||
<li>
|
||||
<a href="#themes">Theme support</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#templating">Templating</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#responsive">Responsive design</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="back-to-top" href="#top">
|
||||
Back to top
|
||||
|
||||
@ -91,6 +91,7 @@ $(".js-example-basic-multiple").select2();
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="placeholders">Placeholders</h1>
|
||||
|
||||
<p>
|
||||
@ -125,49 +126,15 @@ $(".js-example-placeholder-multiple").select2({
|
||||
placeholder: "Select a state"
|
||||
});
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1 id="templating">Templating</h1>
|
||||
|
||||
<p>
|
||||
Various display options of the Select2 component can be changed:
|
||||
You can access the <code><option></code> element
|
||||
(or <code><optgroup></code>) and any attributes on those elements
|
||||
using <code>.element</code>.
|
||||
</p>
|
||||
<h1 id="data-other" class="page-header">
|
||||
Other data sources
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
Templating is primarily controlled by the
|
||||
<a href="options.html#templateResult"><code>templateResult</code></a>
|
||||
and <a href="options.html#templateSelection"><code>templateSelection</code></a>
|
||||
options.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-templating js-states form-control"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-templating"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-templating">
|
||||
function formatState (state) {
|
||||
if (!state.id) { return state.text; }
|
||||
var $state = $(
|
||||
'<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
|
||||
);
|
||||
return $state;
|
||||
};
|
||||
|
||||
$(".js-example-templating").select2({
|
||||
templateResult: formatState
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1 id="data-array" >Loading array data</h1>
|
||||
|
||||
<p>
|
||||
@ -208,10 +175,8 @@ $(".js-example-data-array-selected").select2({
|
||||
<option value="2" selected="selected">duplicate</option>
|
||||
</select>
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1 id="data-ajax" >Loading remote data</h1>
|
||||
<h2 id="data-ajax" >Loading remote data</h2>
|
||||
|
||||
<p>
|
||||
Select2 comes with AJAX support built in, using jQuery's AJAX methods.
|
||||
@ -283,43 +248,11 @@ $(".js-data-example-ajax").select2({
|
||||
<option value="3620194" selected="selected">select2/select2</option>
|
||||
</select>
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1 id="responsive">Responsive design - Percent width</h1>
|
||||
|
||||
<p>
|
||||
Select2's width can be set to a percentage of its parent to support
|
||||
responsive design. The two Select2 boxes below are styled to 50% and 75%
|
||||
width respectively.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-responsive js-states" style="width: 50%"></select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-responsive js-states" multiple="multiple" style="width: 75%"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-responsive"></pre>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
Select2 will do its best to resolve the percent width specified via a
|
||||
css class, but it is not always possible. The best way to ensure that
|
||||
Select2 is using a percent based width is to inline the
|
||||
<code>style</code> declaration into the tag.
|
||||
</div>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-responsive">
|
||||
<select class="js-example-responsive" style="width: 50%"></select>
|
||||
<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1 id="disabled">Disabled mode</h1>
|
||||
|
||||
<p>
|
||||
@ -362,6 +295,7 @@ $(".js-programmatic-disable").on("click", function () {
|
||||
$(".js-example-disabled-multi").prop("disabled", true);
|
||||
});
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
@ -395,78 +329,6 @@ $(".js-programmatic-disable").on("click", function () {
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1 id="programmatic">Programmatic access</h1>
|
||||
|
||||
<p>
|
||||
Select2 supports methods that allow programmatic control of the
|
||||
component.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-programmatic js-states form-control"></select>
|
||||
</p>
|
||||
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Programmatic control">
|
||||
<div class="btn-group btn-group-sm" aria-label="Set Select2 option">
|
||||
<button class="js-programmatic-set-val btn btn-default">
|
||||
Set "California"
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Open and close">
|
||||
<button class="js-programmatic-open btn btn-default">
|
||||
Open
|
||||
</button>
|
||||
<button class="js-programmatic-close btn btn-default">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Initialize and destroy">
|
||||
<button class="js-programmatic-init btn btn-default">
|
||||
Init
|
||||
</button>
|
||||
<button class="js-programmatic-destroy btn btn-default">
|
||||
Destroy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<select class="js-example-programmatic-multi js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Programmatic setting and clearing Select2 options">
|
||||
<button type="button" class="js-programmatic-multi-set-val btn btn-default">
|
||||
Set to California and Alabama
|
||||
</button>
|
||||
<button type="button" class="js-programmatic-multi-clear btn btn-default">
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-programmatic"></pre>
|
||||
|
||||
<script type="text/javascript" class="js-code-programmatic">
|
||||
var $example = $(".js-example-programmatic");
|
||||
var $exampleMulti = $(".js-example-programmatic-multi");
|
||||
|
||||
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
|
||||
|
||||
$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
|
||||
$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
|
||||
|
||||
$(".js-programmatic-init").on("click", function () { $example.select2(); });
|
||||
$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
|
||||
|
||||
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
|
||||
$(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="multiple-max">
|
||||
@ -497,6 +359,7 @@ $(".js-example-basic-multiple-limit").select2({
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="hide-search">Hiding the search box</h1>
|
||||
|
||||
<p>
|
||||
@ -522,7 +385,12 @@ $(".js-example-basic-hide-search").select2({
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1 id="events">Events</h1>
|
||||
|
||||
<h1 id="programmatic-control" class="page-header">
|
||||
Programmatic control
|
||||
</h1>
|
||||
|
||||
<h2 id="events">Events</h2>
|
||||
|
||||
<p>
|
||||
Select2 will trigger some events on the original select element,
|
||||
@ -601,9 +469,80 @@ function log (name, evt) {
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<h2 id="programmatic">Programmatic access</h2>
|
||||
|
||||
<p>
|
||||
Select2 supports methods that allow programmatic control of the
|
||||
component.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-programmatic js-states form-control"></select>
|
||||
</p>
|
||||
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Programmatic control">
|
||||
<div class="btn-group btn-group-sm" aria-label="Set Select2 option">
|
||||
<button class="js-programmatic-set-val btn btn-default">
|
||||
Set "California"
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Open and close">
|
||||
<button class="js-programmatic-open btn btn-default">
|
||||
Open
|
||||
</button>
|
||||
<button class="js-programmatic-close btn btn-default">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Initialize and destroy">
|
||||
<button class="js-programmatic-init btn btn-default">
|
||||
Init
|
||||
</button>
|
||||
<button class="js-programmatic-destroy btn btn-default">
|
||||
Destroy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<select class="js-example-programmatic-multi js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Programmatic setting and clearing Select2 options">
|
||||
<button type="button" class="js-programmatic-multi-set-val btn btn-default">
|
||||
Set to California and Alabama
|
||||
</button>
|
||||
<button type="button" class="js-programmatic-multi-clear btn btn-default">
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-programmatic"></pre>
|
||||
|
||||
<script type="text/javascript" class="js-code-programmatic">
|
||||
var $example = $(".js-example-programmatic");
|
||||
var $exampleMulti = $(".js-example-programmatic-multi");
|
||||
|
||||
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
|
||||
|
||||
$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
|
||||
$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
|
||||
|
||||
$(".js-programmatic-init").on("click", function () { $example.select2(); });
|
||||
$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
|
||||
|
||||
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
|
||||
$(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="tags">Tagging support</h1>
|
||||
|
||||
<p>
|
||||
@ -637,6 +576,7 @@ $(".js-example-tags").select2({
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="tokenizer">Automatic tokenization</h1>
|
||||
|
||||
<p>
|
||||
@ -673,6 +613,7 @@ $(".js-example-tokenizer").select2({
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="matcher">Custom matcher</h1>
|
||||
|
||||
<p>
|
||||
@ -716,7 +657,108 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1 id="themes">Theme support</h1>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="localization-rtl-diacritics" class="page-header">
|
||||
Localization, RTL and diacritics support
|
||||
</h1>
|
||||
|
||||
<h2 id="language">Multiple languages</h2>
|
||||
|
||||
<p>
|
||||
Select2 supports displaying the messages in different languages, as well
|
||||
as providing your own
|
||||
<a href="options.html#language">custom messages</a>
|
||||
that can be displayed.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The language does not have to be defined when Select2 is being
|
||||
initialized, but instead can be defined in the <code>[lang]</code>
|
||||
attribute of any parent elements as <code>[lang="es"]</code>.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-language js-states form-control">
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-language"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-language">
|
||||
$(".js-example-language").select2({
|
||||
language: "es"
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2 id="rtl">RTL support</h2>
|
||||
|
||||
<p>
|
||||
Select2 will work on RTL websites if the <code>dir</code> attribute is
|
||||
set on the <code><select></code> or any parents of it. You can also
|
||||
initialize Select2 with <code>dir: "rtl"</code> set.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-rtl js-states form-control" dir="rtl"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-rtl"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-rtl">
|
||||
$(".js-example-rtl").select2({
|
||||
dir: "rtl"
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2 id="diacritics">Diacritics support</h2>
|
||||
|
||||
<p>
|
||||
Select2's default matcher will ignore diacritics, making it easier for
|
||||
users to filter results in international selects. Type "aero" into the
|
||||
select below.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-diacritics form-control">
|
||||
<option>Aeróbics</option>
|
||||
<option>Aeróbics en Agua</option>
|
||||
<option>Aerografía</option>
|
||||
<option>Aeromodelaje</option>
|
||||
<option>Águilas</option>
|
||||
<option>Ajedrez</option>
|
||||
<option>Ala Delta</option>
|
||||
<option>Álbumes de Música</option>
|
||||
<option>Alusivos</option>
|
||||
<option>Análisis de Escritura a Mano</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-diacritics"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-diacritics">
|
||||
$(".js-example-diacritics").select2();
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="themes-templating-responsive-design" class="page-header">
|
||||
Themes, templating and responsive design
|
||||
</h1>
|
||||
|
||||
<h2 id="themes">Theme support</h2>
|
||||
|
||||
<p>
|
||||
Select2 supports custom themes using the
|
||||
@ -752,94 +794,74 @@ $(".js-example-theme-multiple").select2({
|
||||
});
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1 id="localization-rtl-diacritics" class="page-header">
|
||||
Localization, RTL and diacritics support
|
||||
</h1>
|
||||
|
||||
<h1 id="language">Multiple languages</h1>
|
||||
<h2 id="templating">Templating</h2>
|
||||
|
||||
<p>
|
||||
Select2 supports displaying the messages in different languages, as well
|
||||
as providing your own
|
||||
<a href="options.html#language">custom messages</a>
|
||||
that can be displayed.
|
||||
Various display options of the Select2 component can be changed:
|
||||
You can access the <code><option></code> element
|
||||
(or <code><optgroup></code>) and any attributes on those elements
|
||||
using <code>.element</code>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The language does not have to be defined when Select2 is being
|
||||
initialized, but instead can be defined in the <code>[lang]</code>
|
||||
attribute of any parent elements as <code>[lang="es"]</code>.
|
||||
Templating is primarily controlled by the
|
||||
<a href="options.html#templateResult"><code>templateResult</code></a>
|
||||
and <a href="options.html#templateSelection"><code>templateSelection</code></a>
|
||||
options.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-language js-states form-control">
|
||||
</select>
|
||||
<select class="js-example-templating js-states form-control"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-language"></pre>
|
||||
<pre data-fill-from=".js-code-templating"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-language">
|
||||
$(".js-example-language").select2({
|
||||
language: "es"
|
||||
<script type="text/x-example-code" class="js-code-templating">
|
||||
function formatState (state) {
|
||||
if (!state.id) { return state.text; }
|
||||
var $state = $(
|
||||
'<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
|
||||
);
|
||||
return $state;
|
||||
};
|
||||
|
||||
$(".js-example-templating").select2({
|
||||
templateResult: formatState
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1 id="rtl">RTL support</h1>
|
||||
<h2 id="responsive">Responsive design - Percent width</h2>
|
||||
|
||||
<p>
|
||||
Select2 will work on RTL websites if the <code>dir</code> attribute is
|
||||
set on the <code><select></code> or any parents of it. You can also
|
||||
initialize Select2 with <code>dir: "rtl"</code> set.
|
||||
Select2's width can be set to a percentage of its parent to support
|
||||
responsive design. The two Select2 boxes below are styled to 50% and 75%
|
||||
width respectively.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-rtl js-states form-control" dir="rtl"></select>
|
||||
<select class="js-example-responsive js-states" style="width: 50%"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-rtl"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-rtl">
|
||||
$(".js-example-rtl").select2({
|
||||
dir: "rtl"
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1 id="diacritics">Diacritics support</h1>
|
||||
|
||||
<p>
|
||||
Select2's default matcher will ignore diacritics, making it easier for
|
||||
users to filter results in international selects. Type "aero" into the
|
||||
select below.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-diacritics form-control">
|
||||
<option>Aeróbics</option>
|
||||
<option>Aeróbics en Agua</option>
|
||||
<option>Aerografía</option>
|
||||
<option>Aeromodelaje</option>
|
||||
<option>Águilas</option>
|
||||
<option>Ajedrez</option>
|
||||
<option>Ala Delta</option>
|
||||
<option>Álbumes de Música</option>
|
||||
<option>Alusivos</option>
|
||||
<option>Análisis de Escritura a Mano</option>
|
||||
</select>
|
||||
<select class="js-example-responsive js-states" multiple="multiple" style="width: 75%"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-diacritics"></pre>
|
||||
<pre data-fill-from=".js-code-responsive"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-diacritics">
|
||||
$(".js-example-diacritics").select2();
|
||||
<div class="alert alert-warning">
|
||||
Select2 will do its best to resolve the percent width specified via a
|
||||
css class, but it is not always possible. The best way to ensure that
|
||||
Select2 is using a percent based width is to inline the
|
||||
<code>style</code> declaration into the tag.
|
||||
</div>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-responsive">
|
||||
<select class="js-example-responsive" style="width: 50%"></select>
|
||||
<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user