Сделайте два текстовых поля рядом друг с другом, используя гибкую границу

Я хочу сделать два текстовых поля рядом, которые имеют одну и ту же границу. Затем мы могли бы перетащить границу и изменить ее ширину, сохранив при этом сумму их ширины. Другими словами, это похоже на панели внутри JSBin.Сделайте два текстовых поля рядом друг с другом, используя гибкую границу

Кто-нибудь знает, как это реализовать?

PS: вот код, чтобы сделать два стационарных прокручиваемым бок о бок:

<!DOCTYPE html> 
<html> 
<head> 
    <title>JS Bin</title> 
</head> 
<body> 
    <textarea name="t1"></textarea> 
    <textarea name="t2"></textarea> 
</body> 
</html>

Edit 1: следующий код из index.html в JSBin. Но я не вижу, как это удается реализовать обмен границы:

<div id="panelswaiting"> 
    <div class="code stretch html panel"> 
     <div role="menubar" class="label menu" tabindex="0"><span class="name"><strong><a href="#htmlprocessors" role="menuitem" class="fake-dropdown button-dropdown">Processor</a></strong></span><div class="dropdown" id="htmlprocessors"> 
      <div role="menu" aria-hidden="true" class="dropdownmenu processorSelector" data-type="html"> 
      <a role="menuitemradio" aria-checked="true" href="#html" data-label="HTML">HTML</a> 
      <a role="menuitemradio" href="#markdown">Markdown</a> 
      <a role="menuitemradio" href="#jade">Jade</a> 
      <a href="#convert">Convert to HTML</a> 
      </div> 
     </div> 
     </div> 
     <div class="editbox"> 
     <textarea aria-label="HTML Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="html"></textarea> 
     </div> 
    </div> 
    <div class="code stretch javascript panel"> 
     <div role="menubar" class="label menu" tabindex="0"><span class="name"><strong><a role="menuitem" class="fake-dropdown button-dropdown" href="#javascriptprocessors">Processor</a></strong></span> 
     <div class="dropdown" id="javascriptprocessors"> 
      <div role="menu" aria-hidden="true" class="dropdownmenu processorSelector" data-type="javascript"> 
      <a role="menuitemradio" aria-checked="true" href="#javascript" data-label="JavaScript">JavaScript</a> 
      <a role="menuitemradio" href="#babel">ES6/Babel</a> 
      <a role="menuitemradio" href="#jsx">JSX (React)</a> 
      <a role="menuitemradio" href="#coffeescript">CoffeeScript</a> 
      <a role="menuitemradio" href="#traceur">Traceur</a> 
      <a role="menuitemradio" href="#typescript">TypeScript</a> 
      <a role="menuitemradio" href="#processing">Processing</a> 
      <a role="menuitemradio" href="#livescript">LiveScript</a> 
      <a role="menuitemradio" href="#clojurescript">ClojureScript</a> 
      <a role="menuitem" href="#convert">Convert to JavaScript</a> 
      </div> 
     </div> 
     </div> 
     <div class="editbox"> 
     <textarea aria-label="JavaScript Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="javascript"></textarea> 
     </div> 
    </div> 
    ... 
    </div>

Edit 2:

после ответа на Ankit vadariya, я сделал a minimum case ... Существует только одна вещь, слева: как обеспечить min-width от .panel-right? Это, кажется, не работает на данный момент ...

Один из способов установить max-width из .panel-left, но если мы посмотрим на JSBin, нет предела max-width для каждой панели, в то время как есть min-width ...

источник

2016-12-21 Anonymous

Вы пробовали что-нибудь? Посмотрите на это: 'https: // jqueryui.com/resizable /' вам нужно, чтобы ваши текстовые области были на 100% в пределах разделяемых размеров div. – oompahlumpa

