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;
}
Related
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
I wanted to truncate mat card title for overflow. Using
overflow:hidden
text-overflow:ellipsis
white-space: nowrap
But the style is overriden by the standard mat-card style. I used mat-card-header ::ng-deep for the same but I think ng-deep is deprecated now. Does anyone know of a better approach for the same?
This might help:
<mat-card class="example-card">
<mat-card-header>
<mat-icon>more_vert</mat-icon>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title title="This is a test title header">This is a test title header</mat-card-title>
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>
</mat-card>
and you can override the css class in your component i.e. your component is (app.component.css):
.mat-card-title {
overflow:hidden ;
text-overflow:ellipsis;
white-space: nowrap;
width: 30vw;
}
You must need to specify width for text overflow ellipsis, Thanks
Instead of using the ng deep, you can override the class css.
Go to the main css file common/style and inspect your material class from browser.
Use the full class name which you found from browser.
Apply the css, save and run.
I am trying to implement a functionality which will toggle a Vuetify badge element for each array object within the list when the containing div has been hovered over.
I am able to create a hover like functionality within v-for array list using css, which is fairly simple but how can I achieve similar outcome using vuetify components? As I have not found any questions discussing this or demonstrating it, assume it is possible. Have looked into
First Link
Second Link
Second Link
And much more but have not found similar enough example of what I desire.
I have added codepen example of what I currently have.
The badge should only appear on the element which is currently being hovered, however all badge elements are being executed when any element has been hovered on.
CodePen Link
Maybe I have missed out something obvious
HTML Part
<template>
<div id="app">
<div>My favourite fruit is <b>{{favouriteFruit}}</b></div> <br>
<div v-for="(dataArray, index) in testArray" #click="setCurrent(dataArray.name)">
<v-badge
:color="computedFavFruitColor[index]"
right
v-model="show"
>
<template v-slot:badge>
<span><v-icon color="#ECF0FF">{{computedFavFruit[index]}}</v-icon></span>
</template>
<div #mouseover="show = true" #mouseleave="show = false">
{{dataArray.name}}
</div>
</v-badge>
</div>
</div>
</template>
Any further help of suggestions regarding this manner would be appreciated.
While the show property is global, it counts for every item you hover. You want to target the element you hover. So I suggest to keep track of the index of the item you hover like this: https://codepen.io/reijnemans/pen/JjPrayp?editors=1010
<div v-for="(dataArray, index) in testArray" #click="setCurrent(dataArray.name)">
<v-badge
:color="computedFavFruitColor[index]"
right
>
<template v-slot:badge>
<span v-if="show == index"><v-icon color="#ECF0FF">{{computedFavFruit[index]}}</v-icon></span>
</template>
<div #mouseenter="show = index" #mouseleave="show = null">
{{dataArray.name}}
</div>
</v-badge>
</div>
And show = null ipv show = true in data block of vue
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
I am very new to Angular2 and front end development in general,
I am trying fo make dome divisions clickable but the problem is that the mouse is not changing the shape to the hand when it comes over the div content
I want the app to print something when I click on "PRODUCTS" and it is doing it but the mouse shape is not changing over "PRODUCTS"
example.component.html
<div (click)="navigateToProducts()" > PRODUCTS</div>
example.component.ts
public navigateToProducts(){
console.log("navigateToProducts");
}
I think you should add a class to your div like that :
<div (click)="navigateToProducts()" class="myClass"> PRODUCTS</div>
(or ng-class, I don't know I don't use angular)
and then in your css file :
.myClass {
cursor: pointer;
}
hope this help !
You can write in-line css to change mouse shape
<div style="cursor:pointer" (click)="navigateToProducts()" > PRODUCTS</div>