我遇到了响应式网页设计的问题。所以我添加了视口和其他东西，为我的页面设置了一个响应页面，当我调整窗口大小并使其缩小时，我的页面工作得非常好但是当我再次调整大小时增加窗口大小。这次我的第二张桌子不会变长，并保持相同的小尺寸，但也改变它的位置..任何人都可以帮助我...我把我的代码放在这里..这是使用vis库绘制图形的组件。
var nodes, edges, network;
var countid=0;
var removednodes = 0;
// convenience method to stringify a JSON object
function toJSON(obj) {
return JSON.stringify(obj, null, 4);
}
//this functions return a JSON object to show on console
function consoleoutput(){
for(i=0;i<=nodes.length+removednodes;++i){
if(network.getConnectedNodes(i).length!=0){
console.log("id = ",i);
var connections = toJSON(network.getConnectedNodes(i));
console.log("connections",connections);
}
}
}
function addNode() {
var x = document.getElementById("node-label").value;
if (x == "") {
alert("Label must be filled out");
return false;
}
try {
countid=countid+1;
nodes.add({
id: countid,
label: document.getElementById('node-label').value,
color:document.getElementById('nodecolor').value
});
}
catch (err) {
alert(err);
}
//checking if number of nodes is zero disable add edge button
if(nodes.length<1)
document.getElementById("edge-add").disabled = true;
else
document.getElementById("edge-add").disabled = false;
//check if number of nodes is zero disable remove button
if(nodes.length<1)
document.getElementById("edge-remove").disabled = true;
else
document.getElementById("edge-remove").disabled = false;
}
function addEdge() {
var x = document.getElementById("edge-from").value;
if (x == "") {
alert("form ID must be filled out");
return false;
}
var y = document.getElementById("edge-to").value;
if (y == "") {
alert("to ID must be filled out");
return false;
}
try {
edges.add({
from: document.getElementById('edge-from').value,
to: document.getElementById('edge-to').value,
color:document.getElementById('edgecolor').value
});
}
catch (err) {
alert(err);
}
}
function removeNode() {
try {
nodes.remove({id: document.getElementById('node-id').value});
removednodes = removednodes+1;
}
catch (err) {
alert(err);
}
}
function draw() {
nodes = new vis.DataSet();
nodes.on('*', function () {
document.getElementById('nodes').innerHTML = JSON.stringify(nodes.get(), null, 4);
});
edges = new vis.DataSet();
var container =
document.getElementById('network'); // container to render in
var data = {
nodes: nodes,
edges: edges
};
var options = {};
network = new vis.Network(container, data, options);
//check if number of nodes is zero disable add edge button
if(nodes.length<1)
document.getElementById("edge-add").disabled = true;
else
document.getElementById("edge-add").disabled = false;
//check if number of nodes is zero disable remove button
if(nodes.length<1)
document.getElementById("edge-remove").disabled = true;
else
document.getElementById("edge-remove").disabled = false;
}* {
box-sizing: border-box;
}
html, body {
font: 11pt arial;
}
h1 {
font-size: 150%;
margin: 5px 0;
font:;
}
h2 {
font-size: 100%;
margin: 5px 0;
}
table.view {
max-width: 900px;
display:inline-block;
margin:auto;
}
table td {
/*vertical-align: top;*/
}
table table td {
vertical-align: middle;
}
input[type=text], pre {
border: 1px solid lightgray;
}
pre {
margin: 0;
padding: 5px;
font-size: 10pt;
}
#network {
max-width:800px;
height:400px;
margin:auto;
border: 1px solid lightgray;
background: radial-gradient(circle, lightgrey , darkgrey); /* Standard syntax (must be last) */
border-radius: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#nodes{
border-radius: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#main{
max-height:600px;
max-width:400px;
display:inline-block;
vertical-align:top;
margin-right:40px;
margin-top:40px;
border:1px solid;
border-radius:15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#maintableh2{
/*margin-left:100px;*/
text-align: center;
padding:0;
width:100%;
}
#h2_view{
/*margin-left:400px;*/
text-align: center;
}
input{
margin-left:0px;
}
label{
width:25px;
}
input[type=text]:focus {
border: 2px solid #555;
}
button:hover{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
table.functiontable{
width:100%;
}<link href="https://github.com/almende/vis/blob/master/dist/vis-network.min.css" rel="stylesheet"/>
<link href="http://visjs.org/dist/vis.css" rel="stylesheet"/>
<script src="http://visjs.org/dist/vis.js"></script>
<body onload="draw();">
<div>
<table id="main" style="background-color:lightgrey;">
<tr>
<td>
<h2 id="maintableh2">Node</h2>
<table class = "functiontable">
<tr>
<td></td>
<td><label for="node-label">Label</label></td>
<td><input id="node-label" type="text" ></td>
</tr>
<tr>
<td></td>
<td><label for="node-label">Color</label></td>
<td><input type="color" id="nodecolor" value="#ff0000"></td>
</tr>
<tr>
<td></td>
<td>
<button id="node-add" onclick="addNode();">Add</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<h2 id="maintableh2">Edge</h2>
<table class = "functiontable">
<tr>
<td></td>
<td><label for="edge-from">From ID:</label></td>
<td><input id="edge-from" type="text" ></td>
</tr>
<tr>
<td></td>
<td><label for="edge-to">To ID:</label></td>
<td><input id="edge-to" type="text" ></td>
</tr>
<tr>
<td></td>
<td><label for="node-label">Color</label></td>
<td><input type="color" id="edgecolor" value="#3377FF"></td>
</tr>
<tr>
<td></td>
<td>
<button id="edge-add" onclick="addEdge();" >Add</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<h2 id="maintableh2">Remove</h2>
<table class="functiontable">
<tr>
<td></td>
<td><label >Node id</label></td>
<td><input id="node-id" type="text" ></td>
</tr>
<tr>
<td></td>
<td >
<button id="edge-remove" onclick="removeNode();">Remove</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<button style="margin-top:30px" onclick="consoleoutput();">console</button>
</td>
</tr>
</table>
<table class="view">
<tr>
<td>
<h2 id="h2_view" >View</h2>
<div id="network"></div>
</td>
</tr>
<tr>
<td>
<h2 id="h2_view">Nodes</h2>
<pre id="nodes"></pre>
</td>
</tr>
</table>
</div>