Question

这是JSFiddle：https://jsfiddle.net/chrismg12/zmbp7at3/88/。
将调整大小栏与面板一起使用时出现问题，其中包含面板标题（高度为30px）和面板主体（高度为auto），面板本身的调整尺寸非常小，但是面板标题和主体仅增加了大小，但永远不会减小。我在有和没有monaco编辑器的情况下进行了尝试，发现这是问题所在，而不是调整大小。

我尝试了
1.摆弄面板标题和主体的样式。
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');

以下是预期结果：
-调整栏大小。
-摩纳哥编辑器调整大小（可以减小和增加宽度）。
实际结果如下：
-调整栏大小。
-摩纳哥编辑器仅在面板（或右窗格）的宽度增加时才调整大小，而在其减小时不调整大小。

Answer 1

我已经处理了大约10个小时的相同问题。我发现，如果您的父容器带有display: flex; justify-content: row，则布局引擎会跳过宽度设置。如果将其切换为justify-content: column，则不会出现此问题。为什么？我已经把眼睛从头骨的后部穿过，试图弄清楚它的踪影，但仍然毫无头绪。

无论如何。我的第一个解决方案是在.narrow {width: 90%}上设置一个类，然后为onDidLayoutChange放置一个侦听器并删除该类。之所以可行，是因为它迫使摩纳哥使用宽度限制进行渲染，然后再次渲染到我想要的宽度，但是摩纳哥的跳动明显。

我最终发现，您可以在摩纳哥集装箱div上设置max-width: 90%，从根本上解决了这个问题。您显然可以将百分比更改为所需的百分比。确保身体上有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%;
}

使用调整大小栏后调整大小不正确？

1 个答案: