这是 JSFiddle:https://jsfiddle.net/chrismg12/zmbp7at3/88/ .
将调整大小栏与面板一起使用时出现问题，包含面板标题(高度 30px)和面板主体(高度自动)，面板本身调整大小非常好，但是面板标题和主体只会增加尺寸但从不减小尺寸。我在有和没有 monaco-editor 的情况下都尝试过这个，发现这是一个问题而不是调整大小。
我试过了
1.修改panel-header和body的样式。
2.我尝试添加以下行:
rightPane.childNodes[0].childNodes[0].style.width = rightPane.style.width;
rightPane.childNodes[0].childNodes[1].style.width = rightPane.style.width;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Venti</title>
<script src="https://cdn.rawgit.com/lingtalfi/simpledrag/master/simpledrag.js"></script>
<link rel="stylesheet" href="css/style2.css">
<link rel="stylesheet" href="css/titlebar.css">
</head>
<body>
<div class="title-bar">
<div class="menu-button-container">
<button
id="menu-button"
class="menu-button"
/>
</div>
<div class="app-name-container">
<p>App Name</p>
</div>
<div class="window-controls-container">
<button
id="minimize-button"
class="minimize-button"
/>
<button
id="min-max-button"
class="min-max-button"
/>
<button
id="close-button"
class="close-button"
/>
</div>
</div>
<div class="panes-container">
<div class="left-pane" id="left-pane">
</div>
<div class="panes-separator" id="panes-separator"></div>
<div class="right-pane" id="right-pane">
<div class="panel">
<div class="panel-header">TABS</div>
<div class="panel-body"><div id="editor"></div>
<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.15.6/min/vs/editor/editor.main.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.15.6/min/vs/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.15.6/min/vs/editor/editor.main.nls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.15.6/min/vs/editor/editor.main.js"></script>
<script>
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.15.6/min/vs' }})
require(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('editor'), {
value: "// Cross-browser xml parsing\nvar parseXML = function( data ) {\n var xml, tmp;\n if ( !data || typeof data !== \"string\" ) {\n return null;\n }\n try {\n if ( window.DOMParser ) { // Standard\n tmp = new DOMParser();\n xml = tmp.parseFromString( data , \"text/xml\" );\n } else { // IE\n xml = new ActiveXObject( \"Microsoft.XMLDOM\" );\n xml.async = false;\n xml.loadXML( data );\n }\n } catch( e ) {\n xml = undefined;\n }\n if ( !xml || !xml.documentElement || xml.getElementsByTagName( \"parsererror\" ).length ) {\n jQuery.error( \"Invalid XML: \" + data );\n }\n return xml;\n};\n\n// Bind a function to a context, optionally partially applying any arguments.\nvar proxy = function( fn, context ) {\n var tmp, args, proxy;\n\n if ( typeof context === \"string\" ) {\n tmp = fn[ context ];\n context = fn;\n fn = tmp;\n }\n\n // Quick check to determine if target is callable, in the spec\n // this throws a TypeError, but we will just return undefined.\n if ( !jQuery.isFunction( fn ) ) {\n return undefined;\n }\n\n // Simulated bind\n args = core_slice.call( arguments, 2 );\n proxy = function() {\n return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) );\n };\n\n // Set the guid of unique handler to the same of original handler, so it can be removed\n proxy.guid = fn.guid = fn.guid || jQuery.guid++;\n\n return proxy;\n};\n\nSound.play = function() {}\nSound.prototype = { something; }\nSound.prototype.play = function() {}\nSound.prototype.play = myfunc\nvar parser = document.createElement('a');\nparser.href = \"http://example.com:3000/pathname/?search=test#hash\";\nparser.hostname; // => \"example.com\"",
language: 'javascript',
automaticLayout: true,
fontSize:18
});
});
</script></div>
</div>
</div>
</div>
<div class="footbar"></div>
</body>
</html>
这里是要使用的JS代码:
var leftPane = document.getElementById('left-pane');
var rightPane = document.getElementById('right-pane');
var paneSep = document.getElementById('panes-separator');
var leftLimit = 0;
var rightLimit = 90;
paneSep.sdrag(function (el, pageX, startX, pageY, startY, fix) {
fix.skipX = true;
if (pageX < window.innerWidth * leftLimit / 100) {
pageX = window.innerWidth * leftLimit / 100;
fix.pageX = pageX;
}
if (pageX > window.innerWidth * rightLimit / 100) {
pageX = window.innerWidth * rightLimit / 100;
fix.pageX = pageX;
}
var cur = pageX / window.innerWidth * 100;
if (cur < 0) {
cur = 0;
}
if (cur > window.innerWidth) {
cur = window.innerWidth;
}
var right = (100-cur-2);
leftPane.style.width = cur + '%';
rightPane.style.width = right + '%';
}, null, 'horizontal');
这是预期的结果:
- 调整栏的大小有效。
- monaco-editor 正确调整大小(可以减少和增加宽度)。
以下是实际结果:
- 调整栏的大小有效。
- monaco-editor 仅在面板(或右 Pane )的宽度增加时调整大小，而不是在减少时调整。
最佳答案
我已经处理同一个问题大约 10 个小时了。我发现如果你有一个带有 display: flex; 的父容器justify-content: row，布局引擎跳过设置宽度。如果将其切换为 justify-content: column，则不会出现此问题。为什么？我已经把我的眼睛从我的头骨后面推开试图弄清楚，但仍然没有任何线索。
无论如何。我的第一个解决方案是在 .narrow {width: 90%} 上设置一个类，然后我为 onDidLayoutChange 设置一个监听器并删除该类。这“有效”是因为它强制 Monaco 以宽度约束进行渲染，然后再次渲染到我想要的宽度，但是你有明显的 Monaco 跳跃。
我终于发现您可以在您的 Monaco 容器 div 上设置 max-width: 90% 并且它基本上消除了问题。您显然可以将百分比更改为您想要的。确保 body 上有 overflow: none 以防止滚动条毁了你的一天。
以我为例:
<div class="ide-container">
<div class="file-browser">
<div class="text-editor"><div id="monacodiv"></div></div>
</div>
CSS
.ide-container {
display: flex;
flex-direction: row;
height: 100%;
}
.file-browser {
flex-basis: 15%;
}
.text-editor {
flex: 1 1 0;
max-width: 85%;
}
关于javascript - 使用调整大小栏后调整大小不正确？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54278276/