Вот [пример] (https://jsbin.com/davedunuho/2/edit?html,output) с 'resizable', я не вижу, как сохранить сумму двух ширины константой. –

Это не то, как работают стандартные текстовые поля. Вы должны создать свой собственный JS, который, вероятно, не тот, который вы на самом деле хотите. – andi

Here is the your solution

Надеюсь, что это сработает для вас.

Код

$(".panel-left").resizable({ 
    handleSelector: ".splitter", 
    resizeHeight: false 
}); 

$(".panel-top").resizable({ 
    handleSelector: ".splitter-horizontal", 
    resizeWidth: false 
});

CSS

html, 
body { 
    height: 100%; 
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    padding: 0; 
    margin: 0; 
    overflow: auto; 
} 

.page-container { 
    margin: 20px; 
} 


/* horizontal panel*/ 

.panel-container { 
    display: flex; 
    flex-direction: row; 
    border: 1px solid silver; 
    overflow: hidden; 

    /* avoid browser level touch actions */ 
    xtouch-action: none; 
} 

.panel-left { 
    flex: 0 0 auto; 
    /* only manually resize */ 
    padding: 10px; 
    width: 300px; 
    min-height: 200px; 
    min-width: 150px; 
    white-space: nowrap; 
    background: #838383; 
    color: white; 
} 

.splitter { 
    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; 
} 

.panel-right { 
    flex: 1 1 auto; 
    /* resizable */ 
    padding: 10px; 
    width: 100%; 
    min-height: 200px; 
    min-width: 200px; 
    background: #eee; 
} 


/* vertical panel */ 

.panel-container-vertical { 
    display: flex; 
    flex-direction: column; 
    height: 500px; 
    border: 1px solid silver; 
    overflow: hidden; 
} 

.panel-top { 
    flex: 0 0 auto; 
    /* only manually resize */ 
    padding: 10px; 
    height: 150px; 
    width: 100%; 
    white-space: nowrap; 
    background: #838383; 
    color: white; 
} 

.splitter-horizontal { 
    flex: 0 0 auto; 
    height: 18px; 
    background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353; 
    cursor: row-resize; 
} 

.panel-bottom { 
    flex: 1 1 auto; 
    /* resizable */ 
    padding: 10px; 
    min-height: 200px; 
    background: #eee; 
} 

label { 
    font-size: 1.2em; 
    display: block; 
    font-weight: bold; 
    margin: 30px 0 10px; 
} 

pre { 
    margin: 20px; 
    padding: 10px; 
    background: #eee; 
    border: 1px solid silver; 
    border-radius: 4px; 
    overflow: auto; 
}

HTML

<html> 
<head> 
    <title>Simple Split Panels - jquery-resizable</title> 
    <meta charset="utf-8"/> 
</head> 
<body style=""> 
    <div class="page-container"> 

     <h1> 
      jquery-resizable - A simple splitter panel 
     </h1> 
     <hr /> 

     <p> 
      Simple example that demonstrates how to create slidable two-pane layouts <a href="http://caniuse.com/#search=flexbox">using FlexBox</a> and the resizable plug-in. 
      Note that Flexbox is not required, but used here to keep the layout simple. 
     </p> 

     <label>Horizontal Splitter Panes:</label> 

     <div class="panel-container"> 

      <div class="panel-left"> 
       left panel 
      </div> 

      <div class="splitter"> 
      </div> 

      <div class="panel-right"> 
       right panel 
      </div> 
     </div> 

     <label>Vertical Splitter Panes:</label> 
     <div class="panel-container-vertical"> 

      <div class="panel-top"> 
       top panel 
      </div> 

      <div class="splitter-horizontal"> 
      </div> 

      <div class="panel-bottom"> 
       bottom panel 
      </div> 
     </div> 



     <hr /> 

     <p> 
      This example creates two resizables for the horizontal and vertical splitter panes: 
     </p> 
<pre> 
&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js&quot;&gt;&lt;/script&gt; 
&lt;script src=&quot;../src/jquery-resizable.js&quot;&gt;&lt;/script&gt; 
&lt;script&gt; 
    $(&quot;.panel-left&quot;).resizable({ 
     handleSelector: &quot;.splitter&quot;, 
     resizeHeight: false 
    }); 
    $(&quot;.panel-top&quot;).resizable({ 
     handleSelector: &quot;.splitter-horizontal&quot;, 
     resizeWidth: false 
    }); 
&lt;/script&gt; 
</pre> 
    </div> 


</body> 
</html>

источник

2016-12-21 19:33:58

Это не показывает текстовые поля, о которых ОП спрашивал конкретно. – andi

Вы можете заменить его текстовой областью. –

Сделать css как скрыть границу области текста и сделать textarea 100% родительского div –

Единственный способ, которым я могу видеть, чтобы сделать это, используя что-то вроде JavaScript и анализа в реальном времени ширины один, чтобы другой мог прибавить до 100%.

источник

2016-12-21 20:13:51 psiclone

Сделайте два текстовых поля рядом друг с другом, используя гибкую границу

ответ

Смежные вопросы