I wanted to get a center aligned grid list in Angular Material.
This is my code:
<md-content layout-padding>
<md-grid-list md-cols-gt-md="10" md-cols-md="8" md-cols-sm="6" md-cols="4" md-cols-xs="3" md-row-height-gt-md="1:1" md-row-height="1:1" md-row-height-xs="110px" md-gutter-gt-md="10px" md-gutter="2px">
<md-grid-tile ng-repeat="item in homeTilesNavigation">
<div class="compas-home-text">{{item.name}}</div>
</md-grid-tile>
</md-grid-list>
</md-content>
I am getting a result like this:
But I wanted like this:
I wanted the same grid list to be center aligned.
Here is the fiddle code.
You can use CSS Flexbox.
Make your parent (i.e. md-grid-list) a flex container using display: flex & use justify-content: center to align its children (i.e. md-grid-tile) horizontally center. Like:
md-grid-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
I've used div's instead of regular md- type components for demonstration:
md-grid-list is equivalent to .list
md-grid-tile is equivalent to .tile
Have a look at the example snippet below (updated fiddle according to your requirements):
.list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.tile {
width: 100px;
height: 100px;
border: 1px solid #777;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
<div class="list">
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
</div>
Hope this helps!
Related
I have a profile image with a text next to it. I'm trying to format it in such a way, that there is a profile image with a text next to it which follows that in a grid format.
I'm not really handy in CSS, so aligning items is not really my thing XD. Any help would be appreciated.
Here's the html code.
<div class="col-sm-3">
<div class="cardearnings" style="height:89%;">
<div class="card-body">
<h2 class="card-title">Activity</h2>
<div class="contents">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Someone followed you</i>
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Me followed you</i>
</div>
</div>
</div>
</div>
Heres the CSS
.image--cover {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: center right;
}
This is how it currently looks
Adding to above answer. We can also use flexbox property of CSS in order to achieve such layout.
Please follow below code snippets for reference:
<!DOCTYPE html>
<html>
<head>
<!-- CSS style -->
<style>
.container1 {
display: flex;
}
.container2 {
display: flex;
}
p {
margin-left: 10px;
}
img {
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
style="width:70px;
height:70px;" class="image--cover">
<p> Someone followed you </p>
</div>
<div class="container2">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
style="width:70px;
height:70px;" class="image--cover">
<p> Me followed you </p>
</div>
</body>
</html>
References:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#background
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
If i undesrtand you correctly:
.card-body {
display: grid;
justify-items: center;
}
.contents {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 1em;
}
.image--cover {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: center right;
}
<div class="col-sm-3">
<div class="cardearnings" style="height:89%;">
<div class="card-body">
<h2 class="card-title">Activity</h2>
<div class="contents">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
<i>Someone followed you</i>
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
<i>Me followed you</i>
</div>
</div>
</div>
</div>
Current Behavior
I want to align the text in right of the page in a row,
Also the text should start from the same position based on the longest text in the same page.
current code
html:
<div class="row">
<div>Titile</div>
<span class="comment">
long textelement
</span>
</div>
<div class="row">
<div> Titile2</div>
<span class="comment">
small text
</span>
</div>
CSS:
.row{
width: 67%;
display:flex;
}
.comment{
margin-left: auto;
}
demo: demo
Expectation
An easy workaround is to add a div container as a parent, so the child would align properly
.container {
display: flex;
justify-content: space-between;
}
.row {
width: 67%;
display: flex;
flex-direction: column;
}
<div class="container">
<div class="row">
<div>Titile</div>
<span class="comment">
long textelement
</span>
</div>
<div class="row">
<div> Titile2</div>
<span class="comment">
small text
</span>
</div>
</div>
You could add a new div around the content in the row that needs its content on the right. If that div has width: fit-content it will take the width of the biggest child(longest text) and makes it look like the result you wanted.
.row{
width: 67%;
display:flex;
flex-direction: column;
}
.move-right{
align-items: flex-end;
}
.row-items{
width: fit-content;
}
<div class="row">
<div>
Title
</div>
<span class="comment">
long text element
</span>
</div>
<div class="row move-right">
<div class="row-items">
<div>
Titile2
</div>
<span class="comment">
small text
</span>
</div>
</div>
I am writing components in react and for now trying to style using index.css(I know that is not the right way).So here is the structure
Also I want to display certain number of productContainer components(let us say 3) out of a total 24. Right now everything gets displayed in the same line. I tried flex-wrap but it does not work correctly.Width also pushes everything in the same line.
I know we can fix it by using inline block or grid but I wanted a flexbox way of doing the same.
CSS:
.productlist {
display: flex;
}
.productContainer {
padding: 10px;
width: 340px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-items: flex-start;
border-style: ridge;
border-color: black;
border-width: 1px;
}
.item {
width: 100px;
word-wrap: break-word;
}
You need both wrap and basis to achieve the result you want. flex-basis is the equivalent of width in flex, and flex-wrap will make the elements not overflow. Not specifying flex-grow will maintain the same size for the last elements that do not fit neatly into row (if you had odd elements, like in this example).
.productlist {
display: flex;
flex-wrap: wrap; /* wrap items in container */
}
.productContainer {
padding: 10px;
box-sizing: border-box;
flex-basis: 33%; /* 3 containers per row */
display: flex;
flex-direction: column;
align-items: flex-start;
border: 1px ridge black;
}
<div class="productlist">
<div class="productContainer">
<div class="item title">Title-1</div>
<div class="item price">Price</div>
<div class="item company">Company 1</div>
</div>
<div class="productContainer">
<div class="item title">Title-2</div>
<div class="item price">Price</div>
<div class="item company">Company 2</div>
</div>
<div class="productContainer">
<div class="item title">Title-3</div>
<div class="item price">Price</div>
<div class="item company">Company 3</div>
</div>
<div class="productContainer">
<div class="item title">Title-4</div>
<div class="item price">Price</div>
<div class="item company">Company 4</div>
</div>
</div>
It is kind of tricky situation I am in now.
I have two templates that need to be displayed based on ng-switch like:
<div class="summary-card" ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch ="cardData.uniqueCardsDataFlag">
<div ng-switch-when=true>
<div style="background-color: #ccc !important;">
11111 my custom div
</div>
</div>
<div ng-switch-default>
<div class="card">
<div class="card-title" style="text-align: left;" id="{{cardData.label}}">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
</div>
</div>
</div>
So, the first div when ng-switch is set to true needs to be aligned side by side with the others that get generated by ng-repeat.
something like a css-grid.
The problem is <div class="summary-card" that sets the items to display flex. I cannot modify or change it but I only need this style for the divs generated by ng-repeat.
But now it gets applied to all the divs, like:
div.summary-card {
display: inline-block;
margin: 5px 10px 15px 0px;
display: flex;
}
How can I fix the same?
you should follow dom structure like this
<div class="summary-card">
<div>
<div style="background-color: #ccc !important;">
11111 my custom div
</div>
</div>
<div class="cool-grid">
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
</div>
</div>
and your css should be something like
.summary-card {
display: flex;
width: 350px
}
.cool-grid {
display: flex;
flex-wrap: wrap;
}
check this out :- https://codepen.io/anon/pen/gzomoN
This is not the complete answer but it will give you some idea
you can also use grid layout if you want
.summary-card {
display: grid;
grid-template-columns: 200px auto;
grid-coloumn-start: 1;
grid-column-end: 1;
}
.cool-grid {
grid-template-columns: 200px auto;
grid-coloumn-start: 1;
grid-column-end: 3;
display: inline-grid;
flex-wrap: wrap;
}
I have a page with a bootstrap row, which contains several col-md-1 Bootstrap columns (the amount can vary but never exceeds 12). In this JSFiddle you can see an example of what I mean.
Currently if I have four columns (like in my fiddle), they float left and do not use up the full width of the row:
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
...
</div>
What I want to have, is that the columns keep the same width as above, however they get spread out equally throughout the row. Remember, there can be any number of col-md-1s between 1 and 12! The result width four columns should look something like this:
Further requirements and information:
I'm using this in my AngularJS application, so I'd prefer non-jQuery
solutions
If it's in anyway possible, IE9+ support would be nice!
You can use offset method
<div class="container">
<div class="row">
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
</div>
</div>
Try this,, this may help you
DEMO
Since you want to have dynamic number of columns, flexbox is the best way to go.
As you required, it supports IE10+
.row {
border: 1px solid gray;
display: flex;
justify-content: space-between;
/* Adding for cross browser support */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.col-sm-1 {
border: 1px solid lightblue;
background: lightblue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
</div>
<br>
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
<div class="col-sm-1">5</div>
<div class="col-sm-1">6</div>
<div class="col-sm-1">7</div>
</div>
</div>
Yo can do this just with bootstrap and css pushing the columns.
One possible solution can be:
Html:
<div class="container">
<div class="row col-sm-10 col-sm-push-1">
<div class="col-sm-1"></div>
<div class="col-sm-1 col-sm-push-1"></div>
<div class="col-sm-1 col-sm-push-2"></div>
<div class="col-sm-1 col-sm-push-3"></div>
</div>
</div>
css:
body {
margin: 10px;
}
.row {
border: 1px solid red;
padding: 0 4%;
}
.col-sm-1 {
border: 1px solid blue;
padding: 50px;
}
Demo