Can someone help me please?
I'm writing in Angular and I want to display for example 5 cards on each row. Now I have horizontal scroll, and it looks like that:
Code:
<div class="content">
<div fxLayout="row wrap" fxLayout.xs="column" style="width: 35%; ">
<!-- Single "Responsive" Card-->
<div fxFlex [style.margin]="'20px'" style="display: flex;">
<mat-card *ngFor="let release of releases" [style.min-width]="'200px'">
<mat-card-header>
<mat-card-title>{{release.name}}</mat-card-title>
<mat-card-subtitle>New Release</mat-card-subtitle>
</mat-card-header>
<strong>Release Date: </strong>{{release.release_date}}<br />
<strong>Tracks: </strong>{{release.total_tracks}}<br /><br />
<a style="text-decoration:none" href="/artist">
<mat-card-content *ngFor="let rel of release.artists">
<mat-chip-list aria-label="Artist selection">
<mat-chip>{{rel.name}}</mat-chip>
</mat-chip-list>
</mat-card-content>
</a>
</mat-card>
</div>
How can I display 5 cards on each row for example? Thank you in advance.
Solution lies in using the right styles.
If you are looking to have few cards on each row, you might have to use max-width on the container containing the cards.
it because you wrap all with style: flex . to fix this you can add this style for child element in this case it mat-card
style = flex: 20%;
Your styles are a bit messy...
First: I recommend separating styling from html, use css files
Second: cards doesnt get wrapped because you specify fxLayout="row wrap" on mat-card's grandparent, but it cannot wrap anything because it only has one child, if you want to use flexbox then flex-flow: row wrap; must be declared on mat-card's direct parent div, and plus mat-card must have max-width: 20%.
But i would use grid, just remove every styling from html and add display: grid; grid-template-columns: repeat (5, 1fr); to the div that contains mat-cards
this will automatically devide each row in 5 containers of equal width and wrap the other ones to next row, you dont need to add anything else.
If you want it to be mobile frindly, you just add media query and change repeat(5,1fr) to repeat(1fr) and it will show one card in each row, when reproduced in mobile
Related
So I've created a div and inside of that div I am mapping over some lements that are contained within my wishlist. I want that div to have borders all around the elements I've mapped over but instead it, apparently, stays empty even tho I don't think it should be. Here is the relevant code:
<div className='wishlistWrapper'>
{productsInWishList.map(product=>
<div className='productsWishListWrapper'>
<p className='productName'> <strong>{product.name}</strong>
<span>
<BsX className='removeProduct' size={25}
onClick= {()=>removeFromWishList(product)}/>
</span>
</p>
<img className='productImage' src={product.image}/>
<p className='productPrice'> <strong>{product.price}</strong> </p>
</div>)}
</div>
I've fixed the problem, so basically I had display: inline-block and float: left at the same time-> removing the float: left and changing the display to display:inline-flexbox solved everything
My page for a clone script can be found at https://jsfiddle.net/k68dm4wj/
The problem is getting the text and image for a DIV to align next to the image with a small amount of space between the top and next to the image, like this example.
This is my code, taken from the JSFiddle above:
<div class="card">
<img class="listing-main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Audi_A6_Allroad_Quattro_C8_IMG_1975.jpg/880px-Audi_A6_Allroad_Quattro_C8_IMG_1975.jpg">
<div class="card-info">
<h2 class="listing-title title-wrap">Audi A6 Allroad Sport 55 TFSI 340PS 3.0</h2>
<p class="listing-attention-grabber ">BRAND NEW 2020 CAR</p>
<ul class="listing-key-specs ">
<li>2020 (20) reg</li>
<li>Estate</li>
<li>40 miles</li>
<li>3.0L</li>
<li>339BHP</li>
<li>Automatic</li>
<li>Petrol</li>
<li>1 owners</li>
</ul>
<ul class="listing-extra-detail">
</ul>
<p class="listing-description">2020 (20) reg, black, 40 miles £46,796</p>
<div class="seller-info ">
<div class="phone-code">
Tel: (0114) 49600000
</div>
<div class="seller-type">
Trade seller
</div>
<div class="seller-location">
<span class="seller-town">Sheffield</span> -
43 miles away
</div>
</div>
</div>
<section class="price-column">
<div class="vehicle-price">£46,795</div>
</section>
</div>
Although my code works properly, getting it to look similar to the page I linked to - at least for the DIV part of my code is the main problem. This relates to where I have .
There is also a second problem; I want to include smaller images and allow the user to scroll through them with jQuery or javascript, but the main image in remains the first one; also, how to include a logo after the images at the end like in the linked-to page (if there's one needed; not every div will need a logo).
Like this:
This is the intended end result:
I should add, the JSFiddle linked to has one large CSS file in there, when I've actually got three separate files - one for the layout, one for basics, and one for webfonts. For JSFiddle, I had to condense it into one CSS file there; the original file has CSS links in the header.
I would really appreciate any advice or guidance on making this look better.
Try using overflow: hidden in .layout{}. Also use "white-space: nowrap" in unordered list.It will not wrap your content on next line.For example:
.layout{
//rest of the styling here ....
overflow: hidden;
}
.ul{
//rest of the styling here ....
white-space: nowrap
}
.card-info
{....}
.card-price
{
padding: 1rem;
font-size: 0.9rem;
}
In Your CSS Change the padding of card-price from 2rem to 1rem
check the space in the image
Do anyone have idea how to fix elements in div with class="row" ?
How it should look like: Good view, Click: Live show(example without angular)
How it looks like: Bad view
Switch component is repeated in lights component
When i remove <div class="row"></div> elements looking good, but the are under themselves
<div class="row">
<app-switch *ngFor="let switch of switches" [switch]="switch"></app-switch>
</div>
Link to my repository: SmartPi-Client
It is because Bootstrap 4 is using Flexbox. app-switch selector is between .row and .col divs so the correct bootstrap style wasn't applied to them.
You can make the browser to ignore this app-switch selector using the following css code.
:host {
display: contents;
}
I added a working example here.
https://stackblitz.com/edit/angular-ho3q4q
Instead of adding .col-sm-12 .col-md-6 .col-xl-4 to child div of app-switch, add it to app-switch.
<div class="row">
<app-switch class="col-sm-12 col-md-6 col-xl-4" *ngFor="let switch of switches" [switch]="switch"></app-switch>
</div>
The thing is that the style for the columns is applied to the direct child/ren of the html element with the ‚row‘ class.
You could add that class to your app-switch component tag or use a wrapper around it to define the col design
When I try to nest grids in angular, the internal grid disappear.
Here is an example :
https://stackblitz.com/edit/angular-eib7wz
I tried playing around with the column property but I still get a similar result, the nested grid does not show up at all.
I am using the grid list to separate my page into small sections and in each section I want to place a different component and one of these components is another smaller grid.
I am open to suggestions. Thank you for the help.
The grid does show up when nested, only the size the zero... so we add a div and style it... i deliberately put min-width:80%... to achieve your objective, you might want to put min-width:100%:
add the following relevant CSS:
.internalMatGrid{ border:1px solid red; min-width:80%;}
relevant HTML:
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile>
<div class='internalMatGrid' >
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile>1</mat-grid-tile>
<mat-grid-tile>2</mat-grid-tile>
<mat-grid-tile>3</mat-grid-tile>
<mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>
</div>
</mat-grid-tile>
<mat-grid-tile>2</mat-grid-tile>
<mat-grid-tile>3</mat-grid-tile>
<mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>
you can check a working stackblitz here
In some instances with nested Material components, such as mat-grid-list, you need to use both /deep/ and !important.
For instance, with this HTML code:
<mat-grid-list *ngFor="let diet of diets"
cols="8"
rowHeight="210px"
gutterSize="1px">
<mat-grid-tile class="diet-name">
{{ diet.name }}
</mat-grid-tile>
<mat-grid-tile *ngFor="let day of diet.days"
class="outer-tile">
...
</mat-grid-tile>
</mat-grid-list>
If you want to add a style around the text, which ends up wrapped in a <figure> tag, you'll need to go with something like this in your CSS:
/deep/ .mat-grid-tile.diet-name figure.mat-figure {
margin: 0 5px !important;
}
This is what my webpage looks like on my computer
What I am trying to do is:
move my content (buttons, table, dropdown) to the center of the webpage (dynamically and automatically depending on the screen size).
Have the webpage fit properly on mobile browsers.(i.e. have the content take up the majority of the screen space)
I am a bootstrap and css noob. The following is a jsFiddle with similar code to what my webpage has: https://jsfiddle.net/zpvrspaq/18/
How would I go about just centering one of the rows, such as:
<div class="row no-gutter">
<div class="col-xs-1"><h5 class="text-center">Your grade</h5></div>
<div class="col-xs-1"> <h5 class="text-center">% of grade</h5</div>
</div>
<div class="row no-gutter">
<div class="col-xs-1"><input type="text" class="marks form-control"></div>
<div class="col-xs-1"> <input type="text" class="grades form-control"></div>
</div>
Anything to point me in the right direction would be great.
Try not to rely too much on Bootstrap's rows and columns for sizing things like tables. col-xs-[number] should really be limited to determining the way elements line up or break onto new lines when the viewport is expanded or shrunk.
I've given #table-of-grades a display type of table and auto margins to center it, and added a new class, .table-cell, to float the cells of the table within the width of #table-of-grades
#table-of-grades {
display: table;
margin: auto;
}
.table-cell {
width:50%;
float:left;
}
I also moved everything within the #table-of-grades container, so they will fill the width of that element when the viewport is shrunk or expanded. Also notice the change in markup, i.e. I removed the rows and columns in the table itself to create a layout that doesn't rely on bootstrap's rows and columns.
https://jsfiddle.net/Lzvz60u1/
Try putting the container in a and then use a margin-left:auto; and margin-right:auto; to center the div
DEMO
It would be very simple using flex box.
here's the gist of the demo
.container{
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
html
<div class="container">
<div class='content'> //you can size this anyway you want
put anything you want here,
</div>
</div>