9

In my angular app, I'm using ui-sortable to sort an <ul>.

The elements itself are resizable.

This is similar to the setup I have:

enter image description here

And I would like that "4" and "5" use the space on top of them:

enter image description here

Here is a fiddle. Please note that this is an oversimplified example, and that the elements are actually resizable by the user and sortable.

Libraries like masonry won't do because they use absolutely positioned elements, that will undo the way the ui-sortable works, the resize won't push the element's either.

So how can I achieve this?

  • Have I understood correctly that this is not possible with a css only solution? That flexbox will get the height of the highest element and put that height to the "row".
  • Is there any js solution that won't rely on position: abolute, or rather, that it will still let me sort?
  • What are my options without getting rid of the libraries I already have?
  • What are my options getting rid of the libraries I already have?
Trufa
  • 35,711
  • 41
  • 118
  • 180
  • Your elements seem to be arranged in columns with each child element in a column being of equal width. If that's the case then you can indeed use flexbox to arrange your elements. Just have 3 container divs (1 for each column) with `display:flex`, `flex-direction:column` and assign each child div `flex:1 1 auto`. Set the `width` and `height` of your container divs. – markE May 07 '15 at 04:44
  • This is an oversimplified example, the boxes are any size basically (and changed by the user), the only thing I can guarantee is that they keep a certain proportion/ratio. – Trufa May 07 '15 at 16:54
  • 1
    So all elements grow or shrink proportionally to their original sizes? Then my commented solution still works. Anyway, using an external library like Masonry or Isotope is probably easier than using flexbox and moving your children between column containers. BTW, If you want to "roll-your-own" you can Google "bin packing algorithms". Good luck with your project! – markE May 07 '15 at 17:02
  • @markE hmm no, I don't think I have fully explained the problem, since the sortable goes from left to right, top down, and the elements are completly resizable, so if I do a column layout, the "waste of space" that I have vertically will be horizontal when you the box grows, as the column will take the size of the biggest element, or wont it? – Trufa May 07 '15 at 19:25
  • 1
    "the elements are completely resizable" == not a good fit for FLEXbox! An ironic statement, yes? Flexboxes are directionally flexible--they either flex vertically or horizontally but not both at the same time. Children can be stretched to fill the empty space, but that just puts the empty space inside instead of outside the children. Solve with Masonry, Isotope or something similar. – markE May 07 '15 at 20:05
  • doesn't isotope solve your problem? – amirouche Aug 22 '15 at 15:14
  • What you are looking for (provided you don't want to do it with JavaScript) is CSS Grid Layout (https://www.w3.org/TR/css-grid-1/). Unfortunately, adoption is still on the experimental level (as referenced here: http://caniuse.com/#feat=css-grid). Might be worth keeping in mind for future reference, though. – Fredrik Frodlund Feb 04 '16 at 12:58

1 Answers1

-1

I believe I have had a similar issue. I ended up going with http://isotope.metafizzy.co . Then once the user changes the size of the box (or order), you can run a method on the UI callback to re-layout the boxes: http://isotope.metafizzy.co/methods.html#layout

Action_Turtle
  • 128
  • 11