[BUG] ChoicesJS in Table can't show all option

[bleungAtGTI]

Environment

Please provide as many details as you can:

• Hosting type
  • [] Form.io
  • [x] Local deployment
• Formio.js version: (As at 2020-06-03) https://formio.github.io/formio.js/app/builder
• Browser: Microsoft Edge
• Browser version: v83.0.478.37 (Official build) (64bit)

Steps to Reproduce

1. Add a table
2. Add select 2.1 Widget Type: ChoiceJS 2.1 Data Source Type: Values 2.2 Data Source Values (add around 20 items)
3. Click the "Select" component

Expected behavior

No scrollbar in "Table" component Some options was hide because it in the scrollbar

Observed behavior

No scrollbar in "Table" component Can show all options

Example

**Can't reproduce in jsfiddle***

ChoiceJS:

HTML5:

const schema = {
    "display": "form",
    "settings": {
        "pdf": {
            "id": "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
            "src": "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0"
        }
    },
    "components": [
        {
            "label": "Table",
            "cellAlignment": "left",
            "tableView": false,
            "key": "table",
            "type": "table",
            "input": false,
            "rows": [
                [
                    {
                        "components": [
                            {
                                "label": "Select",
                                "widget": "choicesjs",
                                "tableView": true,
                                "data": {
                                    "values": [
                                        {
                                            "label": "1",
                                            "value": "1"
                                        },
                                        {
                                            "label": "3",
                                            "value": "3"
                                        },
                                        {
                                            "label": "c",
                                            "value": "c"
                                        },
                                        {
                                            "label": "d",
                                            "value": "d"
                                        },
                                        {
                                            "label": "e",
                                            "value": "e"
                                        },
                                        {
                                            "label": "f",
                                            "value": "f"
                                        },
                                        {
                                            "label": "g",
                                            "value": "g"
                                        },
                                        {
                                            "label": "h",
                                            "value": "h"
                                        },
                                        {
                                            "label": "i",
                                            "value": "i"
                                        },
                                        {
                                            "label": "j",
                                            "value": "j"
                                        },
                                        {
                                            "label": "k",
                                            "value": "k"
                                        },
                                        {
                                            "label": "l",
                                            "value": "l"
                                        },
                                        {
                                            "label": "m",
                                            "value": "m"
                                        },
                                        {
                                            "label": "n",
                                            "value": "n"
                                        },
                                        {
                                            "label": "o",
                                            "value": "o"
                                        },
                                        {
                                            "label": "p",
                                            "value": "p"
                                        },
                                        {
                                            "label": "r",
                                            "value": "r"
                                        },
                                        {
                                            "label": "s",
                                            "value": "s"
                                        },
                                        {
                                            "label": "q",
                                            "value": "q"
                                        },
                                        {
                                            "label": "u",
                                            "value": "u"
                                        },
                                        {
                                            "label": "",
                                            "value": ""
                                        }
                                    ]
                                },
                                "selectThreshold": 0.3,
                                "key": "select2",
                                "type": "select",
                                "indexeddb": {
                                    "filter": {}
                                },
                                "input": true
                            }
                        ]
                    },
                    {
                        "components": []
                    },
                    {
                        "components": []
                    }
                ],
                [
                    {
                        "components": []
                    },
                    {
                        "components": []
                    },
                    {
                        "components": []
                    }
                ],
                [
                    {
                        "components": []
                    },
                    {
                        "components": []
                    },
                    {
                        "components": []
                    }
                ]
            ]
        },
        {
            "type": "button",
            "label": "Submit",
            "key": "submit",
            "disableOnInvalid": true,
            "input": true,
            "tableView": false
        }
    ]
}

Formio.createForm(document.getElementById('formio'), schema).then(function(form) {
});

[wag110894]

@bleungAtGTI, We are not seeing this issue on the builder using Mircosoft Edge. You will need to scroll the bar inside of the select component in order to see the remaining items.

[bleungAtGTI]

@wag110894, yep,

1. scroll bar inside the select component <-- yes, it is normal
2. scroll bar inside the table <-- this is not excepted

[wag110894]

@bleungAtGTI,

This is a styling issue with the builder app. It should be able to be resolved by adding some CSS.

[bleungAtGTI]

@wag110894 I found a solution for edit css https://github.com/jshjohnson/Choices/issues/568

After add overflow: visible, it work, but any suggestion or comment for this change?

[travist]

You can actually add a style override in the formio.scss file which gets compiled as part of the renderer. If you add this override there, we will accept it into the next renderer version.

[VikkiAlenn]

Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!