I am working on angular project. I am trying to make a collapse. My code is as follows
<div class="myClass">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
</mat-panel-title>
<mat-panel-description>
Description
</mat-panel-description>
</mat-expansion-panel-header>
</mat-expansion-panel>
</mat-accordion>
</div>
.myClass {
display: flex;
flex-direction: column;
margin-top: auto;
}
.mat-expansion-panel-header {
width: 99.7vw;
}
.mat-expansion-panel-header-description {
flex-grow: 1;
}
Reason for using margin-top:auto because I want this collapse at end of page. Once I click on collapse icon my collapse should open and it should look like as shown in image
Once my collapse open I want to have these types of card with my data and on opening of this collapse I want to 4-5 boxes/cards in row as shown but in case if more data is present then I want to slide using ">>" and show these box/cards. If I click "<<" on left hand side then it should move in that direction. How can I do that?
This is called a carousel. Not the easiest of things to do if you're new to angular. I would recommend just using owl carousel. There's an angular wrapper you can use. Or if you want to make a carousel on your own you can follow this guide.
For the collapsing of the carousel, you'd have to make a button that switches collapse state. Something like this-
<button (click)="collapsed = !collapsed"></button>
<div *ngIf="!collapsed" >
<carousel-component></carousel-component>
<div>
Related
The sample code:
<div>
<mat-list fxLayout="row" dense>
<mat-list-item *ngFor="let label of labelsList"> <!-- just an array of strings -->
<button mat-button>
<mat-icon>cloud</mat-icon>
{{label}}
</button>
</mat-list-item>
</mat-list>
</div>
The result:
When I resize the browser window:
What I need: the buttons that don't "have room" to simply go on the next row.
How do I achieve this? I tried several combinations of CSS classes, properties, etc... nothing worked.
LATER EDIT: here's a complete reproducible example: https://angular-svt72k.stackblitz.io
mat-list-item is by default using the full width of its container and setting each item as display: block. To overrule this, you need to override the default Angular (Material) styling that comes with <mat-list>.
Setting .mat-list-test to display: flex and adding flex-flow: row wrap will make it go to the next line when there's not enough space available. Next to that, as said, the .mat-list-item styling is taking the full width. You can override it by setting display: initial and width: auto. Read more about flexbox at MDN.
CSS
.mat-list-test {
display: flex;
flex-flow: row wrap;
}
.mat-list-base .mat-list-item.mat-list-item-test {
display: initial;
width: auto;
}
See this example on StackBlitz to show the outcome.
I'm working in a project where we have implemented ng-bootstrap and I'm now working on the toast-component and to it more suitible for our company.
What I'm trying to achive right now is to make a button inside of the toast to be on the far right while the text will be on the left. Right now the button comes directly after the text, which leaves a lot of space to the right of the button.
In the documentation (https://ng-bootstrap.github.io/#/components/toast/overview) they say:
We provide a dedicated ngb-toasts CSS class you could use, or write your own styles in case some specificities would be needed.
However per my understanding is that it only styles the toast it self and not the things inside of it, which is what I want to do.
I'm trying to achive this by adding in flexbox
SCSS
.toast {
display: flex;
flex-direction: row;
justify-content: space-between;
.text,
button {
align-self: center;
}
}
HTML
<ngb-toast *ngFor="let toast of toastService.toasts" [class]="toast.classname" class="toast">
<ng-template [ngIf]="isTemplate(toast)" [ngIfElse]="text" class="text">
<ng-template [ngTemplateOutlet]="toast.textOrTpl"></ng-template>
</ng-template>
<ng-template #text class="text">
<span>
{{ toast.textOrTpl }}
</span>
</ng-template>
<button class="btn ml-2" [class]="toast.classname" (click)="toastService.remove(toast)">
{{toast.button}}
</button>
</ngb-toast>
When I build the application and runs it, I can see in the browsers devtool that ng-bootstrap has added a new div with class="toast-body".
First question I have is why does it get added and for what reason?
This new div then contains my text and my button, which means that the they aren't affected by my flexbox that I added in the (now parentclass to toast-body).
I tried to address this issue in a simple way by adding in the newly created div in my style.css as well.
SCSS
.toast {
& >.toast-body {
display: flex;
flex-direction: row;
justify-content: space-between;
.text,
button {
align-self: center;
}
}
}
Sadly this approach doesn't work, the styles aren't hitting <div class="toast-body">.
What do I need to change / do in order to get the result I want?
How can I make sure that my styles trigger <div class="toast-body"> and the content inside of the div?
I am using Angular 8 and want to show Angular Grid inside Angular Material Tab in following manner:-
<mat-tab-group>
<mat-tab label="Request Flow">
<div class="div-main">
<ag-grid-angular class="ag-theme-balham grid-dimensions" [pagination]="true"
[gridOptions]="reqDetailGridOptions" [rowData]="reqDetailRowData" [columnDefs]="reqDetailColDef"
[getRowHeight]="getRowHeight" [paginationPageSize]=50 (gridReady)="onGridReady($event)">
</ag-grid-angular>
<br />
<button class="button-internal">Add Subrequest</button>
</div>
</mat-tab>
</mat-tab-group>
The issue is that even if data present in Angular Grid then also Angular Material Tab is not expanding to make Angular Grid visible. It is showing like below:-
However when I put Angular Grid outside Angular Material Tab then the grid is showing its full data.
I tried to use "dynamicHeight" property of "mat-tab-group" but it is of no use.
Please help here.
Below steps worked for me:-
Added [dynamicHeight] = "true" to mat-tab-group.
Added following CSS:-
.mat-tab-group{
height: 100%;
}
.mat-tab-body-wrapper {
flex-grow: 1;
}
.mat-tab-body {
display: flex !important;
flex-direction: column;
}
This worked for me:
::ng-deep.mat-tab-body-wrapper {
flex-grow: 1;
}
you have to override mat-tab-body-wrapper style with ::ng-deep
I'm developing an Ionic app, and having trouble with my header component. Its elements are wrapping with small screen sizes, and I would like them not to.
Here's the goal:
Here's what's happening now:
I know I could set a fixed width to the header, but I would like not to. I also wouldn't like to use JavaScript to calculate the width.
Here's the HTML/Angular/Ionic code for the title component:
<h1 *ngIf="backButton; else titleBackButton">{{ title }}</h1> <!-- show if backButton != true -->
<ng-template #titleBackButton> <!-- show if backButton == true -->
<button ion-button round class="button-back">
<ion-icon name="arrow-back"></ion-icon>
</button>
<h1 class="floated-title">{{ title }}</h1> <!-- this has been floated to the right -->
</ng-template>
Here are my CSS styles:
.button-back {
margin: 17px 0 0 10px;
}
.floated-title {
float: right;
}
Any time you want to force elements to line-up in a row, and never wrap, give the parent container display: flex. This automatically applies flex-wrap: nowrap and flex-direction: row.
The above suggestion applies to plain CSS. Some frameworks may set different defaults.
For instance, in React, flex-direction defaults to column.
Alternatively, you can apply white-space: nowrap to the container, which suppresses all line breaks inside the container.
I am trying to create a bootstrap accordion for my app. I also have background color in its parent element. My problem is that when I expand my accordions, it extends the height of my page and the background color doesn't cover the extended area.
my html
<div id='wrapper>
<accordion id='accordion' close-others="false">
<accordion-group>
<accordion-heading >
<h2 class='title'>Title 1</h2>
</accordion-heading>
<div id="first" class="panel-collapse collapse in">
//contents...
</div>
</accordion-group>
//I have 5 to 6 accordion group.
</accordion>
</div>
CSS:
//I used height:100% and it looks fine when the page first loaded but not after //user //expand all the accordion.
#wrapper{
background-color: red;
height: 100%;
display: block;
}
Can anyone help me about it? Thanks a lot!
Looking through the documentation I noticed you could catch the event shown.bs.collapse which
is fired when a collapse element has been made visible to the user
(will wait for CSS transitions to complete).
So you could try something like:
$('#myCollapsible').on('shown.bs.collapse', function () {
document.getElementById('wrapper').style.backgroundColor="red";
})
Edit: if that does not work try show.bs.collapse