-
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
Auto resize with contrainer #28
Comments
@tylerlong Yes, there is a creation option called
Although convenient, I would personally not use this option as it is implemented by installing an interval that measures the container's size every 100ms. The reason is because the editor has no way of knowing what specifically in your app might cause its container to resize. In your case (when the container size is modified only by the window size), I would add a |
Can we do something like: $('#container').resize(function(){
editor.layout();
}); Ref: https://api.jquery.com/resize/ I think the code above should be inside this project instead of let users write it themselves. Maybe it's a better idea to reimplement the |
From https://api.jquery.com/resize/ I understand that it is a wrapper for the I have validated my understanding using the following test page: https://jsfiddle.net/du0d9v9g/1/
That is why
I am open to change the implementation of |
Made some example using transitionend event, works in all major browsers: Additional testing: Works only on fixed width. Not working with width 100%; |
I see there is a commit that referenced this issue on Aug 19. So is this fixed or not? |
The automaticlayout option is the only one mentioned here that really worked for me. I'm using the Monaco editor inside a golden-layout module, and everything i tried (including ResizableElement mentioned above) failed. So thank you very much for this option. |
This worked for me:
|
@zdne GOAT |
I'm not sure what else there is to do on our side, so I'm opting to close this issue. The host of the editor can call If the host of the editor does not want to call |
listening resize event on window is better than a interval every 100ms , if it is not too frequently |
Just in case anyone happens across this issue and sees the snippet posted by @zdne, I wanted to point out that it has a bug.
...is that a new function is created and added as a resize listener in |
just in case, my needs are different: I want the user to resize it the container - in a standard way and cheap (both on code and peformance) on libraries and performance. This is what I did: css container : and this js :
yes, 2 seconds interval and make sure it registers only once. I see there is / was a resize interval on 100ms for the automatic relayout in monaco - IMHO that's too much. See it in action: https://typescript-api-playground.glitch.me/?example=2 |
为什么不侦听window.onresize,而是要setInterval ?
[o] window.onresize = installResizeWatcher[x] setInterval(
installResizeWatcher, ###0 )
Sebastián Gurin <notifications@github.com> 于2018年6月22日周五 上午3:44写道:
… in my case my needs are different: I want the user to resize it the
container - in a standard way and cheap (both on code and peformance) on
libraries and performance. This is what I did:
css container : resize: vertical; overflow: auto
and this js :
function installResizeWatcher(el, fn, interval){
let offset = {width: el.offsetWidth, height: el.offsetHeight}
setInterval(()=>{
let newOffset = {width: el.offsetWidth, height: el.offsetHeight}
if(offset.height!=newOffset.height||offset.width!=newOffset.width){
offset = newOffset
fn()
}
}, interval)
}
const typeScriptCodeContainer = document.getElementById('typeScriptCodeContainer')
typeScriptCodeEditor = monaco.editor.create(typeScriptCodeContainer, Object.assign(editorOptions, {value: example.codeValue}))
installResizeWatcher(typeScriptCodeContainer, typeScriptCodeEditor.layout, 2000)
yes, 2 seconds interval and make sure it registers only once. I see there
is / was a resize interval on 100ms for the automatic relayout in monaco -
IMHO that's too much.
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#28 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AhaCeDd_efQc5w2ydm6YCN0YTCWiUYHmks5t--l5gaJpZM4I-QpD>
.
|
automaticLayout doesn't work when using css grid and reducing window size as ace-editor "fixes" it's height so grid layout engine assumes it cannot reduce it's size |
@ alexandrudima There is a js event for element resize now. Check the links. First one would do the job. |
Hi, get the same problem here and solved it with this : Take care to the browser compatibility (I don't care in my project and don't have test it on any other brother than Chrome) My editor component : import React, { Component } from 'react';
import ReactResizeDetector from 'react-resize-detector';
import * as monaco from 'monaco-editor';
class Editor extends Component {
constructor(props) {
super(props)
this.state = {
width: 0,
height: 0,
}
this.editor_div = React.createRef()
this.handle_rezise = this.handle_rezise.bind(this);
}
componentDidMount() {
const editor_model = monaco.editor.createModel('', 'sql');
this.monaco_editor = monaco.editor.create(this.editor_div.current, this.props.editorOptions);
this.monaco_editor.setModel(editor_model);
}
componentWillUnmount() {
this.monaco_editor && this.monaco_editor.dispose();
}
handle_rezise(width, height) {
this.monaco_editor.layout({ height, width });
}
render() {
return(
<div
className="editor-container"
style={{ height: '100%' }}>
<ReactResizeDetector
handleWidth
handleHeight
onResize={ this.handle_rezise }
refreshMode="debounce"
refreshRate={100} />
<div
className="editor"
ref={ this.editor_div }
style={{ height: '100%' }} />
</div>
)
}
}
export default Editor; New to react this code could be better, but hope this help someone. |
@alexandrudima so you would be open to a PR that implements |
The container always takes 100% of the page size. When I resize the page, however, the monaco editor doesn't resize itself. I want the editor to resize itself so there will never be horizontal or vertical scroll bars. I have done similar things with ACE and CodeMirror. Is it possible with monaco-editor?
The text was updated successfully, but these errors were encountered: