Databases
StackOverflow2013
Postsdbo
POjQuery splitter issue div not resizing
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery splitter issue div not resizing
    primarykey
    data
    text
    <p>I am using a jQuery plugin for splitters at <a href="http://methvin.com/splitter/4psplitter.html" rel="nofollow">http://methvin.com/splitter/4psplitter.html</a>. In my case I need two columns vertically split and inside of those two rows horizontally split. In other posts I have seen people mention using different plugins to achieve this, unfortunately, the decision was made by others to move forward with this plugin. </p> <p>All of the splitters appear and are draggable, the vertical one works perfectly, however, the horizontal ones are draggable but they do not resize. Instead, the lower divs drag up and down, on top of the top div or creating a gap between them as if they are not bound. I will post my layout below.</p> <p>One thing to note here that I found unreasonable is that while dragging the splitters, both types, I see max call stack exceeded error in the jQuery library (1.7.2), in the camelCase method. </p> <p>Please let me know if more information is needed, I am at a total loss as to why these do not work.</p> <p>The HTML:</p> <pre><code>&lt;div id="splitContainer"&gt; &lt;div id="leftSplitter"&gt; &lt;div id="leftSplitterTopPane"&gt; &lt;div class="webpartHeader" style="border-bottom: 5px solid white;"&gt; &lt;span class="webpartHeaderSpacer"&gt;Header&lt;/span&gt; &lt;/div&gt; &lt;div id="LeftTop_Container" class="webpartBody" style="height: 200px; overflow: auto;"&gt; &lt;br /&gt; &lt;!--TopLeft--&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="leftSplitterBottomPane" style="border-right:5px solid white;"&gt; &lt;div class="webpartHeaderBottom" style=" height:25px; border-top:5px solid white; "&gt; &lt;span class="webpartHeaderSpacer"&gt;Header&lt;/span&gt; &lt;/div&gt; &lt;div id="LeftBottom_Container" class="webpartBody"&gt; &lt;br /&gt; &lt;!--BottomLeft--&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="rightSplitter"&gt; &lt;div id="rightSplitterTopPane"&gt; &lt;div class="webpartHeader" style="border-bottom: 5px solid white;"&gt; &lt;span class="webpartHeaderSpacer"&gt;Header&lt;/span&gt; &lt;/div&gt; &lt;div id="RightTop_Container" class="webpartBody" style="height: 200px;"&gt; &lt;br /&gt; &lt;!--TopRight--&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="rightSplitterBottomPane"&gt; &lt;div class="webpartHeaderBottom" style=" height:25px; border-top:5px solid white;"&gt; &lt;span class="webpartHeaderSpacer"&gt;Header&lt;/span&gt; &lt;/div&gt; &lt;div id="RightBottom_Container" class="webpartBody"&gt; &lt;br /&gt; &lt;!--BottomRight--&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The CSS:</p> <pre><code>#splitContainer { height: 469px; width: 100%; } #leftSplitter { height: 480px; width: 100%; } #rightSplitter { height: 480px; width: 100%; } #leftSplitterBottomPane div { overflow: auto; } #leftSplitterTop div { overflow: auto; } #rightSplittertopPane div { overflow: auto; } #rightSplitterBottomPane div { overflow: auto; } #splitContainer div { overflow: hidden; } .hsplitbar { height: 5px; background: #aaa; margin-bottom: 2px; } .vsplitbar { width: 5px; background: #aaa; top: 0; } #RightBottom_Container { height:187px; } #LeftBottom_Container { height:187px; } </code></pre> <p>The Javascript:</p> <pre><code> $(document).ready(function () { $("#leftSplitter").splitter( { type: "h", accessKey: "J", resizeToHeight: true, }); $("#rightSplitter").splitter( { type: "h", resizeToHeight: true, accessKey: "P" }); $("#splitContainer").splitter( { type: "v", outline: false, sizeLeft: 250, resizeToWidth: true, accessKey: 'I' }); }); </code></pre> <p>Fixed during development; later refactored into different language. No longer relevant. </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAnthony Mason
    1. USAnthony Mason
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload