we have the following component
<div layout="row">
<div *ngFor="let a of cardsArray">
<mat-card class="card-card">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>IT29TB92881102020233</mat-card-title>
<mat-card-subtitle>Deposit</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
Valid thru <b>02/23</b>
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button><mat-icon>list_alt</mat-icon>See Statement</button>
<button mat-button><mat-icon>share</mat-icon>Copy Requisites</button>
</mat-card-actions>
</mat-card>
</div>
</div>
.card-card {
max-width: 320px;
}
div[layout="row"] {
overflow: auto;
}
It displays a list of "cards" verically.
How should I create a horizontally scollable list of "cards" and keep it responsive yet?
Thanks
Thanks, actually the "issue" was in css, but okay, might be useful for angular starters...
.card-card {
max-width: 320px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 5px;
margin-left: 5px;
}
div[layout="row"] {
overflow-x: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
Related
I have got a basic flexbox grid. If I move the ngFor loop into a component (<comp-ngfor-testGrid></comp-ngfor-testGrid>) the flex is broken.
The <comp-ngfor-testGrid> on the DOM causes the issue. I would like to remove it and keep only the content of the component <comp-ngfor-testGrid>.
:host {} is not the solution because the <comp-ngfor-testGrid> still exist...
.grid {
display: flex;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;
div {
width: calc(50% - 10px);
margin-bottom: 15px;
}
}
testGrid = [4,5,6];
<div class="grid">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div *ngFor="let item of testGrid ">
{{item}}
</div>
<comp-ngfor-testGrid></comp-ngfor-testGrid>
</div>
im trying to create a footer with a few social media icons...however, the method i've tried has resulted in the following problem :
expectation:
reality:
as you can see i'm failing in bringing the social media icons closer together... i tried setting the columns flex % to - however that pulls everything closer together towards the left of the screen...
here is my .row and .column as well as the social media icons..
.row {
display: flex;
}
.column {
flex: 30%;
padding: 00px;
}
.marginauto1 {
margin: 30px auto 20px;
display: block;
horizontal-align; middle;
vertical-align: middle;
}
<footer class= "marginauto1">
<center><div class="row">
<div class="column">
<center><a class= "pointer" href="twitter_url">
first time taking a stab at this on my own and I'm just really stuck here.. any help or tips would be appreciated!
If you want to put all your icons together in the middle:
img{
height:50px;
}
div{
display:flex;
justify-content: center;
background-color:blue;
}
<footer>
<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAA81BMVEXgT1////9ktfYAiXvc3Nzg4ODeP1L4+Pj44OL22tzePVDgTF367O3fSVrn5+ffRFb5/P+x2ftdsvZ/wvj/7ljjZXJ7u8LhVWX99fbv7u7iW2rogozsmKHqipT87u/21NfwrrTtn6fzwcfoiJHmeoXlbnzzwMXyuL31zdHupa3mc3/f5uX/8FG93/v/8UlbsvxOqtgAhnHs3t/fzc7goabktbnekpjlsrfixciMyfh1u+uYxs2ozbehy8nx6mu71Kd+v+WNwtrE2Jrf43m+17LV3opqt/GCv9oXj4ogk5pEo8Q8orlNqtIZkJBIqMtYr+MvmqW74o8pAAALkUlEQVR4nOWdeXvbNhKHyag6KBBBq4ZLmqROU4dlrx1l2+1umzht0/U6drLO9/80C+qwKIkgcQxE2P79lSePo+j14JgZDAaWrVnNXsvpTwfDbuR5Yej7lu+HoedF3eFg2ndavabuL2Dp/HB3NDxNvBARQjBGCFkb0T9jTP8WhV5yOhy5Or+EJsKeMxmOSZuC4QzYoVJSTH9uPJw4PT1fRQNh4A4izye4iOyAFBPfiwZuAP91oAndWTxuiNFlKBvjeAY9ZEEJe5MkRFJ0W0oUJhPQ8QpHGEy7lpzxDkxpdadwwxWIMHAiC2Nluo3oR0UOECQIYTBNAPE2kAmMIQEIW3GbqA/OQyHSjlsGEDrdkGjAW4mEXadiwv68AbC4sIVwY96vkNBJLOjpdyhsJUp2VCB0ooZ+viVjI1JglCZ04yPY75HRiqVdHVnCqa9vfckT8adHJZyFWvaHIiESzo5GGMSFEZE2RhTLuAAShFN03AG6FUESQ1WYsNfVugEWC+GucNwhSjjS6MHwiIQjrYTBWSUzMCuEzsRmoxBha1ytAVciYyF/XIRwFB5vjy8SFhqpAoSDo++BLCEy0EAYRCaM0I1IxD0ZeQnduRkjdCM853VUOQn7vlmAFNHnjBv5CGe+KVNwK+Tz+alchIMK3Ri2EOZab3gIp0YCpog8bioH4dCkRXRXZAhBODRtjckKlyOWEhpswVTlViwjNNqCqUqtWEI4NduCqUjJclNMODDdgqlKNo1Cwpmh28SuEC7c+osI+wZ6MnlChQ5cAaH7RABTxAI3nE0YGBZNFAnP2cEUmzB6OoAUMRInHJi/T2TFjvpZhKOnBUgRWbkbBmErfCqrzEYoZGTg8gmD8VOahCvhcf5qk0949tTGaCpyxk84khiiSFpgiCh3KuYR9sQnIUahJym4NDMK845t8gi7omMUkXgmXd3zLgFDJF0+wqno/4g9lYKQ1/VTMMS8xM0hYSA6M5CvVA3yul7/Beq8AKHDoXRIGAuPUbnz9Qzh+c9QTj6Jywlnov8XGisBpoT1838QoJF6+Os+IBReRxnbkBBhvf4ugdmCUVhGKJ6YaSjWna0I6+9OYRAP0jZ7hBJRb0OxQnJNWD//CWS9OYiG9wiFlxk4wnS9gZiM+4vNLqEj8YlghBTRA1lvdjevXUKZuB6OkAoiptmL93cInYbEB4ISfgexpDZ2jLhDKOUhghLWz2N1QpywCPtSnwdLWD8ftNWX1OwGliWUSx8CE1L/RjmewvN8QqlZCE9YP/+X8pKanYkZwq7c54ITUqnW7uBMoLgllE2v6SCs/1PNv8km3raEEu6MPsLznywlxIxj80gYtCU/TAuhsgvXfgyFHwmlT3tVCU9yCemSqrTebEOMDWGQyI4KVcJmPiGV9FeiQsnGiBtCR/oXpkrIGKapTuX2r6XwZsPYEMqfpSkT2kzC81/kj9kf/e81YSD7QRCETaYVz39WWFKDHULhHCkkIV1tWIzUv5FF3ORO14SS/gwUIbUjQ9/PZOfixq9ZEfak+aAImZL0llP1MoQTBT/QWEIyyRCqHI4YS7gOhJeErsqZtrGEKHQfCYUz+U+CcJ3hXxLGKh6guYQ43hAG42dqw2XtQkroKrh/JhNaDXdNqFb+ZDDhslAqJVSrYDOYcOl9U8KetOtnOiHyektCx1cBNJnQSisMLDWXbZ+QGQedrH/ghx859O/vgQhTx81SvnCwQ1j/jqHXG8LOq1J1foQiTK8qUEKl3VAH4SswwrSKghIq5pdNJrRISujKJkrzCFmBbLNZDWHbpYSq1cBia+mxbTiihKo3myQJO52rDosWjpAuNZatWjcnR9j59bf3H35lIAISntpWU7X4UYrw6sP15cXl9ccr3YRJ01L02eQIOx8u36S6/KiZkPptlnJVvgRh5/frNytd/pE3UAEJw5blqNYFyBC+v1wTXvyZN07hCC3kWH3VAhYJwqs/LzaEnzQTkr6lfEuUb8ffJfzreIRTS/l+067XVhpbLEfpH282hLmrKSThwFK+yizll/5nZcSL69wtEZAQDy2FMxl5ws7NpwvKePHmvyvAt/oIu1YEupbyjdLUpXn/6fr64++rMfrl9kbbWhpZqhu+rNeWOqUbx/Tz4k4boVcVYVZva7WaRsJQEVCd8OZrrba410RI+aonvFtQG94+aCNUSyVCENZSLe47egj96gnvF0vE2oMuQmUpEt7crgBr93oIARgVCb+tAWuLBy2ElY/Sm9qjvl7pIYRdS4Wzid+2hLUvetZSUMKmaEb44TZD+E0PIaxPI0jY+ZwBrD36biZ7bYKEXxZZwtrXGx2EsLHFyWuGTnIJd0xIdQdPGAHHh6XaIXy72CO8BSek8SFsjC9GeLsHSGdiB5pwCJynESL83z7gxneDzdPA5tqECA9MuHHAYXNtVeRLV7rbn4VLxBtgwn4lOW+mCWurbR82513FucVS97mAtdpb6HOLSs6eqG7yxmiqzx3gs6dqzg9fdb4xAGuLt3DVJsvzQ9gz4OYJQ/uxxQMLMJ2JsGfAoOf4/LHFPWuQpjMR+BwftBaDl/DAX8vqK3AtBmQ9DY8Nl/pcRLi4g62nAa2JYk3Dx3l48vdUP/ytUL/ZUIQEvK4NXhB1bZC1iYYRrmsTIetLDSNc15c+/xrh51/n/fxr9V/AfYvnf2fm+d97Ary7xkqXCgqGcHt3DfD+IdMvFVIdyIbb+4dwd0hNIszeIQW7B8yOLSogzN4DhrvLzT4/FBII4c5d7ud/H7/6ngrwhLs9Farui6GFcLcvRqW9TfQQ7vU2qbQ/jRbC/f40VfYY0kS432Oouj5ReggP+0QB9fpi93wSEYBfetjrC6hfmzE+TU6/Npiee6YQ5vXcg+mbCDJI68qE+X0TQXpfGuKX5ve+rKp/aYnkehvn9y+tqAetBkJWD9qK+ghrIGT2Ea6mFzQ8IbsXdDX9vOEJC/p5V9KTHZywqCd7JX31wQkL++pX8TZCifqihMVvI8i8b0HUnpkpk2iSrOx9C4kQAx8+XgMp0aWh7I0SiXdmkCf9mBWHAsFBVf7OjESGn+PlaHmJHqlwvBUksdigiTbAgeDvm+e9J/E3uyyEz/QM1J5omQjfm10yuVM8HvZdaPVj4Z7lfO+uSbydl5qx0YZWQ7jVNe/beTLvHxoh/vcPpd6wNED8b1i+gHdIX8Bbss//PeAX8KbzC3iX+wW8rW4HcsnFSoTnbLeRTSgTDVekg6iXk9DuPxFE5Bc9FFpEaM/kH0E5ohAuzKMUEtqDpzAVMXMZ5SCUPxk+ng4SM2KEyreitKs0h1JGaA/NtiIpAywnNNuKHFmwckKTrVhuQS5Ce2ropoHy0jJShHTTMBERlWwTIoT2zEDvBvl8ByZ8hNSBM229wYWumjih7RoWaeB5gbMtRWgHqu+7gopE3Fl2bsI06jdlMiJ2RK9EaI+UH1uGEQ5ZORlVQrs1NmGkkrHQuboQoR2cCR9MQQshwYMuMcJ0pFZrRiI0QmUI7V63QgcH4W7e4QssIXVTUVVmJIjHEVUntIO4ktmIUCxz1CxDSP3U8Oh7IyKhXOGOHCEdqv5xhyrxJQaoEqHtxtbx9n9sxbxuKByhbTtR4ziMuBE55V9HAyFlTI5gR2wlCnyKhDRunItXTIgI4cacMw7UREjt2NXo5ZCwq2Q/EELqj8dtLXsHIu0YoHYVgJC6ANMEQ09IjJMpSC0ZCCFldCILEJJ+VOQA1coBEdqpIbsWAVh2ECZWF8Z8S8ERUvUmSYiUIOm/DpOJcPxQJFBCKncWjxtypqTGa4zjmbTzwhA0IVXgDiLPF6OkdL4XDVwNdaoaCFP1nMlwTNoEY1wYaSFEf4L+3Hg4cUDH5laaCFdyR8PTxAsRISQlRRkwSkb/FoVecjocQQ/MHWklTNXstZz+dDDsRp4Xhr5v+X4Yel7UHQ6mfafVa5Z/hJr+D8W0TFVSelAUAAAAAElFTkSuQmCC">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyFcxKQYRAhR9esHvHVZokZGCYFNC1_rMHhw&usqp=CAU">
</div>
</footer>
<center> tag will not applicable if you are using flexbox. Instead flex-box itself has some properties that you can make use of. In your use-case you can go with justify-content: center
.row{
display: flex;
justify-content: center;
}
.item{
color: red;
background: lightblue;
margin-left: 20px;
}
<footer class= "marginauto1">
<div class="row">
<div class="item 1">
<h1>Telegram</h1>
</div>
<div class="item 2">
<h1>Facebook</h1>
</div>
<div class="item 3">
<h1>Twitter</h1>
</div>
</div>
</footer>
If you don't want any space in between of 2 or more items you can remove the margin.
Its working as expected. You have defined .column with flex: 30%; which intrun will split into 3
flex-grow: 1;
flex-shrink: 1;
flex-basis: 30%;
So what have you done is allowing the element to grow till the available width with a minimum of 30% relative to the container. This is because the flex-basis is defined. This will be 33% each.
For your soution to work remove flex: 30%; from .column. This will take the width depending on the content.
If you want some gap between the element, try adding some margin or padding, I have used margin for that. Or you can set the width of column element.
Inorder to align the items center in horizontal axis, use justify-content: center; for the flex element.
Working Fiddle
.row {
display: flex;
justify-content: center;
}
.column {
padding: 0px;
margin-right: 20px;
}
.marginauto1 {
margin: 30px auto 20px;
display: block;
}
.pointer img {
width: 50px;
}
<footer class="marginauto1">
<div class="row">
<div class="column">
<a class="pointer" href="">
<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-512.png" alt="">
</a>
</div>
<div class="column">
<a class="pointer" href="">
<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-512.png" alt="">
</a>
</div>
<div class="column">
<a class="pointer" href="">
<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-512.png" alt="">
</a>
</div>
</div>
</footer>
I need to display a list of scheduled jobs in an endless scroll list of angular material,
for each element in the list, I need to divide it into 3 columns using flexbox.
in each column, I want to display certain data.
for some reason, I'm not able to add space between columns inside the list.
here is my code in html
<app-nav>
<div class="grid-container">
<div class="row1">
<mat-grid-list cols="6" rowHeight="100px">
<mat-grid-tile [colspan]="1" [rowspan]="1" [style.background]="lightgreen">
<h2>All Scheduled Jobs</h2>
</mat-grid-tile>
<mat-grid-tile [colspan]="4" [rowspan]="1" [style.background]="lightgreen">
</mat-grid-tile>
<mat-grid-tile [colspan]="1" [rowspan]="1" [style.background]="lightgreen">
<button (click)="openCreateScheduledJobDialog()" mat-mini-fab color="primary"
aria-label="Example icon button with a plus one icon">
<mat-icon>plus_one</mat-icon>
</button>
</mat-grid-tile>
</mat-grid-list>
</div>
<div class="row2"> // the problem is in this part:
<cdk-virtual-scroll-viewport itemSize="70" class="example-viewport">
<mat-list>
<mat-list-item *cdkVirtualFor="let scheduledjob of scheduledJobs" class="example-item">
<div class="flex-container-list-item"> // here is the flex that i need to fix
<div class="details">
<h3 matLine>{{getJob(scheduledjob.jobID)}} Job</h3>
<h4 matLine> Status: {{getJobStatus(scheduledjob.isActive)}}</h4>
<p matLine>
<span> Start time: {{scheduledjob.startTime | date}} </span>
</p>
<p matLine>
<span> End time: {{scheduledjob.endTime | date}}</span>
</p>
<p matLine>
<span> Runs Every: {{scheduledjob.daysFrequency}} days
</span>
</p>
<p matLine>
<button mat-stroked-button color="primary"
(click)="openMachineDetailsDialog(scheduledjob.machineSerialNumber)">Machine Details</button>
</p>
</div>
<div class="edit"> <button mat-flat-button color="primary" (click)="openUpdateScheduledJobDialog(scheduledjob)">Edit</button></div>
<div class="delete"> <button mat-raised-button (click)="delete(scheduledjob)" color="warn">Delete</button>
</div>
</div>
<mat-divider></mat-divider>
</mat-list-item>
</mat-list>
</cdk-virtual-scroll-viewport>
</div>
<div class="row3">
</div>
</div>
</app-nav>
note that im using angular material cdk-virtual-scroll-viewport
here is the css:
.row1 {
grid-area: row1;
}
.row2 {
grid-area: row2;
}
.row3 {
grid-area: row3;
}
.grid-container {
display: grid;
grid-template-areas:
'row1 row1 row1'
'row2 row2 row2'
'row3 row3 row3 '
;
grid-gap: 2px;
padding: 2px;
}
.grid-container>div {
text-align: center;
padding: 10px 0;
font-size: 15px;
}
.example-viewport {
height: 600px;
border: 2px solid gray;
}
.example-item {
height: 50px;
}
/* ******************* list item flex ***************** */
.details {
background-color:lightcoral ;
}
.edit {
background-color: lightgreen;
}
.delete {
background-color: lightskyblue;
}
.flex-container-list-item {
display: flex;
border: 6px solid red;
justify-content: space-between;
--gap: 10rem;
flex-wrap: wrap;
}
.grid-container-list-item>div {
text-align: center;
padding: 10px 0;
font-size: 15px;
}
Use either the gap property on the flex container, or set [margin](http://developer.mozilla.org/en-US/docs/Web/CSS/margin) on your flex items.
Your current solution doesn’t seem to be working because you set a CSS custom property --gap: 10rem on your flex container, but then don’t actually apply that property (at least in the provided code).
You can use gap, and that will ensure a fixed amount between the flex items. Browser support for gap is good, with the exception of Safari before version 14.1.
Alternatively, you could set margin-right on all your flex items with the exception of the last item to achieve a similar effect.
Here’s a working (simplified) example:
.flex-container-list-item {
display: flex;
border: 6px solid red;
gap: 2rem;
flex-wrap: wrap;
}
.details {
background-color: lightcoral;
}
.edit {
background-color: lightgreen;
}
.delete {
background-color: lightskyblue;
}
<div class="flex-container-list-item">
<div class="details">
<h3>Job</h3>
<h4>Status: active</h4>
<p>
<span> Start time: 2 PM</span>
</p>
<p>
<span> End time: 4 PM</span>
</p>
<p>
<span> Runs Every: 3 days </span>
</p>
<p>
<button>Machine Details</button>
</p>
</div>
<div class="edit">
<button
mat-flat-button
color="primary"
(click)="openUpdateScheduledJobDialog(scheduledjob)"
>
Edit
</button>
</div>
<div class="delete">
<button mat-raised-button (click)="delete(scheduledjob)" color="warn">
Delete
</button>
</div>
</div>
Ideally you should do the followings and it should work :
.container{
display : flex;
flex-flow: row wrap;
justify-content: space-between;
}
.item{
margin: 10px;
height: 100px;
width: 100px;
}
.item1{
background-color: red;
}
.item2{
background-color: yellow;
}
<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
</div>
even though your question is not so clear. you can do following update on your HTML and css files :
.flex-container-list-item{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
<div class="flex-container-list-item">
<div class="details">details contents</div>
<div class="action">
<button
mat-flat-button
color="primary"
(click)="openUpdateScheduledJobDialog(scheduledjob)"
>
Edit
</button>
<button mat-raised-button (click)="delete(scheduledjob)" color="warn">
Delete
</button>
</div>
</div>
I might or might not need flexbox for this issue, but I'm still learning and trying to understand how I can get the title to be on top of the add button, which should fill about 96% of the row's width under the title.
I created a stackblitz to demonstrate current code. Also the desktop version should allow title and add button to occupy same row at 70% 30% grid like in stackblitz demo.
This is the desired result when you collapse the browser window to mobile
html
<div class="listingBody">
<div class="listingParent">
<div class="listingCard">
<div class="topRow">
<span id="title">title</span><span
id="addButtonSpan">
<button id="addButton" type="button">
Add Button</button>
</span>
</div>
</div>
</div>
</div>
css
#title {
text-align:center;
}
.topRow {
display: grid;
grid-template-columns: 70% 30%;
}
This is how I would go about it using just flexbox not css grid.
I use a media query to do the mobile stacked layout with flex-direction: column
.topRow {
display: flex;
}
.topRow #title {
width: 70%;
}
.topRow #addButtonSpan {
width: 30%;
}
#media only screen and (max-width: 600px) {
.topRow {
flex-direction: column;
}
.topRow span {
margin: 0 auto;
text-align: center;
}
.topRow #title {
width: 96%;
}
.topRow #addButtonSpan {
width: 96%;
}
}
<div class="listingBody">
<div class="listingParent">
<div class="listingCard">
<div class="topRow">
<span id="title">title</span>
<span id="addButtonSpan">
<button id="addButton" type="button">
Add Button
</button>
</span>
</div>
</div>
</div>
</div>
I am trying to place my card boxes on 1 row rather than on 1 column. Can someone explain to me what is wrong with this CSS?
import "./Card.css"
class Card extends PureComponent {
render() {
return (
<div className="cardcontainer">
<div className="cardbox">
<div>{this.props.title}</div>
<div>{this.props.category}</div>
<div>{this.props.likes / this.props.dislikes}</div>
</div>
</div>
)
}
}
export default Card
.cardcontainer{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.cardbox{
border: 1px solid red;
width: 200px;
height: 200px;
}
Your cardlist style needs to be applied with the parent component of the Card component.
EG you may have another component called cardList and within the render method for that you apply the cardcontainer style EG.
<div className = cardcontainer>
<Card/>
</div>
This is because in your current code you have initiated the cardcontainer style for every row. I have recoded your work in CSS and HTML so you can see what I mean. I hope this helps.
.cardcontainer{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width:1000px;
}
.cardbox{
border: 1px solid red;
width: 200px;
height: 200px;
}
<div class="cardcontainer">
<div class="cardbox">
<div>A title</div>
<div>A CAtegory</div>
</div>
<div class="cardbox">
<div>A title</div>
<div>A CAtegory</div>
</div>
</div>