JQuery Portlet - Is it possible to have varying portlet sizes?

Question

I am using the portlet function of JQuery UI to create a basic portal page. The example on the JQuery UI page shows a pretty simple example with 3 columns and fixed size portlets that fit into those columns. Is there a way to approach this such that varying sized portlets can be used.

Specifically, if i have 3 columns i would like the ability:

1) To have one portlet that spans all 3 columns (3*1) 2) To have one 2*1 portlet and one 1*1 portlet on the same row, thereby taking up all 3 columns 3) Have any variation thereof.

I would greatly appreciate if anyone could give me any pointers,

Thank you

JP

Arcadia

Answer 1

http://jsfiddle.net/93F2T/

Based on display as a grid. Use one sortable, and let your portlets wrap to the next line when there's not enough space.

.portlet {
    display: inline-block;
    vertical-align: top;
}

Transferase

Alexey, I came across the sortables example but have the following issues with the solution: 1) they are not technically portlets and appear to be missing a number of features of portlets (title bar, icons for closing, collapsing etc.) 2) In the example you provided things are pretty much hard coded. What if I wanted to add a third row (similar to 1,2) and move items between the two rows. Similarly, to reorder your example i must move div 3 (i cannot move div 1 and 2 above div 3)... – Arcadia

1) I did this to make things easier to understand, simply replace them with portlets, see my updated example. 2) You'd either have to put everything in one sortable, or code up your own solution without jQuery draggables. – Transferase

I realize this answer is over a year old but the links to the examples are no longer working. Any chance of getting them back up or posting the code for the solution instead? – Hildegaard

@Ron, jQueryUI site disabled hotlinking, here's an updated link: jsfiddle.net/w7ZvQ – Transferase

@AlexeyLebedev, I've portlets with different heights based on their content. So, it leaves some space between each portlet when they are arranged unevenly. modified fiddle. Is there any way correct it? – Detector

@iSid, Not in general case, for example how would you avoid a gap here: imgur.com/K3KQOMQ but if all portlets have the same width, and you want Pinterest style layout, you can create several sortables side-by-side, and allow dragging between them: jsfiddle.net/4zKp9 – Transferase

@iSid or if you simply want to prevent this imgur.com/LoMdnQP, and want portlet headers to always align, you can make them inline blocks: jsfiddle.net/e4Y2r – Transferase

@AlexeyLebedev Not sure if I understand that. Although, I found this which worked for me. Any ways, very thanks for coming forward to offer a solution. – Detector