SingleSelect: when inside a collapsible, popup options are truncated

[neko-para]

[bendera]

This is a complex issue and there isn't any simple solution to fix it. I added two options to the components that will help you fix this issue.

• The select got a position property, which controls the position of the dropdown. The valid values are "above" and "below".
• The overflow of body of the collapsible component is hidden by default, and for good reason. I defined a CSS part that you can use to modify this property.

vscode-collapsible::part(body) {
  overflow: visible;
}

With this CSS, the dropdown won't be truncated, but the bottom margin of the last element will push down the next element after the Collapsible component. Therefore it's your responsibility to fix this.

I published a pre release version, please let me know if this solve your issue. You can install with: npm i @vscode-elements/elements@next

[neko-para]

Seems that with the css everything works fine, and no extra margin appears. Maybe it's because there's an extra div between collapsible and single-select?

            <vscode-collapsible title="abc" open>
                <div id="indexPanel">
                    <vscode-single-select>
                        <vscode-option>abc</vscode-option>
                        <vscode-option selected>def</vscode-option>
                    </vscode-single-select>
                </div>
            </vscode-collapsible>

#indexPanel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    padding: 0.5rem;
}

[bendera]

Only the children with margins are affected. In my example, the last line is a <p> tag with default vertical margins.