3

標準のヘッダー/コンテンツ/フッター ページを機能させようとしています。

<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
</head>
<body>
  <div class="panel-container" style="display: flex; flex-direction: row; 
      flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; width: 100%; border: 1px solid silver; overflow: hidden; touch-action: none;">
    <div class="A" style="flex: 0 0 auto; 
        padding: 10px; min-height: 200px; min-width: 10px; white-space: nowrap; background:#838383; color:white;">
      A
    </div>

    <div class="A-splitter" style="flex: 0 0 auto;
        width: 18px;  
        background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
        min-height: 200px;
        cursor: col-resize;">
    </div>

    <div class="D" style="flex: 1 1 auto;
        padding: 10px;
        min-height: 200px;
        min-width: 200px;">
      D
    </div>

    <script>
      window.$ = window.jQuery = require('jquery');
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript" crossorigin="anonymous"></script>
    <script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.js"></script>
    <script>
      $(".A").resizable({
        handleSelector: ".A-splitter",
        resizeHeight: false,
        onDrag: function(e, $el, newWidth, newHeight, opt) {
          $el.width(newWidth);
          return false;
        }
      });
    </script>
</html>

コンテンツ div に jquery ディバイダーがありますが、div D の最小幅を確保できないようです。

これは、これまでのところ解決策に最も近いものです。Semantic-UI できれいに実行できる場合は、解決策をいただければ幸いです。

ありがとう！

4

1 に答える 1