RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-22 13:06:08 +03:00
Code Issues Projects Releases Wiki Activity

Add "common problems" section and address #4217

Browse Source
This commit is contained in:
alexweissman 2017-09-10 21:53:08 -04:00
parent fa1d12582c
commit 553f6aa00d
5 changed files with 59 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config/site.yaml
View File

@ -6,3 +6,5 @@ taxonomies: [category,tag]
summary: summary:
size: 300 size: 300
redirects:
/getting-help: /troubleshooting/getting-help

0
pages/02.getting-help/docs.md → pages/02.troubleshooting/01.getting-help/docs.md
View File

42
pages/02.troubleshooting/02.common-problems/docs.md Normal file
View File

@ -0,0 +1,42 @@
---
title: Common problems
metadata:
description: Commonly encountered issues when using Select2.
taxonomy:
category: docs
---
### Select2 does not function properly when I use it inside a Bootstrap modal.
This issue occurs because Bootstrap modals tend to steal focus from other elements outside of the modal. Since by default, Select2 [attaches the dropdown menu to the `<body>` element](/dropdown#dropdown-placement), it is considered "outside of the modal".
To avoid this problem, you may attach the dropdown to the modal itself with the [dropdownParent](/dropdown#dropdown-placement) setting:
```
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
...
<select id="mySelect2">
...
</select>
...
</div>
...
<script>
$('#mySelect2').select2({
dropdownParent: $('#myModal')
});
</script>
```
This will cause the dropdown to be attached to the modal, rather than the `<body>` element.
**Alternatively**, you may simply globally override Bootstrap's behavior:
```
// Do this before you initialize any of your modals
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
```
See [this answer](https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal/19574076#19574076) for more information.

11
pages/02.troubleshooting/chapter.md Normal file
View File

@ -0,0 +1,11 @@
---
title: Troubleshooting
metadata:
description: The chapter covers some common issues you may encounter with Select2, as well as where you can go to get help.
taxonomy:
category: docs
---
# Troubleshooting
The chapter covers some common issues you may encounter with Select2, as well as where you can go to get help.

8
pages/07.dropdown/docs.md
View File

@ -55,7 +55,7 @@ If you need to render HTML with your result template, you must wrap your rendere
Select2 can be configured to automatically select the currently highlighted result when the dropdown is closed by using the `selectOnClose` option: Select2 can be configured to automatically select the currently highlighted result when the dropdown is closed by using the `selectOnClose` option:
``` ```
$('select').select2({ $('#mySelect2').select2({
selectOnClose: true selectOnClose: true
}); });
``` ```
@ -65,7 +65,7 @@ $('select').select2({
Select2 will automatically close the dropdown when an element is selected, similar to what is done with a normal select box. You may use the `closeOnSelect` option to prevent the dropdown from closing when a result is selected: Select2 will automatically close the dropdown when an element is selected, similar to what is done with a normal select box. You may use the `closeOnSelect` option to prevent the dropdown from closing when a result is selected:
``` ```
$('select').select2({ $('#mySelect2').select2({
closeOnSelect: false closeOnSelect: false
}); });
``` ```
@ -85,8 +85,8 @@ Select2 will display the dropdown above the container if there is not enough spa
The `dropdownParent` option allows you to pick an alternative element for the dropdown to be appended to: The `dropdownParent` option allows you to pick an alternative element for the dropdown to be appended to:
``` ```
$('select').select2({ $('#mySelect2').select2({
dropdownParent: $('#my_amazing_modal') dropdownParent: $('#myModal')
}); });
``` ```