I've been playing around with Zurb Foundation to evaluate it's suitability for my next project. I stumbled upon a characteristic I'm not comfortable with when resizing the width of the browser so I'd like to confirm if there is any way to do it.
Say I have a grid with four images ('columns') per row. As I shrink the width of the browser window my natural expectation would be that the amount of images would shrink down to first three, then two and finally one image per row as the width reduces.
But instead what Foundation seems to do is shrink the divs as much as it can to keep the four columns per row and as it runs out of space to have four it jumps right down to one image per row directly.
This behavior to me is not logical so I assumed there must be a way to do it, but going through http://foundation.zurb.com/docs/grid.php I wasn't able to find a way to do it either with divs or block grids.
I sort of assumed this would be 101 functionality of responsive grids, but I don't have much experience on these css frameworks. So do I have to start writing my own media queries instead to achieve such gradual decrease with amount of columns per row?
Thanks!
I was also having same problem and that's how I found this entry.
I know this has been answered already and solved but I just wanna share my answer.
Block Grid works for me. http://foundation.zurb.com/docs/components/block_grid.html
See Advanced section
In my HTML, I just added the classes to specify how many items I want per row on different screen sizes, like this:
<ul class="row portfolio small-block-grid-1 medium-block-grid-2 large-block-grid-3">
<li>
<img src="images/sample1.jpg" width="640" height="480">
</li>
<li>
...
</li>
</ul>
Here, I want 1 item to be displayed in small device, 2 in medium, and 3 in large devices per row. I enabled the "foundation/components/block-grid" in _app.scss. And it worked! :)
Foundation does not force the content to be responsive or fluid, but the grid itself is. It's fluid down to a certain point where the 12 column grid collapses to the mobile grid. (assuming default grid setup)
However, you can get the behavior you are looking for by simply making your all images floating left inside a column.
Like:
img {float:left; width:24%;}
Then try adding min- and max-width to fit your needs.
img {float:left; width:24%; min-width:100px; max-width:300px;}
Related
I am working on a page where there are two rows in the header.
The first row has a "My Account" icon, Company Logo, and Logout.
The second row has a navigation bar.
When the Focus Ring/Focus Indicator highlights an item on the first row, the bottom of the focus ring is cut off by the navigation bar in the second row.
I am not allowed to change the spacing of the elements on the DOM.
Is there a way I can change the layering so that all of the elements on the page are not changed in size or location, but the Focus Ring is not cut off by the navigation bar?
The site built with React.
I've tried googling a number of things, but haven't turned up much specific to this issue.
I'm a little new to programming (my first job, first year). I'm not totally sure where to even start.
You are looking for z-index. The second element is positioned in front of the first element and so it covers the focus indicator.
This allows you to specify how far 'forward' elements are on the page.
Assuming nothing is using fixed or absolute position within the <div>s you are working on this should solve your issue.
i.e.
<div class="container">
<div id="behind" z-index="1"></div>
<div id="infront" z-index="0"></div> <!--The z-index is not really needed here so try without it first, it is to illustrate that the item in front at the moment should have a lower z-index than the one at the back-->
</div>
You may need to play with the z-index in order to get this to work (you can go to 999999 without a problem, but try and use as low a number as possible).
You may also have to fiddle with heights of elements if the site is poorly designed but without a code example I can only offer general advice and gotcha's
Without a code example it is difficult to suggest a solution, but it sounds like your two rows are overlapping, and thereby hiding part of the focus indicator.
Three different solutions come to mind,
Change the height and placement of the two rows to avoid the overlap in the first place
Try using the CSS z-index property to control which element is rendered foremost
Using the CSS outline-offset property, with a negative value, i.e. -5px, to shrink the focus indicator and hopefully making it visible
Is there a standardized way to create a multiline toolbar? I'm dinamically loading the items and they are usually more than enough to make the toolbar overflow. But I don't want the overflow functionality, I just want the items to span several lines. As the items are loaded dinamically, I can not create several stacked toolbars beforehand. An observation: I switched the layout from the implicit default 'hbox' to 'auto' and the items do span several lines, but then, features like separators have undesired collateral efects, like having only one item or separator on each line, and also different looks in different browsers.
I could dinamically calculate the suposed total width of the items and divide by the max desired width of a toolbar to obtain the number of toolbars I need, but I don't know exactly at what point the items get a valid useful width.
This is an old question posted by someone else sometime ago. I'm re-asking because perhaps with the latests releases of Ext JS, they shiped 'undocumentedly' the sooo needed layout solution for this issue.
Thanks!
I don't think there is an out of box component that can do all of the things you want.
The default toolbar layout of HBox just places everything horizontally spaced.
If you know that you need more space you can always put in a container with whatever layout you want for it's items. You can get creative and nest all kinds of layouts.
Personally I think this would end up looking ugly. Perhaps there is a better solution with an alternative approach to your design needs.
ExtJS has a very useful layout mechanism called flex. It works by summing all the things on a row or in a column. Then the space is parceled out using the flex value divided by the sum of all the flex values. This results in a layout like below:
The Red box is an hbox layout, the blocks E and F have the given flex values that sum up to 3, so E gets 1/3 the width of the screen, and F gets 2/3rds.
The Blue box is another hbox layout, where all 4 pieces (A-D) have the same flex so each one gets 25% of the space.
What isn't shown is the surrounding vbox layout where the blue box has a flex of 22 and the red box has a flex of 78.
Is there anything like this kind of layout in Angular? If there isn't, how would you put this together in Angular?
Additional information based on some of the answers below:
I want to be able to replace extjs with Angular. To do that I need some functionality that I have in extjs that I don't know exists in Angular. I've found ways to watch for screen size, change to adjust the overall display size, but I haven't seen a good example yet of a directive that essentially introspects its constituent directives for this flex value and sets their size based on a size change event of the container. Flex doesn't work from inside the divs, it works inside the container of the divs, because it has to go across all the divs in the container to divide the space correctly. I haven't seen an angular directive that does this yet.
I have no actual development experience with Angular yet (I've watched many of the videos from http://egghead.io, I've read documentation and tutorials, listened to this podcast: JSJ-Angular) and so I don't know if this is something that is easy to solve, or hard to solve, or if someone has already solved it. This flex layout is wickedly cool and easy to use, in fact for full page apps, I'm not sure there is an easier way to lay them out so that they stay full screen and are malleable to screen size changes. Grid systems are great for some things, but they don't address what the flex system addresses.
I'm trying to see if there is a way to leap from extjs to Angular without really making my life difficult.
Additional discovered information:
Looks like flex is becoming a display type now in the form of the CSS display: flex or display: inline-flex (with prefixes at the moment)
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Interesting to see the illustration calls it the Holy Grail Layout example. Of course IE won't implement it right, or in a timely fashion, but my customers don't mind using Chrome if it gets the job done.
Turns out someone has create one and it does MOST of what I was looking for.
http://ngmodules.org/modules/flexy-layout
You missing the point. Angular is only JS library that helps you with:
modularization your code
allow you load content asynchronously
change content using "magic" (two-way bindings)
etc.
It doesn't describe style of your site. You have to do it by yourself or use one of popular fluid/responsive CSS frameworks, i.e.:
Bootstrap by Twitter
Zurb Foundation
Inuit.css
Pure
Gumby
Metro UI
etc.
Just choose yourself and then apply to your site. Using that also make your design independent from JS (which is very bad) and JS framework (which is 9th circle of hell).
I am using www.responsivegridsystem.com for my columns and here is what I've come up with: ux.stoicdigital.com/#intro-message.
I'd like the list to work like this one: http://doyouimpress.com/#uses-list
The biggest problems are that, above a certain amount of px (can't remember exact), the three column grid is centered, but doesn't LOOK centered due to cell widths, etc. and that below that amount of px (when list is in one-column mode), the off-center problem is even worse.
Again, I realize that this has to do with cell widths, etc. but I can't figure out where to make the changes I need to do the following at both sizes:
Align text and bullets left
Center the list itself on the page
Any advice would be appreciated. Would especially appreciate any details you can give re: changes to make to CSS.
PS: If there is another way to achieve this outside of Responsive Grid System, I'm open to that too.
The text doesn't look centered because it isn't. The container div is centered, but since you align the text to the left its all scewed to the left, just like it'd be scewed to the right if you aligned the text to the right.
You could align the text to the middle, but then your checkbox icons wouldn't be lined up. If you want the text to be centered but still have the icons lined up you need to attach the icons so something else but the text. You could display them as pseudo-elements to the <li>, but the drawback is that there would be varying amounts of space between the text and the icons.
What I'm coming at is basically that you can't center the columns this way (as long as you don't make sure that the text in each <li> is equally wide) - however you can fake it and that's what they do on that site you're referring to.
To fake it, simply give each column div a unique class name (or target them with :nth-child), then move each column manually to make it look like the content is centered. You could give them different width-values (this is what they do in your example), different padding-values or similar. That's entirely up to you.
As for the one-column layout, do something similar where you add a padding-value to push them closer to the center, but obviously use the same value for all column divs.
My aim is to have 3 images shrink, grow, and move along a horizontal axis depending on selection. Using Auto Layout seems to make the images jump about as they try to fulfil the Top space to superview / Bottom space to superview constraints.
So to combat this I have put all the images inside their own UIView. The UIView is set to the maximum size the images can grow to, it is centred on the horizontal axis. So now all the images must do is stay centred inside their corresponding UIView. This has fixed my problem as the UIViews perform the horizontal translation, while the images shrink/grow inside while remaining centred. My question is - is this the correct way to do this? It seems very long and like I am perhaps misusing the ability of Auto Layout. I have to perform similar tasks with more images and so any advice is welcome! Thanks.
I've just written a little essay on this topic here:
How do I adjust the anchor point of a CALayer, when Auto Layout is being used?
Basically autolayout does not play at all well with any kind of view transform. The easiest solution is to take your view out of autolayout's control altogether, but alternatively you can give it only constraints that won't fight back against the particular kind of transform you intend to apply. That second solution sounds like just the sort of thing you're doing.