ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix the dropdown menu width logic (#20165)

Browse Source 
* fix the dropdown menu width logic

* comment
This commit is contained in:
Alan Ren
2022-07-25 15:53:05 -07:00
committed by GitHub
parent 4ea210e794
commit 816cd5a997
2 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts
View File

@@ -90,6 +90,7 @@ export class Dropdown extends Disposable implements IListVirtualDelegate<string>
private _onFocus = this._register(new Emitter<void>()); private _onFocus = this._register(new Emitter<void>());
public onFocus: Event<void> = this._onFocus.event; public onFocus: Event<void> = this._onFocus.event;
private readonly _widthControlElement: HTMLElement; private readonly _widthControlElement: HTMLElement;
private readonly _widthControlElementContainer: HTMLElement;
constructor( constructor(
container: HTMLElement, container: HTMLElement,
@@ -99,9 +100,12 @@ export class Dropdown extends Disposable implements IListVirtualDelegate<string>
super(); super();
this._options = opt || Object.create(null); this._options = opt || Object.create(null);
mixin(this._options, defaults, false); mixin(this._options, defaults, false);
this._widthControlElement = DOM.append(container, document.createElement('span')); // Set up the width measure control using the same classes and structure as the context menu to get the accurate width measurement.
this._widthControlElement.classList.add('monaco-dropdown-width-control-element'); this._widthControlElementContainer = DOM.append(container, document.createElement('div'));
this._widthControlElement.setAttribute('aria-hidden', 'true'); this._widthControlElementContainer.classList.add('monaco-dropdown-width-control-element', 'context-view', 'fixed');
this._widthControlElementContainer.setAttribute('aria-hidden', 'true');
this._widthControlElement = DOM.append(this._widthControlElementContainer, document.createElement('span'));
this._widthControlElement.classList.add('editable-drop-option-text');
this._el = DOM.append(container, DOM.$('.monaco-dropdown')); this._el = DOM.append(container, DOM.$('.monaco-dropdown'));
this._el.style.width = '100%'; this._el.style.width = '100%';

5
src/sql/base/browser/ui/editableDropdown/browser/media/dropdownList.css
View File

@@ -4,8 +4,8 @@
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
.monaco-dropdown-width-control-element { .monaco-dropdown-width-control-element {
position: absolute; position: absolute !important;
left: -10000px; left: -10000px !important;
visibility: hidden; visibility: hidden;
} }
@@ -14,7 +14,6 @@
padding-right: 4px; padding-right: 4px;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block; display: inline-block;
width: 100%;
overflow: hidden; overflow: hidden;
} }