So i have x amount of "blocks" that I want to float left.. Like this :
A B C D
E F G H
BUT, if B is twice as long as the rest, for example, there would be white space between A & E, C & G, D & H.
How can I avoid that and just have all the containers float to the left and then fit in nicely without excess white space in between ?
CSS cannot handle this in the general case.
If there are a fixed number of columns, you can cheat and do this: http://jsfiddle.net/suaaK/11/
Otherwise:
See this answer for a comparison of the candidate techniques, showing that they don't work:
CSS Floating Divs At Variable Heights
If you're willing to use JavaScript, you should use jQuery Masonry.
Demos:
http://masonry.desandro.com/demos/animating-css-transitions.html
http://masonry.desandro.com/demos/adding-items.html
Set up your CSS into vertical columns versus horizontals. Smashing Magazine has a great piece about floats and their quirks, go take a look: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Related
I am trying to refamiliarize myself with CSS after a decade or two of being away.
The current challenge I am trying to solve is being able to display an alphabetized "list" of cards (hundreds of them) that sort top-to-bottom across multiple columns.
In a perfect world, I would like the column number to automatically adjust by the available width (cards will be fixed size)... and I would like the height of the grid/flex container to be responsive - based on how the items get distributed amongst the available columns.
In the attached image, I have an old HTML layout using TABLES and I had to manually enter where each item appeared, and in what column. If I added more items that begin with the letter "C"... then I needed to manually move the markup around so as to reflow the columns "evenly".
Old way using HTML Tables
I want the new way to be a "card" (for ease of explanation) for each pair of icons and label.
When I try using FLEX or GRID containers and set the flow to column, the ONLY way I can get the cards to flow to any additional columns is to set a fixed height of the container - which is the opposite of what I need. I would rather a solution (if it is possible) that will try to distribute all the cards across available colums and let THAT dictate the height... and have it responsively re-flow as the browser is resized.
So far, all searches have come up flat - no solution.
UPDATE/EDIT:
For example, I want the vertically sorted items to wrap into new columns equally until the last column has extra space, so maybe a list of a-thru-z might look like:
a h o v
b i p w
c j q x
d k r y
e l s z
f m t
g n u
If you drag the browser wider to allow for more columns:
a g m s y
b h n t z
c i o u
d j p v
e k q w
f l r x
or narrower...
a j s
b k t
c l u
d m v
e n w
f o x
g p y
h q z
i r
Height is dictated by the "equal" reflow of column contents amongst the columns
(Sorry for using the code snippet the wrong way)
But hopefully it clarifies my desire... which I fear is not possible.
EDIT #2:
I had already contemplated a semi-dynamic solution of just setting #media queries to change the container height based on screen width, but it's not a solution that factors in a change in amount of content or someone increasing browser font size that would grow the card sizes... it'd still be pretty hands-on manually adjusting for various widths and changes to content quantities.
most of my coding problems are usually solved very easily by searching on here (hence this is my first post) but for this one I just can't find an answer.
I've made a simple bootstrap grid using the w3 tutorials.
I have columns A, B, C. Column A has only 1 element (a google map), columns B and C have 4 rows each (let's call them B1-B4 and C1-C4):
What I have made (large screen)
When I resize the browser window such that it turns into a mobile size screen it shows just 1 column in the order of A, B1-B4, C1-C4.
What I get when I re-size
What I want is it to re-order the columns to A, B1, C1, B2, C2, ..., B4, C4
What I want when I re-size
If anyone has the solution, or can point me in the right direction I would be most grateful.
Thanks in advance.
You can't reorder columns in pure Bootstrap 3 without using a minimum of Javascript.
One workaround could be to have hidden columns at the cost of containing twice your data using hidden-sm, hidden-md, hidden-lg and hidden-xs classes to hide columns according to the device as explained here.
Complete Flexbox Guide
You can use flexbox ordering to set the order of your children elements however you like. So if you wanted A, B1, C1, B2, C2, you could set A to 1, B1 to 2, C1 to 3 and so on.
However lets say you had like an unknown / infinite number of items for B or C, you could wrap B and C in a flex container, and set the order there, and then inside that, set the order for individual items.
Even better, start using CSS Grid, the successor to flexbox. I don't have too much experience with CSS Grid, but it looks like you can define the order, just like flexbox.
CSS Grid by Example - Mozilla Developer Network
I am using semantic-ui's grid, which is a sixteen column grid system. Initially, I am displaying multiple rows containing two eight-wide columns each. All of the columns are initially an equal height.
When initially rendering all of the columns, the user will see something that looks like this -- where each line is a row, and each column is a letter:
a b
c d
e f
g h
There is a user interaction that increases the height of a selected column. So if increasing the height of 'a', for example, the current behavior after increasing height will render something that looks like this:
a b
a .
a .
a .
c d
e f
g h
The increased height of 'a' will increase its row height so that the bottom of 'b' is above the bottom of 'a'. The columns in the bottom (last) row will always be aligned (unless increasing the height of 'g' or 'h', which are the bottom).
The desired behavior that I would like after increasing height of column 'a':
a b
a d
a f
a h
c
e
g
In other words, from a user's perspective for this case I'd like to push everything in the first column down but leave everything in the second column the same.
As I said, I am using semantic-ui so answers in relation to that would be great, but I am not sure how I would do this with bootstrap or other grid systems.
I am not interested in using jQuery Masonry. Perhaps thinking in terms of a grid layout for this is not correct, but I am curious if anyone has solved this problem in any simple ways that aren't coming to mind.
Here is a demo on jsfiddle:
https://jsfiddle.net/ne64wkmm/1/
This problem is different from testing if one rect is in another rect.
Known information is the sides length of two rects.
How to calculate if one rect can be put into another rect?
This is a great question! If and only if one of these conditions is satisfied does a smaller rectangle with sides p and q (p >= q) fit completely into a larger rectangle with sides a and b (a >= b):
or
See this for reference.
So if we had variables a, b, p, q, we could check if such a rectangle arrangement would be possible by evaluating:
(p <= a && q <= b) || (p > a &&
b >= (2*p*q*a + (p*p-q*q)*sqrt(p*p+q*q-a*a)) / (p*p+q*q))
EDIT: Thanks to #amulware for posting this alternate version in his comment:
The first check one would do is of course whether the rectangle fits inside the other in either of the axis aligned orientations.
If not, the only option for it to fit is diagonally, but there might actually be many angles for which it fits, the difficulty is, not just guessing but indeed calculating a possible angle, if one exists.
Now, notice that if the inner rectangle does indeed fit diagonally, then you can rotate it until two if its opposite corners touch either both the top and bottom edge of the outer rectangle, or the left and right. (In your diagram more or less the first.)
In that case you already know that you have fit it inside in that one dimension(in the example, the y-axis). You then have to calculate the bounding width of the inner rectangle in the other dimension and check that against the width of the outer box.
There might be a smarter algorithm out there for this, but I am 100% sure that what I describe works. Let me know if you can figure out the math for this yourself(if you think this is a good solution), if not, I might have a go at it later. I wonder if my algorithm can be implemented completely without trig functions...
EDIT:
Ok now, I could not resist...
Here is the math I did to solve the problem as outlined above:
(Sorry, only in image form, I hope my handwriting is readable.)
I would be happy if someone could check my math. I do not see anything wrong with any of the steps right now, but it is always better to have someone else check.
(And of course: Use this at your own risk.)
If anyone finds anything wrong with this algorithm, please let me know and I will fix it as soon as possible.
Also I would be highly interested to see if anyone has a better solution, involving less complicated math. Maybe a vector based approach?
Well, it looks like A.R.S. solution is true, still I'll try to post my solution, it's harder, but it'll let you to build a concrete embedding of one rectangle into another (if possible).
Let us suppose that a>b and p > q. Solution is obvious if a > p and b > q. The problem can also be solved if a<p and b>q. Take a look at the attached photo, in it you'll need only last system of inequalities (if you interested you can look how it was derived)
All you need is to make sure that last system of inequalities has a solution lying between 0 and 1. To do it you need to solve each inequality as equation (as usual quadratic equation). If there are no solution (that's improbable) the solution of inequality is whole real line. If equation has two (maybe equal) solutions t_1 and t_2 the solution of inequality is segment [-infinity, t_1] united with [t_2, infinity]. After you got solutions of both inequalities you should intersect them. Now we should recollect that t is cos of an angle (between 0 and pi/2), so inequality should have solutions between 0 and 1. In that case second rectangle can be embedded into first one. And if you take e.g. t_1 (smaller root of equations) you can build a concreate embedding of rectangles.
You can weed out the two simple cases fairly easily:
If the larger dimension of the second is smaller than the larger dimension of the first, and if the same is true for the smaller dimensions, then the second fits inside.
If the larger dimension of the second is greater than the hypotenuse of the first, then the second will not fit in the first.
The hard part is working out whether it can fit in at an angle such as in your sketch. I don't know of a simple formula -- it probably requires a plug-and-chug solution.
Might be a good question for the Mathematics Stack Exchange site.
Added: I'm not 100% sure if this, but I think that if the hypotenuse of the second is smaller than the hypotenuse of the first then it will fit.
Oops: Nope -- I'll take that back. But if the hypotenuse of the second is larger than the hypotenuse of the first it won't fit.
I want to repeat a background image that is rotated. Trying to make it seamless is destroying my soul.
Starting with something simple, consider each image is laid out like bricks. Creating a seamless repeating background image is pretty simple:
(the red area is the crop). You can see this working as expected at http://jsfiddle.net/mPqfB.
Now let's say I want to rotate the image by 45 degrees:
Unfortunately, the same crop no longer works, as you can see on http://jsfiddle.net/mPqfB/1.
I'm trying to figure out how to crop the image correctly so that we have a seamless repeat. There's probably some fairly trivial maths involved to do this but I can't for the life of me figure it out.
[Update]
I'm attempting to follow #oezi's calculations so to make things easier have created an image of dimensions: 100px x 50px.
Therefore:
Least Common Multiple = 100
Hypotenuse = 1002 + 1002 = 20000
Now I'm assuming this means we don't have to create an image of 20000px x 20000px. Am hoping that #oezi can clarify how he performs his resizing??
If this is a2 + b2 = c2 is equal to c = square root of (a2 + b2)
Then we can concur that our crop should be 141px?
Finally, this doesn't actually explain where we take the crop from?
[Update 2]
It does look like this is how the resize should be created. Taking a 141px x 141px crop of the image yielded the correct results - http://jsfiddle.net/EfuV2/
As far as where to crop from, it doesn't actually matter!
is the rotation is exactly 45 degrees, you'll have to find out the least common multiple of the width and height of your unrotated pattern.
in your case, that's 15100 (width 100 and height 151)
it would be much better to scale your pattern to width 100 and height 150, so the least common multiple is only 300
Take that number and some math (pythagorean theorem). Assume your number is the length of the two short arms and calculate the length of the hypotenuse - that's our result (make a square image of that size to get your pattern).
in your case, that's 21355
with resizing, it's ~ 424
Note that this is just typed straight from my head because i can't try it out practically at the moment - but i'm really sure it's correct.
edit: a fast (and messy) test got me to this:
http://i.imgur.com/rZuu9.jpg
http://jsfiddle.net/mPqfB/2/ (click the image-link first, otherwise jsfiddle doesn't show the image)
accidentally i made the pattern only be 423 in height and the rotation isn't perfect (don't have photoshop here), but it's good enough to prove that my math is correct.
The trick is to crop the pattern at points where the section being cut off matches the section remaining on the opposite side of the crop area (see example cuts in blue). It'll probably take some trial and error to get it right but you should be able to do it easily enough.