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

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

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