英文:
Dynamically added content is not resizing container correctly
问题
我已将代码翻译好：
我已将代码简化到最小，实现了我想要的功能并仍然显示了问题。
我有一个对话框，分为头部、内容和底部三部分。对话框内容进一步分为内部内容和内部底部。
内部内容通过ajax调用获取数据。数据是可折叠树。问题发生在我点击一个节点展开时，内部底部和对话框底部被推出对话框的可见部分。
对话框可以调整大小，即使我调整大小只有一像素，布局也会立即纠正。我已经在这个问题上工作了几天，但没有运气。欢迎任何建议。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试可折叠树</title>
<style>
// 省略部分CSS样式
</style>
<script>
// 省略部分JavaScript代码
</script>
</head>
<body onload="init();">
<button onclick="javascript:fm.showDialog();">对话框</button>
</body>
</html>
英文:
I have stripped down my code to the minimum that does what I want and still shows the problem.
I have a dialog that has three parts: header, content and footer. The dialog content is further broken down into an inner content and an inner footer.
The inner content gets it's data from an ajax call. The data is a collapsible tree. The problem occurs when I click on a node to expand it, the inner footer and dialog footer get pushed off the visible part of the dialog.
The dialog is resizable, and the moment I resize it even by a pixel, the layout immediately corrects itself. I have been working on this for a few days now with no luck. Open to any suggestions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testing Collapsable Trees</title>
<style>
ul.tree
{
margin-block-start: 0;
}
ul.tree li:hover
{
background-color: yellow;
}
ul.tree li
{
padding-top : 0.25em;
list-style-type: none;
position: relative;
}
ul.tree ul
{
display: none;
}
ul.tree ul.open
{
display: block;
}
ul.tree li::before
{
height: 1em;
padding: 0.1em;
font-size: 0.8em;
display: block;
position: absolute;
left: -1.3em;
top: 0.35em;
}
ul.tree li:has(+ul)
{
text-decoration : underline black double 1px;
}
ul.tree li:has(+ul)::before
{
content: '+';
}
ul.tree li:has(+ul.open)::before
{
content: '-';
}
.selectedNode
{
color : green;
}
dialog
{
overflow: hidden;
resize: both;
padding : 0;
margin: auto;
max-height: 25%;
}
dialog h3
{
margin : 0.25em 0;
}
dialog button
{
margin: 0.33em;
padding: 0.33em 0.5em;
}
.dlgbody
{
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: 'header' 'main' 'footer';
}
.dlgheader
{
background-color: lightgreen;
display: flex;
justify-content: center;
border-bottom: 2px double black;
grid-area: header;
}
.dlgcontent
{
overflow: hidden;
background-color: white;
grid-area: main;
padding: 5px;
}
.dlgfooter
{
background-color: lightblue;
padding-right: 0.5em;
display: flex;
justify-content: flex-end;
border-top: 2px double black;
grid-area: footer;
}
.fmbody
{
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
grid-template-areas: 'fmmain' 'fmfooter';
}
.fmcontent
{
background-color: white;
grid-area: fmmain;
overflow: auto;
padding: 0px 5px 0px 5px;
}
.fmfooter
{
background-color: white;
border-top: 1px solid black;
grid-area: fmfooter;
}
</style>
<script>
class Tree
{
constructor(root)
{
this.root = document.createElement("ul");
this.root.classList.add("tree");
this.root.tabIndex = "-1";
this.root.addEventListener("click", evt => this.mouseHandler(evt));
}
toggleCollapse(evt)
{
let node = evt.target.nextElementSibling;
if(node == null || node.nodeName != "UL")
return;
if(node.classList.contains("open"))
{
node.classList.remove('open');
let opensubs = node.querySelectorAll(':scope .open');
for(let i = 0; i < opensubs.length; i++)
opensubs[i].classList.remove('open');
}
else
node.classList.add('open');
}
mouseHandler(evt)
{
this.toggleCollapse(evt);
let node = this.getSelected();
if(node != null)
node.classList.remove("selectedNode");
evt.target.classList.add("selectedNode");
this.root.dispatchEvent(new Event("selected"));
}
getRoot()
{
return this.root;
}
getSelected()
{
return this.root.querySelector(":scope .selectedNode");
}
}
class Dialog
{
constructor()
{
this.dialogDiv = document.createElement("dialog");
this.dlgHeader = document.createElement("div");
this.dlgContent = document.createElement("div");
this.dlgFooter = document.createElement("div");
}
init(opts)
{
let body = document.createElement("div");
body.classList.add("dlgbody");
// Build header
let title = document.createElement("h3");
title.innerHTML = opts.title;
this.dlgHeader.appendChild(title);
this.dlgHeader.classList.add("dlgheader");
body.appendChild(this.dlgHeader);
// build div for dialog content
this.dlgContent.classList.add("dlgcontent");
body.appendChild(this.dlgContent);
// build footer
let okbutton = document.createElement("button");
okbutton.textContent = "OK";
okbutton.onclick = (evt) => { this.dialogDiv.close("OK"); }
this.dlgFooter.appendChild(okbutton);
this.dlgFooter.classList.add("dlgfooter");
body.appendChild(this.dlgFooter);
this.dialogDiv.appendChild(body);
document.body.appendChild(this.dialogDiv);
}
show()
{
this.dialogDiv.returnValue = "";
this.dialogDiv.showModal();
}
getContentDiv()
{
return this.dlgContent;
}
getDialogRoot()
{
return this.dialogDiv;
}
}
class FileManager
{
constructor(opts)
{
this.uiList = document.createElement("div");
this.files = new Tree();
this.dialog = new Dialog();
this.dialog.init({title : opts.title});
this.uiList.classList.add("fmcontent");
this.uiList.appendChild(this.files.getRoot());
let uiFooter = document.createElement("div");
uiFooter.classList.add("fmfooter");
let label = document.createElement("h3");
label.textContent = "Content Footer";
uiFooter.appendChild(label);
let ui = document.createElement("div");
ui.classList.add("fmbody");
ui.appendChild(this.uiList);
ui.appendChild(uiFooter);
this.dialog.getContentDiv().appendChild(ui);
}
loadData()
{
let tree = this.files.getRoot();
let data = JSON.parse(testData);
this.build(tree, data);
}
showDialog()
{
this.dialog.show();
this.files.getRoot().focus();
if(this.files.getRoot().children.length == 0)
this.loadData();
}
build(tree, data)
{
for(let i = 0; i < data.length; i++)
{
if(i == 0)
{
if(data[i] == "")
continue;
let li = document.createElement("li");
li.textContent = data[i];
tree.appendChild(li);
let ul = document.createElement("ul");
tree.appendChild(ul);
tree = ul;
}
if(Array.isArray(data[i]))
this.build(tree, data[i]);
else if(i > 0)
{
let li = document.createElement("li");
li.textContent = data[i];
tree.appendChild(li);
}
}
}
}
var testData = '["", ["files", "subfile1", "subfile2", "subfile3", "subfile4", "subfile5", "subfile6"], ["images", "image 1"]]';
var fm = null;
function init()
{
fm = new FileManager({title : "Dialog Header"});
}
</script>
</head>
<body onload="init();">
<button onclick="javascript:fm.showDialog();">Dialog</button>
</body>
</html>
答案1
得分: 1
The issue was the max-height set for dialog. Changed it to height and the issue was gone.
类似以下的代码片段需要翻译：
class Tree到class FileManager的部分ul.tree到.fmfooter的 CSS 样式- HTML 中的部分，包括
<!DOCTYPE html>到<button onclick="javascript:fm.showDialog();">Dialog</button>的内容。
英文:
The issue was the max-height set for dialog. Changed it to height and the issue was gone.
(Just run snippet in full page to see the result)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
class Tree
{
constructor(root)
{
this.root = document.createElement("ul");
this.root.classList.add("tree");
this.root.tabIndex = "-1";
this.root.addEventListener("click", evt => this.mouseHandler(evt));
}
toggleCollapse(evt)
{
let node = evt.target.nextElementSibling;
if(node == null || node.nodeName != "UL")
return;
if(node.classList.contains("open"))
{
node.classList.remove('open');
let opensubs = node.querySelectorAll(':scope .open');
for(let i = 0; i < opensubs.length; i++)
opensubs[i].classList.remove('open');
}
else
node.classList.add('open');
}
mouseHandler(evt)
{
this.toggleCollapse(evt);
let node = this.getSelected();
if(node != null)
node.classList.remove("selectedNode");
evt.target.classList.add("selectedNode");
this.root.dispatchEvent(new Event("selected"));
}
getRoot()
{
return this.root;
}
getSelected()
{
return this.root.querySelector(":scope .selectedNode");
}
}
class Dialog
{
constructor()
{
this.dialogDiv = document.createElement("dialog");
this.dlgHeader = document.createElement("div");
this.dlgContent = document.createElement("div");
this.dlgFooter = document.createElement("div");
}
init(opts)
{
let body = document.createElement("div");
body.classList.add("dlgbody");
// Build header
let title = document.createElement("h3");
title.innerHTML = opts.title;
this.dlgHeader.appendChild(title);
this.dlgHeader.classList.add("dlgheader");
body.appendChild(this.dlgHeader);
// build div for dialog content
this.dlgContent.classList.add("dlgcontent");
body.appendChild(this.dlgContent);
// build footer
let okbutton = document.createElement("button");
okbutton.textContent = "OK";
okbutton.onclick = (evt) => { this.dialogDiv.close("OK"); }
this.dlgFooter.appendChild(okbutton);
this.dlgFooter.classList.add("dlgfooter");
body.appendChild(this.dlgFooter);
this.dialogDiv.appendChild(body);
document.body.appendChild(this.dialogDiv);
}
show()
{
this.dialogDiv.returnValue = "";
this.dialogDiv.showModal();
}
getContentDiv()
{
return this.dlgContent;
}
getDialogRoot()
{
return this.dialogDiv;
}
}
class FileManager
{
constructor(opts)
{
this.uiList = document.createElement("div");
this.files = new Tree();
this.dialog = new Dialog();
this.dialog.init({title : opts.title});
this.uiList.classList.add("fmcontent");
this.uiList.appendChild(this.files.getRoot());
let uiFooter = document.createElement("div");
uiFooter.classList.add("fmfooter");
let label = document.createElement("h3");
label.textContent = "Content Footer";
uiFooter.appendChild(label);
let ui = document.createElement("div");
ui.classList.add("fmbody");
ui.appendChild(this.uiList);
ui.appendChild(uiFooter);
this.dialog.getContentDiv().appendChild(ui);
}
loadData()
{
let tree = this.files.getRoot();
let data = JSON.parse(testData);
this.build(tree, data);
}
showDialog()
{
this.dialog.show();
this.files.getRoot().focus();
if(this.files.getRoot().children.length == 0)
this.loadData();
}
build(tree, data)
{
for(let i = 0; i < data.length; i++)
{
if(i == 0)
{
if(data[i] == "")
continue;
let li = document.createElement("li");
li.textContent = data[i];
tree.appendChild(li);
let ul = document.createElement("ul");
tree.appendChild(ul);
tree = ul;
}
if(Array.isArray(data[i]))
this.build(tree, data[i]);
else if(i > 0)
{
let li = document.createElement("li");
li.textContent = data[i];
tree.appendChild(li);
}
}
}
}
var testData = '["", ["files", "subfile1", "subfile2", "subfile3", "subfile4", "subfile5", "subfile6"], ["images", "image 1"]]';
var fm = null;
function init()
{
fm = new FileManager({title : "Dialog Header"});
}
<!-- language: lang-css -->
ul.tree
{
margin-block-start: 0;
}
ul.tree li:hover
{
background-color: yellow;
}
ul.tree li
{
padding-top : 0.25em;
list-style-type: none;
position: relative;
}
ul.tree ul
{
display: none;
}
ul.tree ul.open
{
display: block;
}
ul.tree li::before
{
height: 1em;
padding: 0.1em;
font-size: 0.8em;
display: block;
position: absolute;
left: -1.3em;
top: 0.35em;
}
ul.tree li:has(+ul)
{
text-decoration : underline black double 1px;
}
ul.tree li:has(+ul)::before
{
content: '+';
}
ul.tree li:has(+ul.open)::before
{
content: '-';
}
.selectedNode
{
color : green;
}
dialog
{
overflow: hidden;
resize: both;
padding : 0;
margin: auto;
height: 25%;
}
dialog h3
{
margin : 0.25em 0;
}
dialog button
{
margin: 0.33em;
padding: 0.33em 0.5em;
}
.dlgbody
{
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: 'header' 'main' 'footer';
}
.dlgheader
{
background-color: lightgreen;
display: flex;
justify-content: center;
border-bottom: 2px double black;
grid-area: header;
}
.dlgcontent
{
overflow: hidden;
background-color: white;
grid-area: main;
padding: 5px;
}
.dlgfooter
{
background-color: lightblue;
padding-right: 0.5em;
display: flex;
justify-content: flex-end;
border-top: 2px double black;
grid-area: footer;
}
.fmbody
{
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
grid-template-areas: 'fmmain' 'fmfooter';
}
.fmcontent
{
background-color: white;
grid-area: fmmain;
overflow: auto;
padding: 0px 5px 0px 5px;
}
.fmfooter
{
background-color: white;
border-top: 1px solid black;
grid-area: fmfooter;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testing Collapsable Trees</title>
</head>
<body onload="init();">
<button onclick="javascript:fm.showDialog();">Dialog</button>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论