Question

我有section class"container"和5个div，使用jQuery-Ui重新调整大小，我在这里有3个问题。

如何在调整子div的大小并且文档不滚动时使容器滚动？ 提示：我已经尝试了宽度和高度的固定值。
现在，当我调整儿童div的大小时，它改变了它的兄弟姐妹宽度，但我需要让每个人独立，改变它的大小，不要改变其他人的大小。< / p>
当最后一个div忙于数据时，如何创建新的div（具有相同的兄弟类和动态ID）？

以下是我使用的代码段：

＆＃13;

//$(document).ready(function() {
//    $(".container").draggable().resizable();
// });
 
 $(document).ready(function() {
    $(".mainContainer").draggable().resizable();
 });

 $(document).ready(function(){
     // Hide table and add column view on clicking vertical button
//   $(".liste").hide();
   $("#columnView").hide();
   $(".Vertical").on("click",function(){
       $("div-table-responsive").html("<div id='parent' class='parent-accs container' contenteditable><a id='parent1' href='#' >10100</a><a id='parent1' href='#' >20100</a><a id='parent1' href='#' >30100</a><a id='parent1' href='#' >40100</a></div><div  class='child1-accs container'><div id='child1' class='childs-div'></div></div><div id='child2' class='child2-accs container'></div><div id='child3' class='child3-accs container'></div><div id='details' class='details-accs container'></div>");
   });
   // display childs on clicking parent
   $("#parent1").on("click",function(){
     // function puts childs inside each div
      $("#child1").load("childs.html");
    // Checks whether last display div is empty or not ?!
      if ( $.trim( $('#child3').html() ).length == 0 ) {
        // Create Div when last display div is busy
        $("last-child-has-child").click(function() {
          var domElement = $('<div class="container"><div id="" class="childs-div"></div></div>');
          $(this).after(domElement);
      });
      }

  });
 });
 
// get parent id to know which div are u in
// var i= $(this).closest('div').attr('id'); 


// ajax dynamic load 

//function getPage(id) {
//	$('#output').html('<img src="LoaderIcon.gif" />');
//	jQuery.ajax({
//		url: "get_page.php",
//		data:'id='+id,
//		type: "POST",
//		success:function(data){$('#output').html(data);}
//	});
//}


// chained select : https://codepen.io/CSWApps/pen/Bemst

＆＃13;

.mainContainer{
    width:1000px;
    height:600px;
    background: #ede;
    margin: 10px auto;
    position: relative;
    text-align:center;
    display:flex;
    flex-wrap: nowrap;
    overflow: auto;
}

/*.div-table-responsive{display:hidden;}*/
.container{

    width: 20%;
    height: 400px;
    border: 1px solid #000;
    background-color: #EFF0F1;
    display: inline-block;
    
    position: relative;
    margin-left:5px;

    /*left: 250px;*/
    

/*background: green;
  height: 100px;
  width: 100px;
  display:inline-block;
  float:left;
  margin: 10px;*/

/*-moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
    heigh:500px;
    display:inline-block;
    float:left;*/
}

.childs-div, #child1{
  width: 100%;
  height: auto;
  font-size: 20px;
}

.container a{
  display: block;
  color: #fff;
}
.container a:hover{color: gray}
.container a:active{color: yellow}

＆＃13;

<!DOCTYPE html>

<html>
  <head>
    <title>test new ui for chart of accounts</title>
    <link rel="stylesheet" href="style.css" />
  </head>
    <body>
        print'<section class="container">';
      print'<div id="parent" class="parent-accs container" contenteditable>';
       print' <a id="parent1" href="#" >10100</a>';
        print'<a id="parent1" href="#" >20100</a>';
        print'<a id="parent1" href="#" >30100</a>';
        print'<a id="parent1" href="#" >40100</a>';
      print'</div>';

      print'<div  class="child1-accs container">';
       print' <div id="child1" class="childs-div">';

        print'</div>';
      print'</div>';
      print'<div id="child2" class="child2-accs container">';

      print'</div>';
      print'<div id="child3" class="child3-accs container">';

      print'</div>';
      print'<div id="details" class="details-accs container">';

      print'</div>';
       print' </section>';
    </body>

    <script
			  src="https://code.jquery.com/jquery-3.2.1.js"
			  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
			  crossorigin="anonymous"></script>
    <script
    		src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
    		integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
    		crossorigin="anonymous"></script>
        <script src="script.js"></script>
</html>




<!--php file content for dynamic load with ajax-->
<!--
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
$pages = $db_handle->runQuery("SELECT * FROM pages WHERE id = ".$_REQUEST['id']);
if(!empty($pages)) {
?>
<h3><?php echo $pages[0]['title'];?></h3>
<div><?php echo $pages[0]['content'];?></p>
<?php } ?>-->

＆＃13;

https://codepen.io/Damasy/pen/YYxzvJ

容器滚动没有文档滚动虽然调整大小

0 个答案: