Monaco-editor: Command palette items are not fully visible
Using "F1" keyboard, the command palette is not fully visible, left side is not visible.
monaco-editor version: 0.9.0
Browser: Edge, Chrome
OS: Windows 10
Steps or JS usage snippet reproducing the issue:
galyech
All 2 comments
Since I cannot reproduce at https://microsoft.github.io/monaco-editor/ , I suspect there are some CSS selectors on your page that end up applying to the Command Palette DOM.
Here is an HTML "dump" of the quick open. Do any of your CSS selectors end up targeting these dom nodes?
<div class="quick-open-widget" aria-hidden="false" style="color: rgb(108, 108, 108); background-color: rgb(255, 255, 254); box-shadow: rgb(168, 168, 168) 0px 5px 8px; width: 496px; margin-left: -248px;">
<div class="progress-container builder-hidden" aria-hidden="true">
<div class="progress-bit" style="background-color: rgb(14, 112, 192);"></div>
</div>
<div class="quick-open-input" aria-hidden="false" style="width: 484px;">
<div class="monaco-inputbox idle" style="background-color: rgb(255, 255, 255); color: rgb(108, 108, 108);">
<div class="wrapper"><input class="input" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" wrap="off" aria-label="Quick picker. Type to narrow down results." role="combobox" aria-haspopup="true" aria-autocomplete="list" style="background-color: rgb(255, 255, 255); color: rgb(108, 108, 108);" aria-activedescendant="MTQ="></div>
</div>
</div>
<div class="quick-open-tree" style="height: 154px;">
<div class="monaco-tree monaco-tree-instance-1 focused" tabindex="0" role="tree" aria-label="Quick Picker" aria-activedescendant="MTQ=">
<style type="text/css" media="screen">.monaco-tree.monaco-tree-instance-1.focused .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) { background-color: #dcebfc; }
.monaco-tree.monaco-tree-instance-1.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { background-color: #52a8ff; }
.monaco-tree.monaco-tree-instance-1.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { color: #ffffff; }
.monaco-tree-drag-image,
.monaco-tree.monaco-tree-instance-1.focused .monaco-tree-rows > .monaco-tree-row.focused.selected:not(.highlighted) { background-color: #3399ff; }
.monaco-tree-drag-image,
.monaco-tree.monaco-tree-instance-1.focused .monaco-tree-rows > .monaco-tree-row.focused.selected:not(.highlighted) { color: #ffffff; }
.monaco-tree.monaco-tree-instance-1 .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { background-color: #cccedb; }
.monaco-tree.monaco-tree-instance-1 .monaco-tree-rows > .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused) { background-color: #f0f0f0; }
.monaco-tree.monaco-tree-instance-1 .monaco-tree-wrapper.drop-target,
.monaco-tree.monaco-tree-instance-1 .monaco-tree-rows > .monaco-tree-row.drop-target { background-color: #dcebfc !important; color: inherit !important; }
</style>
<div class="monaco-scrollable-element mac" role="presentation" style="position: relative; overflow: hidden;">
<div class="monaco-tree-wrapper" style="overflow: hidden;">
<div class="monaco-tree-rows show-twisties" style="top: 0px;">
<div class="monaco-tree-row focused" draggable="false" role="treeitem" aria-label="Add Cursor Above, commands, picker" aria-setsize="79" aria-posinset="1" aria-selected="true" aria-level="1" style="height: 22px; padding-left: 11px;" id="MTQ=">
<div class="content actions has-group-label">
<div class="sub-content">
<div class="quick-open-entry">
<div class="row">
<span class=""></span>
<div class="monaco-icon-label" title=""><a class="label-name"><span class="monaco-highlighted-label"><span>Add Cursor Above</span></span></a><span class="label-description empty"></span></div>
<span class="quick-open-entry-description"><span class="monaco-highlighted-label" title="null"></span></span>
<span class="quick-open-entry-keybinding">
<div class="htmlkb"></div>
</span>
</div>
<div class="row">
<div class="quick-open-entry-meta"><span class="monaco-highlighted-label"></span></div>
</div>
</div>
</div>
<div class="results-group" style="color: rgba(0, 122, 204, 0.6);">⌥⌘↑</div>
<div class="primary-action-bar">
<div class="monaco-action-bar animated">
<ul class="actions-container" role="toolbar"></ul>
</div>
</div>
</div>
</div>
<div class="monaco-tree-row" draggable="false" role="treeitem" aria-label="Add Cursor Below, commands, picker" aria-setsize="79" aria-posinset="2" aria-selected="false" aria-level="1" style="height: 22px; padding-left: 11px;">
<div class="content actions has-group-label">
<div class="sub-content">
<div class="quick-open-entry">
<div class="row">
<span class=""></span>
<div class="monaco-icon-label" title=""><a class="label-name"><span class="monaco-highlighted-label"><span>Add Cursor Below</span></span></a><span class="label-description empty"></span></div>
<span class="quick-open-entry-description"><span class="monaco-highlighted-label" title="null"></span></span>
<span class="quick-open-entry-keybinding">
<div class="htmlkb"></div>
</span>
</div>
<div class="row">
<div class="quick-open-entry-meta"><span class="monaco-highlighted-label"></span></div>
</div>
</div>
</div>
<div class="results-group" style="color: rgba(0, 122, 204, 0.6);">⌥⌘↓</div>
<div class="primary-action-bar">
<div class="monaco-action-bar animated">
<ul class="actions-container" role="toolbar"></ul>
</div>
</div>
</div>
</div>
<div class="monaco-tree-row" draggable="false" role="treeitem" aria-label="Add Cursors to Line Ends, commands, picker" aria-setsize="79" aria-posinset="3" aria-selected="false" aria-level="1" style="height: 22px; padding-left: 11px;">
<div class="content actions has-group-label">
<div class="sub-content">
<div class="quick-open-entry">
<div class="row">
<span class=""></span>
<div class="monaco-icon-label" title=""><a class="label-name"><span class="monaco-highlighted-label"><span>Add Cursors to Line Ends</span></span></a><span class="label-description empty"></span></div>
<span class="quick-open-entry-description"><span class="monaco-highlighted-label" title="null"></span></span>
<span class="quick-open-entry-keybinding">
<div class="htmlkb"></div>
</span>
</div>
<div class="row">
<div class="quick-open-entry-meta"><span class="monaco-highlighted-label"></span></div>
</div>
</div>
</div>
<div class="results-group" style="color: rgba(0, 122, 204, 0.6);">⇧⌥I</div>
<div class="primary-action-bar">
<div class="monaco-action-bar animated">
<ul class="actions-container" role="toolbar"></ul>
</div>
</div>
</div>
</div>
<div class="monaco-tree-row" draggable="false" role="treeitem" aria-label="Add Line Comment, commands, picker" aria-setsize="79" aria-posinset="4" aria-selected="false" aria-level="1" style="height: 22px; padding-left: 11px;">
<div class="content actions has-group-label">
<div class="sub-content">
<div class="quick-open-entry">
<div class="row">
<span class=""></span>
<div class="monaco-icon-label" title=""><a class="label-name"><span class="monaco-highlighted-label"><span>Add Line Comment</span></span></a><span class="label-description empty"></span></div>
<span class="quick-open-entry-description"><span class="monaco-highlighted-label" title="null"></span></span>
<span class="quick-open-entry-keybinding">
<div class="htmlkb"></div>
</span>
</div>
<div class="row">
<div class="quick-open-entry-meta"><span class="monaco-highlighted-label"></span></div>
</div>
</div>
</div>
<div class="results-group" style="color: rgba(0, 122, 204, 0.6);">⌘K ⌘C</div>
<div class="primary-action-bar">
<div class="monaco-action-bar animated">
<ul class="actions-container" role="toolbar"></ul>
</div>
</div>
</div>
</div>
<div class="monaco-tree-row" draggable="false" role="treeitem" aria-label="Add Selection To Next Find Match, commands, picker" aria-setsize="79" aria-posinset="5" aria-selected="false" aria-level="1" style="height: 22px; padding-left: 11px;">
<div class="content actions has-group-label">
<div class="sub-content">
<div class="quick-open-entry">
<div class="row">
<span class=""></span>
<div class="monaco-icon-label" title=""><a class="label-name"><span class="monaco-highlighted-label"><span>Add Selection To Next Find Match</span></span></a><span class="label-description empty"></span></div>
<span class="quick-open-entry-description"><span class="monaco-highlighted-label" title="null"></span></span>
<span class="quick-open-entry-keybinding">
<div class="htmlkb"></div>
</span>
</div>
<div class="row">
<div class="quick-open-entry-meta"><span class="monaco-highlighted-label"></span></div>
</div>
</div>
</div>
<div class="results-group" style="color: rgba(0, 122, 204, 0.6);">⌘D</div>
<div class="primary-action-bar">
<div class="monaco-action-bar animated">
<ul class="actions-container" role="toolbar"></ul>
</div>
</div>
</div>
</div>
<div class="monaco-tree-row" draggable="false" role="treeitem" aria-label="Add Selection To Previous Find Match, commands, picker" aria-setsize="79" aria-posinset="6" aria-selected="false" aria-level="1" style="height: 22px; padding-left: 11px;">
<div class="content actions">
<div class="sub-content">
<div class="quick-open-entry">
<div class="row">
<span class=""></span>
<div class="monaco-icon-label" title=""><a class="label-name"><span class="monaco-highlighted-label"><span>Add Selection To Previous Find Match</span></span></a><span class="label-description empty"></span></div>
<span class="quick-open-entry-description"><span class="monaco-highlighted-label" title="null"></span></span>
<span class="quick-open-entry-keybinding">
<div class="htmlkb"></div>
</span>
</div>
<div class="row">
<div class="quick-open-entry-meta"><span class="monaco-highlighted-label"></span></div>
</div>
</div>
</div>
<div class="results-group" style="color: rgba(0, 122, 204, 0.6);"></div>
<div class="primary-action-bar">
<div class="monaco-action-bar animated">
<ul class="actions-container" role="toolbar"></ul>
</div>
</div>
</div>
</div>
<div class="monaco-tree-row" draggable="false" role="treeitem" aria-label="Change All Occurrences, commands, picker" aria-setsize="79" aria-posinset="7" aria-selected="false" aria-level="1" style="height: 22px; padding-left: 11px;">
<div class="content actions has-group-label">
<div class="sub-content">
<div class="quick-open-entry">
<div class="row">
<span class=""></span>
<div class="monaco-icon-label" title=""><a class="label-name"><span class="monaco-highlighted-label"><span>Change All Occurrences</span></span></a><span class="label-description empty"></span></div>
<span class="quick-open-entry-description"><span class="monaco-highlighted-label" title="null"></span></span>
<span class="quick-open-entry-keybinding">
<div class="htmlkb"></div>
</span>
</div>
<div class="row">
<div class="quick-open-entry-meta"><span class="monaco-highlighted-label"></span></div>
</div>
</div>
</div>
<div class="results-group" style="color: rgba(0, 122, 204, 0.6);">⌘F2</div>
<div class="primary-action-bar">
<div class="monaco-action-bar animated">
<ul class="actions-container" role="toolbar"></ul>
</div>
</div>
</div>
</div>
<div class="monaco-tree-row" draggable="false" role="treeitem" aria-label="Command Palette, commands, picker" aria-setsize="79" aria-posinset="8" aria-selected="false" aria-level="1" style="height: 22px; padding-left: 11px;">
<div class="content actions has-group-label">
<div class="sub-content">
<div class="quick-open-entry">
<div class="row">
<span class=""></span>
<div class="monaco-icon-label" title=""><a class="label-name"><span class="monaco-highlighted-label"><span>Command Palette</span></span></a><span class="label-description empty"></span></div>
<span class="quick-open-entry-description"><span class="monaco-highlighted-label" title="null"></span></span>
<span class="quick-open-entry-keybinding">
<div class="htmlkb"></div>
</span>
</div>
<div class="row">
<div class="quick-open-entry-meta"><span class="monaco-highlighted-label"></span></div>
</div>
</div>
</div>
<div class="results-group" style="color: rgba(0, 122, 204, 0.6);">F1</div>
<div class="primary-action-bar">
<div class="monaco-action-bar animated">
<ul class="actions-container" role="toolbar"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div role="presentation" aria-hidden="true" class="invisible scrollbar horizontal" style="position: absolute; width: 0px; height: 0px; left: 0px; bottom: 0px;">
<div class="slider" style="position: absolute; top: 0px; left: 0px; height: 10px; will-change: transform; width: 0px;"></div>
</div>
<div role="presentation" aria-hidden="true" class="visible scrollbar vertical" style="position: absolute; width: 10px; height: 154px; right: 0px; top: 0px;">
<div class="slider" style="position: absolute; top: 0px; left: 0px; width: 10px; will-change: transform; height: 20px;"></div>
</div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow top-left-corner"></div>
</div>
</div>
</div>
</div>
alexdima
on 6 Jul 2017
👍1
@galyech you may want to check whether you have CSS rules of .row, which is very likely when you use bootstrap.
For example, on our website, when the document width is larger than 1200px, the row margin-left in the editor becomes -30px (due to bootstrap) and you can see left part of quick open entry is missing.
rebornix
on 7 Jul 2017
👍2
Was this page helpful?
0 / 5 - 0 ratings
Related issues
akosyakov
·
3Comments
Panhaiwei
·
3Comments
PinkyJie
·
3Comments
hawkerm
·
3Comments
Kedyn
·
3Comments
Most helpful comment
@galyech you may want to check whether you have CSS rules of
.row, which is very likely when you use bootstrap.For example, on our website, when the document width is larger than 1200px, the row margin-left in the editor becomes -30px (due to bootstrap) and you can see left part of quick open entry is missing.