Masonry: Fit Width but maintain maximum container size? - jquery-masonry

Per the example in the Masonry documentation, http://masonry.desandro.com/options.html, I centre my Masonry layout by setting isFitWidth = true, and setting {margin: 0 auto} on the Masonry container.
When I have loads of items to display this is a really nice solution. For example, let's say my viewport is just over 5 columns wide, I will see all the items laid out, 5 to a row, and the whole container centred within my viewport. Lovely.
The problem arises when I have less than 5 items. In this case, the container remains centred in the viewport, but it shrinks to fit the number of items. So if I have, for example, two items, I will have two columns in the middle of the screen, with one item each.
What I would like to see is the container maintain is size (in this example, 5 columns), and remain centred, and lay the content out LTR (in my case).
I have experimented with media queries and setting a minimum width for the container based on the viewport. This looks like it will work, but it's messy - I don't fancy having to update the media queries (including recalculating all the gross container widths) each time my column size changes. (I'm sure users will want some changes).
Another solution might be to add some fake items to the content and set their visibility to hidden, but this is not exactly elegant either.
Is there a more simple solution that I'm missing?
One additional point - I am stamping some items in place too, top left and top right. I don't think this should affect any solutions.

OK, So the only way I could find to do this effectively was to use media queries. I setup a spreadsheet to help recalculate things when I changed column and gutter sizes. Here's the variables and equations, in case they are helpful:
If:
WC = Width of column
WG = Width of gutter
N = Number of columns
CON = Width of container
Then:
CON = N*WC + (N-1)*WG
You can set up a spreadsheet and experiment with WC and WG, and a range of N=1...10 This will give you the size of CON for each value of N. The width of the viewport needs to be CON plus any horizontal margin and padding on CON (or its parent).
To set media queries I took the approach that the container should be as wide as possible, but still neatly accommodate exact columns. So, for example, if the viewport can accommodate 5 columns, (but not quite 6), I set the corresponding min-width on CON. This leave the container neatly centred.
By way of example, here is one of my media queries:
#media (min-width: 996px) and (max-width: 1361px) { .content-container { min-width: 966px; } }
I hope this is helpful to someone. I'll leave the question open for a few days in case there are other solutions forthcoming.

Related

How to set a static width for a gantt cell

I'm using dhtmlx gantt component to render a Gantt chart and I need each cell in the timeline to have a fixed width, 10px for example, I tried to use the attribute min_column_width and it does make the columns smaller but it's not using the desired width, is there any way to use a static width?
Here is a snippet https://snippet.dhtmlx.com/5/c4362d05c
And I need each one of these cells (the ones of the headers and the ones where the tasks are) to have a fixed width. I appreciate any help or insight on this :) Thanks for reading!
Unfortunately, there is no built-in way to set a fixed timeline cell width. The dev team will try to add that feature, but I cannot promise that.
For now, you need to implement a custom solution.
The timeline cell width depends on several things:
• The gantt.config.min_column_width parameter.
• The displayed date range.
• Gantt container size.
When there are many cells displayed in the timeline so that all of them won't be able to fit the Gantt container size, Gantt uses the min_column_width parameter and adds a scrollbar.
If the cells are able to fit the Gantt container size or even take a smaller size, Gantt stretches them.
So, to have the exact timeline cell size, you need to increase the visible date range:
http://snippet.dhtmlx.com/5/f4f37b79b

Scale down an image dynamically

In my SVG picture there are some text labels that are displayed dynamically in top part of the image. In some cases (i.e. smaller screen size, bigger font size), they partially disappear outside the vievBox (like if overflow: hidden; was set) - see the picture (the long word in the middle is the overflowing label).
My idea is to scale down the image so that the labels are visible. How to achieve this?
In my case, I had quite wide bottom margin, so I could afford moving the whole image down to uncover the top part.
Final solution was wrapping the whole image with <g transform="translate(0,10)">.
The first value refers to left-right movement, the other one to up-down (positive values move the image down, negative - up).

Susy: fluid columns with fixed gutters?

I'm trying to build a 12 column grid with fluid columns and fixed gutters. Columns would change width as the window resizes, but the gutters would remain constant. Basically, percentage for columns, ems for gutters.
Is this possible with Susy?
You could use the padding as your gutter and would allow you to have a fixed "spacing" while keeping the fluid nature of the grid.
This would however force you to add extra markup if you need backgrounds that doesnt extend to the "gutter" area.

Different size items in a VariableSizedWrapGrid

The app I'm working on uses a grouped GridView. Different templates are being used for different items on display and this is causing me an issue with the layout because the VariableSizedWrapGrid sets the row & column sizes based on the first item in each group.
I've tried to use the commonly-suggested solution of PrepareContainerForItemOverride and I'm encountering two problems:
It seems that I can only adjust the height & width around multiples of the column & row spans. That can leave me with quite a bit of wasted space if, say, item #2 needs to have 1.5 x the row height of item #1. I also seem to have to "guess" at what the most appropriate multiple is, which doesn't seem to be appropriate when apps are supposed to scale dynamically.
If I get the multiples too big, the content is horizontally & vertically centred. I've tried changing the alignment from stretch to left in various places but I cannot find which control property to set to get this to work.
Is there a better way of adjusting the item sizes than grid spans? If there isn't, is there a better way for me to lay out my content with variably sized items?
Thanks.
http://winrtxamltoolkit.codeplex.com/ includes WrapPanel which does the job perfectly. It stacks the individual items either horizontally or vertically and wraps onto the next row/column as required.

Box plot with labels and axes, fitted to a div with fixed dimensions

Following the provided example I built a function that draws a box plot to a jQuery accordion tab, which has a certain fixed height & width. The amount of distinct categories varies greatly depending on the incoming data. Currently I'd like to achieve the following in the plotting:
1) Add axes and display labels, like in this picture
2) Always fit the boxes to container width and height. Currently I see that if there are too many categories, some of them end on the second row, ensuring they're not fully seen. In the picture, the div contains 7 boxes but only 4 fit on one row:
The question is how can these two be implemented? I couldn't even figure out a way to reliably reduce the padding between the boxes without eating into the side numbers on the boxes.
I adopted the original d3.js example to include axes:
http://bl.ocks.org/jensgrubert/7789216
Instead of using individual svg elements as in Mike's implementation, here all boxplots are rendered with in one root element. This makes it easy to add axes.
Best,
Jens
For the time being I'm using a hack found at Highcharts forum (jsfiddle here). There's also a box plot implementation made with Raphael.js that looks cool (github, example)

Resources