/* * Structural styles for Components/UiCommon/NgSelect.razor. * * @ng-select/ng-select ships TWO stylesheets: the component's own structural CSS * (bundled with the Angular component, injected into at runtime) and the * optional theme. The port only copied the theme — ng-select.default.theme.css — * so the layout rules were missing entirely. Without them .ng-dropdown-panel is * not taken out of flow, and because the ported markup puts Tailwind's `flex` on * the host the panel rendered as a flex sibling *next to* the control instead of * as an overlay under it, at full list height. * * Loaded after app.css and before the theme, which is the order Angular ended up * with (component styles beat the global Tailwind utilities on the host, theme * colours beat these). */ .ng-select { position: relative; display: block; box-sizing: border-box; } .ng-select div, .ng-select input, .ng-select span { box-sizing: inherit; } .ng-select.ng-select-disabled { pointer-events: none; } .ng-select .ng-select-container { color: inherit; cursor: default; display: flex; outline: none; overflow: hidden; position: relative; width: 100%; } .ng-select .ng-select-container .ng-value-container { display: flex; flex: 1; } .ng-select .ng-select-container .ng-value-container .ng-input > input { background: none transparent; border: 0 none; box-shadow: none; outline: none; padding: 0; cursor: default; width: 100%; } .ng-select.ng-select-searchable .ng-select-container .ng-value-container .ng-input > input { cursor: text; } .ng-select.ng-select-single .ng-select-container { cursor: pointer; } .ng-select.ng-select-single .ng-select-container .ng-value-container, .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The theme positions this input with top/left/padding; it only works once the structural rule below takes it out of flow, otherwise the search box pushes the selected value sideways while the dropdown is open. */ .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input { position: absolute; left: 0; width: 100%; } .ng-select.ng-select-multiple .ng-select-container .ng-value-container { flex-wrap: wrap; } .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value { white-space: nowrap; } .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon { cursor: pointer; } .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input { flex: 1; z-index: 2; } .ng-select .ng-clear-wrapper { cursor: pointer; position: relative; width: 17px; user-select: none; } .ng-select .ng-clear-wrapper .ng-clear { display: inline-block; font-size: 18px; line-height: 1; pointer-events: none; } .ng-select .ng-arrow-wrapper { cursor: pointer; position: relative; text-align: center; user-select: none; } .ng-select .ng-arrow-wrapper .ng-arrow { pointer-events: none; display: inline-block; height: 0; width: 0; position: relative; } /* The fix that matters: an overlay anchored to .ng-select, not a flex sibling. NOTE: ng-select ships this as opacity:0 and has its panel component set it to 1 once Popper has positioned the panel. NgSelect.razor has no such step — it only renders the panel while open — so it must start visible. Do not "restore" the 0. */ .ng-dropdown-panel { box-sizing: border-box; position: absolute; opacity: 1; width: 100%; z-index: 1050; } .ng-dropdown-panel .ng-dropdown-panel-items { display: block; height: auto; box-sizing: border-box; max-height: 240px; overflow-x: hidden; overflow-y: auto; } .ng-dropdown-panel .ng-dropdown-panel-items .ng-option { box-sizing: border-box; cursor: pointer; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled { cursor: default; }