I'm having trouble understanding #angular/flex-layout. I've read numerous posts, blogs, and examples but can't get it to work, as I want it to.
I want to have one large mat-card, filling the complete width of the screen.
Inside this card I want some text and to the right of the text an image.
Below this full-width card I want 6 smaller cards. On a large screen 3 columns, a smaller screen 2 columns and the smallest screen 1 column.
Here's my stackblitz: https://stackblitz.com/edit/angular-6iqcgo
With this demo I have several issues:
The image in the full-width card is not scaled proportionally. This distorts the image a lot on different screen sizes. How to fix this?
The 3 columns with the smaller cards are not evenly spaced. The 3rd card should go a bit more to the right. The second row, however, is good. How to fix this?
The first small card has less text and is less high. But I would like to have all card have the same height and preferably the mat-card-actions at the bottom. How to do this?
The top of the cards of the second row overlap the bottom of the cards of the first row. How to fix this?
Any help will be much appreciated.
I would suggest putting the img in a div that has fxFlex on it:
<div fxFlex="0 0 50%">
<img mat-card-image src="https://i.pinimg.com/originals/79/3b/ca/793bca86db40af44ad03534f6927626b.jpg" alt="Free image">
</div>
Remove the fxLayoutGap="32px" from the containing div.
They all appear the same height to me. For the actions to be at the bottom of the card you should be able to use mat-card-footer to attach to the bottom of the card.
You can set a margin-top or margin-bottom on the mat-card to add a gap when it wraps.
Related
So have this problem and didn't really find a solution to solve it.
I have this initial design when the screen is large:
And when the screen is resized to a small screen I want to have the following
So It's actually a problem with the first one to have to logo as big as the Title and text together, and then move the title above the logo.
It is all about positioning.
Title
logo
text
Make a parent div with class row.
Then inside, create your title first with class col-md-6 col-xs-12 pull-right. This will cause the title to float right. Do the same with the text.
The logo should get the same classes, but pull-left instead of pull-right. This will cause it to float left.
But on mobile all will be below each other.
Check out the fiddle:
https://jsfiddle.net/80r028jq/1/
TL;DR version: I need 3 of these side-by-side in a way that their percentage-based widths animate when one opens and has enough data to push the others aside.
I have a slim section at the top of my page which must remain resizable and hence its contents have all their width defined as a percentage. Within that section I have 3 elements (actually it's 3 columns of 3 of the panel example, hence 3*3=9 collapsible panels, but as far as I can tell it may as well just be any other div and most solutions would still work the same) which have smoothly animated height as they're clicked on to show their contents.
Additionally, when the panels are opened the width of ALL panels becomes suitable for all panels shown contents, changing the size of the empty space available for each panel accordingly, here's why:
For ease, and because no other solution yet proved more functional thus far, the 3*3 panels are divided into three columns of three panels each in a cell in an invisible table as such:
<table>
<tr><td> [3PanelColA] </td><td> [3PanelColB] </td><td> [3PanelColC] </td><tr>
</table>
In other words, this works great. Whenever you click on any of the 9 panels, it opens smoothly downwards and the width of all panels (table cells) gets resized perfectly according to how much content is in the shown open panels, and at the same time everything can be resized any time according to the size of the top section (or resizing the browser window). There's just one problem: the panels, at their current stage, while being opened correctly and according to their proper percentage width, animate smoothly downwards, but their width simply snaps into place!
So, I've tried animating the panels sideways at the same time as downwards when they open, I've tried animating the table cells, I've tried putting the panel columns in divs that have animating gaps in-between, I've tried making some kind of accordionception with the vertically opening panels inside of horizontally moving panels, I've tried swapping out the entire layout for other panel systems in hopes it might work better.
I've browsed through and modified countless grid systems in attempts to make something that allows for opening panels with the entire grid changing size both vertically and horizontally accordingly, all just to make the space between the panel columns move smoothly instead of snapping into place.
So long story short, I need 3 parallel columns of 3 expandable panels each, of which their sizes animates smoothly and according to the size of their content, with a percentage width and ability to open/close as many panels as you want any time (all starting out as closed). While I already have some panels that could work and used a simple table to make them 3 by 3, they animate downwards but not sideways.
This example here comes close to what I need (I would just cut it down to 3*3 imageless panels instead of 5*6): http://css-tricks.com/examples/InfoGrid/. It has a grid of panels and whenever you open one it changes the size of all the other ones accordingly, however, the widths are specific and defined in amount of pixels rather than percentages, and it doesn't seem to support opening any desired amount of panels simultaneously no matter what I do to it.
I'm willing to try any approach that you might suggest, just please keep in mind that;
It has to be 3 by 3 downwards-expandable/collapsible panels which all change size smoothly according to each others displayed contents and can be opened/closed independently of each other
The sizes (or at least the widths) have to be percentage-based, not fixed amounts of pixels
If possible, it should use up as little bandwidth and filesize as possible, preferably no more than 15kb
The solution could be as simple as animating the table cells widths when a panel is opened, or putting the panel columns in some kind of divs/elements whose widths/gaps animate when a panel is opened, or using a completely new panel grid system or some such.
Just threw this together so it is pretty crude, and a prototype, but I think it might be what you're looking for?
<div class="wrap">
<div class="row">
<div></div>
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
<div></div>
<div></div>
</div>
</div>
See the rest # http://jsfiddle.net/axv7T/
Hi I'm a beginner trying to create my own web layouts in Photoshop that are based on the Bootstrap 3 grid.
I've downloaded a few .psd files that mimic the Bootstrap 3 grid so you can based your designs around them.
I've also created an html grid using Bootstrap that you can see here http://juanchandler.com/grid-test.html view source to see the code.
My question is why the columns aren't 70 pixels wide and a gutter width of 30 pixels as is the case with the .psd grids...I've taken a screenshot of the .psd grid with my html over the top so you can see how the columns don't line up. http://juanchandler.com/screenshot3.jpg ie. the red / salmon columns are supposed the gutters but my html columns fall over them.
Hope someone can help.
Bootstrap's grid is based on percentages, so each column will be a percentage and not a precise pixel width. The only time it's 70px on a single col-*-1 column is when the screen size is equal to or greater than 1170px IF you are using a .container (and not the .container-fluid). The gutter is the padding inside the columns, so you don't see that because there's no inner div wrapping the content, in order to see the gutters, you have to have div or some kind of container inside the column:
<div class="col-sm-1 cell4"><div class="inner"> </div></div>
And color that inside div, not the col--
See example: http://jsbin.com/qotos/1/edit
As far as using Photoshop, since 2011 I've been doing responsive design and haven't used it. What I do is design in CSS and take a screen shot. Learn to use LESS or SCSS. Learn CSS first though.
I'm playing around in Bootstrap 3 trying to duplicate the vertical navigation bar used on the getbootstrap site. I'm running into a couple issues though and I'm not finding a lot of documentation to work from.
Here's a bootply link to show you where I'm coming from: http://bootply.com/77832
Issue number 1 is that if I change the screen size from large to small, my navigation is now under my text. But on the bootstrap site the navigation moves to the top of the screen and the text falls under that. How can I fix the responsiveness of this so that resizing or viewing this on a small screen doesn't wreck the layout?
Issue number 2 is cosmetic. I'd like for the pretty pink background on my navigation to fill the entire container rather than just the width of the text. So I thought, hey throw a width:100% on that bad boy and you're all set. I thought that it would fill 100% of the col-md-3 that contains it, but it actually fills 100% of the screen width. Why would it extend out of the col-md-3 that it is in and how can I achieve the desired look?
For #2, the issue is that the UL has a position:fixed, so it sort of "removes" itself from knowing about its parent's width. Basically, it treats the body as the parent, so width: 100% will make it as wide as the page.
For #1, You may want to look at, when the page becomes small, make the nav "not affixed" to the side of the page.
OK so my brain is just probably not working tonight. What I'm trying to accomplish is a two column layout where one column scrolls and the other is fixed. The fixed column has a very large background image in it that I would like to be able to scale to the size of the screen. Additionally the left (fixed) column's width would have to scale to accommodate the background image. The best way to really explain this is with a picture:
The highlighted area with the arrow in it will scroll and the other column with the picture and twitter status in it would remain fixed. My problem does not come into play with the fixed CSS positioning. My issue is with scaling my columns based on screen size so that the picture always remains in the proportion it's shown here both in it's own dimensions and those of the other column. That's what I'm stuck on. Any ideas? I really appreciate the help.
I think you can just use an image element in your first column and set it to take 100% of its parent. If the parent div is also a percentage then its size will change of course and that also scales the image within. If we want the image to scale, then we can't also specify a height.
<div id="parent" style="width: 40%">
<img id="child" style="width: 100%" src="http://i.stack.imgur.com/lvvrv.png" alt="Fake Background" />
</div>
Check your JS FIDDLE CODE HERE : http://jsfiddle.net/4P9fJ/7/
Since you din't mention you'd be changing the images in your background i provided the background image in the body tag .