3

I'm trying to get a standard header/content/footer page working. 

<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>

I have jquery dividers in the content div but can't seem to ensure a minimum width for div D.

This is the closest I've come to a solution so far. If it can be done cleanly with Semantic-UI, a solution would be appreciated.

thanks!

James Fremen
  • 2,170
  • 2
  • 20
  • 29
  • 1
    https://codepen.io/velociflapter/pen/JLNgYL?editors=1000 – James Fremen Mar 22 '18 at 15:43
  • not a blocker for now. It can be done via jquery-ui resizable, but Rick Strahl's small jquery-resizable is ok, too. https://codepen.io/velociflapter/pen/JLNgYL. Not sure if there is a clean way to do this in a Semantic-UI layout. – James Fremen Mar 22 '18 at 20:44

1 Answers1

0

Your left element must have position: absolute;.

You can check this example: https://codepen.io/osublake/pen/azMONr

blackgreen
  • 34,072
  • 23
  • 111
  • 129
Humberto
  • 1