I've been trying to create this webpage off a course from udemy. If you take a look at the picture you'll notice that at the bottom at the GET INVOLVED section, my buttons and texts are not aligned. I need advice on how to make these columns even so that the buttons are aligned. Should I use margin/padding or is there another way?
Assuming that the description is written in a div try giving min-height to that div
An age old question indeed: how to make 2+ divs the same height?
There have been many hacks and workarounds, but nowadays flexbox comes to the rescue.
#wrapper { /* Something around those 3 columns */
display: flex;
}
.pill { /* Every column has this class */
flex: 1;
align-items: center;
display: flex;
justify-content: space-between;
flex-direction: column;
}
Example on JSFiddle
Before using this example, I would recommend reading something about flexbox, maybe this exhaustive guide.
As stated below in the comments, there are some issues with cross-browser support at the moment. More details here
Related
I am creating a section in a website with three divs. I'm displaying the divs in one line with display flex and orientation row.
To make the design responsive, I want it to appear as a column as the screen size decreases. In the media query, I'm setting the container to flex-direction: column; but it's not working as intended. Two divs appear in a column, while the middle one is on the side. I have no idea why it is not working when in my last project I did the same thing and had no issues. Link to the code below so you can see what I wrote:
https://codepen.io/DanDiaz/pen/PopmOdq
.grid {
height: 95vh;
padding-top: 5vh;
display: flex;
flex-direction: column;
}
I think thats due to the 'flex-wrap: wrap' on class .grid!
If you remove this property, it works :) Just need to set the proper image height then.
I'm trying to use Angular Material 6 Dynamic grid-list. The example relating to the documentation puts contents of the grid in the centre of each tile. See example here
I want the content to go in the top left hand corner of each tile.
I have tried the following css which does not work.
.mat-grid-tile .mat-figure {
justify-content: flex-start;
align-items: flex-start;
}
Put in styles.css:
DEMO
.mat-grid-tile .mat-figure {
justify-content: flex-start !important ;
align-items: flex-start !important;
}
This might not fit everyone's needs, but instead of wrestling with the functionality and css properties in order to fit alignment, your component can set the width/height of inner components to 100%. This way, Angular will still get its way (center it all!), and you can adjust the alignment as you see fit (left, right).
Example here with simple checkboxes (my real world scenario), but you can obviously expand on this with whatever your situation is (most complex example is the last one).
https://stackblitz.com/edit/angular-74i5kw
Although this is late, I was having the same issue. I had to use the !important variant to achieve what was needed. Then I got to my component's CSS and added:
:host >>> .mat-figure{
align-items: start !important;
}
More information - https://angular.io/guide/component-styles
This works.
:ng-deep .mat-grid-tile-content{
justify-content: flex-start !important ;
align-items: flex-start !important;
}
add the following style to the content of the grid-tile : "align-self: start"
Result:
I'm trying to create a masonry layout. Almost there, but the fact my first item isn't aligned drives me nuts. It's any first item, doesn't matter which one I put first, it's a bit lower than the others in the first row. Can't understand why.
my container has what I think is needed like:
position: relative;
flex-direction: column;
align-items: flex start;
JSFiddled for your convenience:
https://jsfiddle.net/cxtrqz4v/
Zero in on .parent { margin: 10px }. When you remove it, the problem goes away. I think there's a margin-collapse or margin-column-count issue.
I have this Custom HTML module with 9 flags inserted in the position mainmenu as you can see here www.jornaldalusofonia.pt
How can I give it CSS instructions so it stays vertically aligned in the middle of the bar.
Thank you,
Rui Farinha
Using Flex this is quite simple, just do the below:
#jsn-pos-mainmenu {
float: left;
display: flex;
align-items: center;
justify-content: space-between;
}
And then remove the extra margin top on the form input:
.jsn-modulecontainer[class*="display-"] form {
margin-top:0;
}
NOTE: You must prefix your CSS for flex using autoprefixer tool, or any tool you choose. Also note that flexbox does't work with older verisons of IE9 and below , also older versions of safari.
I've been trying to get my head managing a specific layout without using flexbox (specifically flex-direction: column). I'm almost certain this has been asked elsewhere but for the life of me I haven't been able to find it, so I'm very sorry if it has and will gladly close if anyone can show me it answered somewhere else.
The problem is this: given an arbitrary number of divs, all but one of which have a fixed height, how can I lay them out in a column such that the remaining element fills 100% of the height available to it, after the others have been taken into account?
It looks like (Codepen):
div.container
div.cell.fixedheight
div.cell.fillheight
div.cell.fixedheight
div.cell.fixedheight
div.cell.fixedheight
This is pretty easily achievable using flexbox with something like:
.container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.fixedheight {height: 20px;}
.fillheight {flex: 1;}
But I'm essentially not in a position to use flexbox, since supporting older browsers is necessary here.
Edit when I say I can't use flexbox, I mean not even vendor prefixes :(
You can achieve it with table layouts, with a light wrapper of row-style and cell-style divs. If anyone knows of a solution that doesn't involve an extra wrapper in the markup I'll gladly take it :)
See the approach on this Codepen but I'll put the relevant code here:
div.container
div.row.fixedheight
div.cell
div.row.fillheight
div.cell
div.row.fixedheight
div.cell
div.row.fixedheight
div.cell
div.row.fixedheight
div.cell
and then the CSS:
.container {
display: table;
}
.row {
display: table-row;
}
.row.fixedheight {
height: 20px;
}
.row.fillheight {}
.cell {
display: table-cell;
}
The .cells will accept very little further styling (margins etc) so they'll need to act as a wrapper for whatever richly styled divs you want to put inside them.
Also note that multiple .fillheights will share the available height between them equally.
Also note that the fixed height rows are not in fact fixed height - the 20px will be used as effectively a min-height, but the cell will wrap whatever it has in it. I've been accepting this and setting height: 0 on the cell and height: 20px on an inner div which isn't table-styled.