RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2025-03-10 22:56:12 +03:00
Code Issues Projects Releases Wiki Activity

fix theme examples

Browse Source
This commit is contained in:
alexweissman 2017-09-03 00:40:02 -04:00
parent 29619aa43a
commit 0257a66590
1 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
pages/03.appearance/02.theming/docs.md
View File

@ -9,18 +9,11 @@ never_cache_twig: true
## Theme support
<p>
Select2 supports custom themes using the
<a href="options.html#theme">theme option</a>
so you can style Select2 to match the rest of your application.
</p>
Select2 supports custom themes using the `theme` option so you can style Select2 to match the rest of your application.
<p>
These are using the <code>classic</code> theme, which matches the old
look of Select2.
</p>
These examples use the `classic` theme, which matches the old look of Select2.
<div class="s2-example">
<div class="s2-example">
<p>
<select class="js-example-theme-single js-states form-control">
</select>
@ -28,9 +21,12 @@ never_cache_twig: true
<p>
<select class="js-example-theme-multiple js-states form-control" multiple="multiple"></select>
</p>
</div>
</div>
<pre data-fill-from=".js-code-example-theme"></pre>
<script type="text/javascript" class="js-code-example-theme">
```
$(".js-example-theme-single").select2({
theme: "classic"
});
@ -38,12 +34,10 @@ $(".js-example-theme-single").select2({
$(".js-example-theme-multiple").select2({
theme: "classic"
});
```
Various display options of the Select2 component can be changed:
You can access the <code>&lt;option&gt;</code> element
(or <code>&lt;optgroup&gt;</code>) and any attributes on those elements
using <code>.element</code>.
</script>
Various display options of the Select2 component can be changed. You can access the `<option>` element (or `<optgroup>`) and any attributes on those elements using `.element`.
## Responsive design - Percent width
@ -65,4 +59,14 @@ width respectively.
<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
```
<pre data-fill-from=".js-code-example-responsive"></pre>
<script type="text/javascript" class="js-code-example-responsive">
$(".js-example-responsive").select2({
width: 'resolve' // need to override the changed default
});
</script>
>>>> 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 `style` declaration into the tag.