Fatal编程技术网
  • javascript/
  • Javascript 使用调整大小栏后调整大小不当？

Javascript 使用调整大小栏后调整大小不当？

javascript html css

Javascript 使用调整大小栏后调整大小不当？,javascript,html,css,Javascript,Html,Css,这是JSFIDLE:。 将调整大小栏与包含面板标题（高度30px）和面板主体（高度自动）的面板一起使用时出现问题，面板本身的大小调整非常精细，但是面板标题和主体的大小只会增加，而不会减小。我尝试了这个有和没有摩纳哥编辑器，并发现这是一个问题，而不是它的大小调整 我试过了 1.摆弄面板标题和主体的样式。 2.我已尝试添加行： rightPane.childNodes[0]。childNodes[0]。style.width=rightPane.style.width； rightPane.chil

这是JSFIDLE:。
将调整大小栏与包含面板标题（高度30px）和面板主体（高度自动）的面板一起使用时出现问题，面板本身的大小调整非常精细，但是面板标题和主体的大小只会增加，而不会减小。我尝试了这个有和没有摩纳哥编辑器，并发现这是一个问题，而不是它的大小调整

我试过了
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>


梵迪
应用程序名称

标签
require.config（{path:{'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'）{
值：“//跨浏览器xml解析\nvar parseXML=function（data）{\n var xml，tmp；\n if（！data | | typeof data！=\'string\”{\n return null；\n}\n}\n尝试{\n if（window.DOMParser）{//Standard\n tmp=new DOMParser（）；\n xml=tmp.parseFromString（data，\'text/xml\”）；\n}否则{//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（\“parserror\”）.length）{\n jQuery.error（\“Invalid xml:\”+data）；\n}\n}\n返回xml；\n}；\n\n//将函数绑定到上下文，可以选择部分应用任何参数。\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//快速检查以确定目标是否可调用，在规范中\n//这会抛出一个TypeError，但我们只返回未定义的。\n if（！jQuery.isFunction（fn））{\n return undefined；\n}\n\n//模拟绑定\n args=core\u slice.call（参数，2）；\n proxy=function（）{\n return fn.apply（上下文| | this，args.concat（core_slice.call（arguments））；\n}；\n\n//将唯一处理程序的guid设置为与原始处理程序相同的guid，以便可以删除它\n proxy.guid=fn.guid=fn.guid | | | jQuery.guid++；\n\n return proxy；\n}；\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\”，
语言：“javascript”，
他说：是的，
尺寸：18
});
});
下面是要使用的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');

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（函数（el、pageX、startX、pageY、startY、fix）{
fix.skipX=true；
如果（pageXwindow.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=窗口的内部宽度；
}
右变量=（100-cur-2）；
leftPane.style.width=cur+'%'；
rightPane.style.width=right+'%'；
}，空，'水平'；
以下是预期结果：
-调整工具栏大小有效。
-摩纳哥编辑器可适当调整大小（可以减小或增大宽度）。
以下是实际结果：
-调整工具栏大小有效。
-摩纳哥编辑器仅在面板（或右窗格）打开时调整大小宽度增加而不是减少。

我已经处理了大约10个小时的相同问题。我发现，如果您的父容器具有
display:flex；justify content:row
，布局引擎将跳过宽度的设置。如果您将其切换为
justify content:column
，则它没有这是个问题。为什么？我把眼睛从脑后探了出来，想弄清楚，但仍然没有任何线索

无论如何，我的第一个解决方案是在它上面设置一个类
.窄带{width:90%}
，然后我为
ondilayoutchange
设置了一个侦听器并删除了这个类。这个“有效”是因为它迫使摩纳哥使用宽度约束进行渲染，然后再次渲染到我想要的宽度，但是你在摩纳哥有明显的跳跃

我终于发现，你可以在摩纳哥集装箱div上设置
最大宽度：90%
，这基本上消除了这个问题。你可以明显地将百分比更改为你想要的。确保你的身体上有
溢出：无
，以防止滚动条破坏你的一天

就我而言：

<div class="ide-container">
    <div class="file-browser">
    <div class="text-editor"><div id="monacodiv"></div></div>
</div>

.ide-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.file-browser {
  flex-basis: 15%;
}
.text-editor {
  flex: 1 1 0;
  max-width: 85%;
}