Question

我有这段代码：

<table>
    <tr>
        <td id="parent">
            <div id="child"></div>
        </td>
    </tr>
</table>

我的JavaScript代码：

$('#child' ).resizable({
    animate: true,
    helper: '.ui-resizable-helper',
    maxWidth: 500,
    maxHeight: 500,     
    aspectRatio: true
});

使用上面的代码，我的可调整大小div按预期工作，但当我添加containment选项时，div s width和height会调整为0，在任何方向调整大小时。

   $('#child' ).resizable({
        animate: true,
        helper: '.ui-resizable-helper',
        maxWidth: 500,
        maxHeight: 500,     
        aspectRatio: true,
        containment: '#parent'
    });

为什么会这样？这是一个错误吗？

Answer 1

尝试添加此CSS：

#parent {
  width: 500px;
  height: 500px;
}

Answer 2

问题不在于#parent与#child的关系。应用以下CSS，使其具有基本起始大小。

#child {
  height:200px;
  width:200px;
}

此外，您可以see my fiddle在此处使用您的代码来说明更改。

Answer 3

{
  "query": {
    "filtered": {
      "filter": {
        "bool": {
          "must": [
            {
              "term": {
                "id": 1
              }
            }
          ]
        }
      },
      "query": {
      "bool": {
         "should": [
            {
               "bool": {
                  "must": [
                     {
                        "term": {
                           "anotherId": "ss"
                        }
                     },
                     {
                        "term": {
                           "node": "ss"
                        }
                     }
                  ]
               }
            },
            {
               "bool": {
                  "must": [
                     {
                        "terms": {
                           "domain" : [ "cc", "cc" ]
                        }
                     }
                  ]
               }
            }
         ]
      }
   }
    }
  }
}

为孩子定义最小宽度和高度

<table>
    <tr>
        <td>
            <div class="child" style="border:solid 1px red;">
            </div>
        </td>
                <td>
            <div class="child" style="border:solid 1px red;">
              <p>this is a test
            </p>
            </div>
        </td>
    </tr>
</table>

将.child { min-width:50px; min-height:50px; }设置为containment并添加默认的document，minHeight值。

minWidth

fiddle

调整大小时，Jquery的Resizable Div的宽度和高度变为0

3 个答案: