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
Related
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>
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?
The goal
I'm trying to write my own search bar for mat-table. The search bar consists only of inputs - one for each column. I placed it right above the table and now I'm trying to distribute them equally with the help of flex-layout, like the table does with its columns.
The problem
But the problem is that those inputs don't listen to me and don't shrink but they overflow outside the wrapping element. I need them to shrink equally to fit in the wrapping section but I don't know how to do this.
The code
Here is the sample of the code I wrote so far:
<section fxLayout="row" class="search-table" style="overflow-x: auto;">
<mat-form-field *ngFor="let item of items" fxFlex>
<input matInput type="text" placeholder="sample text" fxFlex>
</mat-form-field>
</section>
.search-table {
border: 1px solid black;
}
EDIT
Here's stackblitz example of my problem. Flex-layout don't work there for some reason so I added flex to css.
The problem comes from the .mat-form-field-infix class which sets a width of 180px on the input.
Solution: Add the class below to the styles.css file
.mat-form-field-infix {
width: auto!important;
}
StackBlitz: here
I have two React Components, Open and Save. The Save component contains an saveButton. The Open component contains an openButton, along with a stopButton and executeButton that shows up depending on the state of the component. I want my Open and Save components to be lined up next to each other, on the same row:
<div style={{display:'flex', flexDirection:'row}}>
<Save></Save>
<Open></Open>
</div>
The initial state looks like this:
The state where all four buttons show look like this:
Remember that Execute and Stop are part of the same Open component that contains the Open button. How can I align the components so that the Save/Open buttons are aligned all the way to the left, and the Execute/Stop buttons are aligned all the way to the right?
For clarification, I want the buttons formatted like this:
Save Open ------------all whitespace here--------------- Execute Stop
Edit: Here is the (very simplified) code for the components
// Save
<Button>Save</Button>
//Open
this.state = { executeFlag: false, stopFlag: false}
render(){
let stop;
let execute;
if(this.state.stopFlag) stopButton = <Button>Stop</Button>;
if(this.state.executeFlag) executeButton = <Button>Execute</Button>;
return(
<div>
<Button>Open</Button>{execute}{stop}
</div>
);
}
In your css maybe you could try setting the width of the buttons to 50% each and margin to zero. I believe flex will display on the same row as long as they can fit.
There are a few ways to do that... It really depends on the structure of your component and not just the control buttons. Here is a sample structure I usually use for something similar in plain HTML CSS for your reference
.container {
display: flex;
}
.component-b {
flex-grow: 1;
display: flex;
justify-content: space-between;
}
.sub-menu{
display: flex;
justofy-content: flex-end;
}
.button {
background: #1E88E5;
padding: 0.5rem 1rem;
margin: 0.5rem;
}
<div class="container">
<div class="component-a button">
Save
</div>
<div class="component-b">
<div class="button">
Open
</div>
<div class="sub-menu">
<div class="button">
Execute
</div>
<div class="button">
Stop
</div>
</div>
</div>
</div>
One way of achieving this is by wrapping two components set in one div and then wrapping all in div and using flex properties
<div style={{
display:'flex'
justifyContent:'space-between',
aligItems:'center'
}}
>
<div style={{display:'flex', flexDirection:'row',justifyConetent:'space-around'}}>
<Save></Save>
<Open></Open>
</div>
<div style={{display:'flex', flexDirection:'row',justifyConetent:'space-around'}}>
<Execute></Execute>
<Stop></Stop>
</div>
</div>