-
Notifications
You must be signed in to change notification settings - Fork 3.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
It takes more space than its contrainer #29
Comments
The editor uses As mentioned in #28 you can call export interface IDimension {
width:number;
height:number;
}
export interface ICodeEditor {
//...
/**
* Instructs the editor to remeasure its container. This method should
* be called when the container of the editor gets resized.
*/
layout(dimension?:IDimension): void;
//...
} This could also be a bug (maybe the assumption to use |
@alexandrudima Here is a full example: https://tylerlong.github.io/monaco-test/editor/ . Source code: https://github.com/tylerlong/monaco-test/tree/gh-pages/editor I think it should contain no scrollbars out-of-box without I call I don't see any issues to use |
@tylerlong, it's a bunch of hidden (but not quite invisible) stuff in their "overflowingContentWidgets" div. The actual editor is the correct height, though. Just set your #container to overflow: hidden and it fixes the problem (I think). I had the same issue with trying to do the 100% height bit with Ace, as well. @alexandrudima, any reason for the overflow: visible in the .monaco-editor container? Changing that to hidden also fixes the issue, but I'm not sure what other repercussions that might entail. |
I ran into this problem and it decided to see how VSCode handles it and found the following style .monaco-workbench>.editor>.content .editor-container {
height: calc(100% - 35px);
} So, try adding this to your container, it resolved my problem. You can obviously drop the leading selectors... .editor-container {
height: calc(100% - 35px);
}
or
#container {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: calc(100% - 35px);
} |
I've come across a similar bug. The first step was to hide overflow on the editor, as suggested in this thread (.monaco-editor { overflow: hidden; }) There was another issue though; the vertical scroll-bar handle was misaligned. For some reason the misalignment disappeared after I excluded the foundation-sites css library. It didn't matter in which order this library was loaded, only that it was. (I'm using the most recent one, 6.1.4.) I also tried including normalize (version shipped with foundation) but that didn't cause any misalignment. Edit: I narrowed it down to these two rules applied to the global .slider class; https://github.com/zurb/foundation-sites/blob/develop/scss/components/_slider.scss#L24-L25 If you are using foundation-sites, then simply exclude foundation-slider or manually overwrite the slider class for monaco-editor;
|
It seems like the Numerous elements in I inspected all elements which have any height and found these rules to resize them/ position them diffently so that the gap is removed: .monaco-editor .parameter-hints-widget {
border: 0px;
}
.monaco-editor .parameter-hints-widget .signature {
padding: 0px;
}
.monaco-editor .suggest-widget {
border: 0px;
}
.monaco-editor.vs-dark .suggest-widget {
border: 0px;
}
.monaco-editor .rename-box {
top: 0;
} With those applied, everything seems to work except that obviously some borders are missing in dialogs. Unfortunately I don't know monacos internals (how the whole positioning works) and can't find a connection between the rules at this point to fix the issue. |
I couldn't get rid of superflous internal scrolling with any of these workarounds - is this ever likely to be fixed? |
@jonnermut Is the issue with superfluous internal scrolling caused by the (on-by-default) let editor = this.editor = monaco.editor.create(this.element as HTMLElement, {
model,
scrollBeyondLastLine: false
}); |
EDIT: NOPE, did't fix it. Had to |
@tomdale that fixed it for me, thank you very much. |
I think most people here have issue with the vertical scrolling, but my issue was mostly with horizontal scrolling. No matter what size I made the container, it always had a horizontal scrollbar (and was wider than its container). Turned out it was incorrect font-size measurements. This is known and tracked in #392 Using a default font fixed the issue for me. I imagine pre-loading the font would similarly fix the issue but have not tested yet. |
This is happening for me too on the vertical scroll when in |
I applied |
+1 |
@jannisch Life saver, thanks! |
Any fixes for this? I am running into a similar issue with a Flexbox container and the monaco editor takes up more width than the container. |
Works for me. .monaco-editor.rename-box,
.monaco-hover {
top: 0;
} |
The following solution avoids modifying the editor using its class names (which aren't guaranteed to be stable) while respecting the contract that the editor will completely fill the node it mounts on, <div class="editorContainer">
<div id="editorMountNode" class="editorMountNode" />
</div>
<style>
.editorContainer {
overflow: hidden;
/* add any necessary sizing, like height/width/flex */
}
.editorMountNode {
height: 100%;
}
</style> |
Add HEALTHCHECK as a Dockerfile keyword
more safe extra lib filePath generation
Closing due to inactivity. If this bug still applies, please create a new issue. Make sure to select the form for bugs and include a minimal reproducible example. Thanks! |
When I run a demo, I can see both horizontal and vertical scroll bars. Which means it takes more space than its container which is not ideal.
The text was updated successfully, but these errors were encountered: