Jquery layout resizable not working

Question

I can not manage to get the jquery-layout plugin's options to set. The default renders correctly, but the options don't. I attempt to set resizable and slidable on document ready, but when I alert for resizable it returns false. Can anyone spot what's going wrong here?

js:

$(document).ready(function() {  
var myLayout = $('body').layout({
   west: {
   resizable: true,
   resizeWhileDragging:   true,
   slidable:              true
   }

});
alert(myLayout.options.west.resizable); //returns false
});

html:

<body>

<div class="ui-layout-center">Center
    <div id="board">        
    </div>  
    <button onclick="set_board();">New Game!</button>
    <button onclick="execute_turn();">Turn!</button>
</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</body>

Hiya man - do you mean Layout plugin? http://layout.jquery-dev.net/documentation.cfm ; I am not sure if Jquery has `.layout` API, please let me know, might be able to help you out, cheers — Tats_innit, May 19 '12 at 04:01
Cooleos, is this what you are looking for? **working demo** http://jsfiddle.net/wy69R/4/ please let me know if this help, I will set it as answer, — Tats_innit, May 19 '12 at 04:54
i just want three columns that can be resized. i don't see what's different in your example from my code than applyDefaultStyles: true .. which I tried but still doesn't work :( — valen, May 19 '12 at 05:06
can you please jsfiddle the issue might be something small, I can take a look. — Tats_innit, May 19 '12 at 05:09
Are you using jquery 1.9 or older? I have the same problem with 1.8.3, so maybe it has something to do with that? — Tiquelou, Jun 30 '13 at 20:36

score 12 · Answer 1 · edited Mar 27 '14 at 10:25

12

It works for me when jqueryui is included also, like in the jquery-layout Simple demo at http://layout.jquery-dev.net/demos/simple.html.

Make sure that you first include jquery-ui, and then jquery.layout, else it won't work.

Example:

<script src="lib/jquery/jquery-ui-1.10.4.js"></script>
<script src="lib/jquery/jquery.layout-1.3.0-rc30.79.js"></script>

edited Mar 27 '14 at 10:25

Domi

22,151
15
92
122

answered Mar 25 '14 at 08:23

codeless

201
3
3

2

This is the correct answer. Had quite a headache with this, until I realized that I included the two in the wrong order. – Domi Mar 27 '14 at 10:25
1

Thanks for this! Solved my issue. I think it would be good for the developers of this plugin to provide a stripped back 'simple' example that is actually simple - ie a minimal multi-paned layout with resizable panels, but without all the extra bloat/buttons/inline events etc. That would be the most commonly required example. There's no problem with having the 'bloat/buttons' version - but maybe give it a different name. – Manachi Jan 10 '15 at 23:08
+1 + nice to have imporovement for this correct answer - mention also the jquery , thus the correct order for the libs loading is jquery,jquery-ui,jquery-layout – Yordan Georgiev Jan 01 '16 at 08:13

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

2018 update for Webpack users

as @codeless have mentioned you need to load 'jquery-ui' prior to layout (by explicitly importing 'jquery-ui' first), but make sure you're also loading 'resizable' and 'draggable' modules of jquery-ui

import 'jquery-ui/ui/widgets/resizable';
import 'jquery-ui/ui/widgets/draggable';

otherwise pane resize won't work

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 10 '18 at 15:39

Roman86

1,990
23
22

score 0 · Answer 3 · answered May 19 '12 at 04:32

You're initializing the layout plugin twice... try conslidating the myLayout definition and initialization options:

$(document).ready(function() {
var myLayout = $('body').layout({
   west: {
   resizable: true,
   resizeWhileDragging:   true,
   slidable:              true
   }

});
alert(myLayout.options.west.resizable); //returns false
});

Jquery layout resizable not working

3 Answers3

2018 update for Webpack users