mirror of
https://github.com/Part-DB/Part-DB-server.git
synced 2025-12-06 11:09:29 +00:00
Use body element as dropdownParent for tomselect elements
This improves UX
This commit is contained in:
parent
2b28aa8ba9
commit
fb92db8c05
7 changed files with 11 additions and 4 deletions
|
|
@ -42,6 +42,7 @@ export default class extends Controller {
|
||||||
selectOnTab: true,
|
selectOnTab: true,
|
||||||
//This a an ugly solution to disable the delimiter parsing of the TomSelect plugin
|
//This a an ugly solution to disable the delimiter parsing of the TomSelect plugin
|
||||||
delimiter: 'VERY_L0NG_D€LIMITER_WHICH_WILL_NEVER_BE_ENCOUNTERED_IN_A_STRING',
|
delimiter: 'VERY_L0NG_D€LIMITER_WHICH_WILL_NEVER_BE_ENCOUNTERED_IN_A_STRING',
|
||||||
|
dropdownParent: 'body',
|
||||||
render: {
|
render: {
|
||||||
item: (data, escape) => {
|
item: (data, escape) => {
|
||||||
return '<span>' + escape(data.label) + '</span>';
|
return '<span>' + escape(data.label) + '</span>';
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@ export default class extends Controller {
|
||||||
searchField: ["name", "description", "category", "footprint"],
|
searchField: ["name", "description", "category", "footprint"],
|
||||||
valueField: "id",
|
valueField: "id",
|
||||||
labelField: "name",
|
labelField: "name",
|
||||||
|
dropdownParent: 'body',
|
||||||
preload: "focus",
|
preload: "focus",
|
||||||
render: {
|
render: {
|
||||||
item: (data, escape) => {
|
item: (data, escape) => {
|
||||||
|
|
|
||||||
|
|
@ -44,6 +44,7 @@ export default class extends Controller {
|
||||||
allowEmptyOption: true,
|
allowEmptyOption: true,
|
||||||
selectOnTab: true,
|
selectOnTab: true,
|
||||||
maxOptions: null,
|
maxOptions: null,
|
||||||
|
dropdownParent: 'body',
|
||||||
|
|
||||||
render: {
|
render: {
|
||||||
item: this.renderItem.bind(this),
|
item: this.renderItem.bind(this),
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,7 @@ export default class extends Controller {
|
||||||
this._tomSelect = new TomSelect(this.element, {
|
this._tomSelect = new TomSelect(this.element, {
|
||||||
maxItems: 1000,
|
maxItems: 1000,
|
||||||
allowEmptyOption: true,
|
allowEmptyOption: true,
|
||||||
|
dropdownParent: 'body',
|
||||||
plugins: ['remove_button'],
|
plugins: ['remove_button'],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -50,6 +50,7 @@ export default class extends Controller {
|
||||||
valueField: 'text',
|
valueField: 'text',
|
||||||
searchField: 'text',
|
searchField: 'text',
|
||||||
orderField: 'text',
|
orderField: 'text',
|
||||||
|
dropdownParent: 'body',
|
||||||
|
|
||||||
//This a an ugly solution to disable the delimiter parsing of the TomSelect plugin
|
//This a an ugly solution to disable the delimiter parsing of the TomSelect plugin
|
||||||
delimiter: 'VERY_L0NG_D€LIMITER_WHICH_WILL_NEVER_BE_ENCOUNTERED_IN_A_STRING',
|
delimiter: 'VERY_L0NG_D€LIMITER_WHICH_WILL_NEVER_BE_ENCOUNTERED_IN_A_STRING',
|
||||||
|
|
|
||||||
|
|
@ -54,6 +54,7 @@ export default class extends Controller {
|
||||||
maxItems: 1,
|
maxItems: 1,
|
||||||
delimiter: "$$VERY_LONG_DELIMITER_THAT_SHOULD_NEVER_APPEAR$$",
|
delimiter: "$$VERY_LONG_DELIMITER_THAT_SHOULD_NEVER_APPEAR$$",
|
||||||
splitOn: null,
|
splitOn: null,
|
||||||
|
dropdownParent: 'body',
|
||||||
|
|
||||||
searchField: [
|
searchField: [
|
||||||
{field: "text", weight : 2},
|
{field: "text", weight : 2},
|
||||||
|
|
|
||||||
|
|
@ -43,6 +43,7 @@ export default class extends Controller {
|
||||||
selectOnTab: true,
|
selectOnTab: true,
|
||||||
createOnBlur: true,
|
createOnBlur: true,
|
||||||
create: true,
|
create: true,
|
||||||
|
dropdownParent: 'body',
|
||||||
};
|
};
|
||||||
|
|
||||||
if(this.element.dataset.autocomplete) {
|
if(this.element.dataset.autocomplete) {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue