is there a way to set a minimum height on the angular material expansion panel content when its open? I've seen a number of examples for setting the expandedHeight and collapsedHeight for the header, but not for the content. There is a reference to MatExpansionPanelContent in the Angular Docs here: https://material.angular.io/components/expansion/api#MatExpansionPanelContent
but I'm not seeing any properties that could be used to set a min height.
I've got a side nav coming out on top of a component with a mat accordion, and the side nav gets squished to the size of the expansion panel within the accordion. My html set up is below:
<div class="mtTool" fxLayout="row" fxLayout.sm="column">
<div fxFlex="65" >
<mat-sidenav-container>
<mat-sidenav #sidenav mode="over" closed>
<app-mt-mark-form [mtp]="mtp" ></app-mt-mark-form>
</mat-sidenav>
<mat-sidenav-content>
<app-mt-ticket-list></app-mt-ticket-list>/* this has the mat accordion
</mat-sidenav-content>
</mat-sidenav-container>
</div>
<div fxFlex="35">
<app-mt-map></app-mt-map>
</div>
Thanks
Pete
I wrapped a div around the content and set a min height in css. It seems to work fine
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-description>
<h2>HEADER</h2>
</mat-panel-description>
</mat-expansion-panel-header>
<div class="ticketContent">
...content here
</div>
css
.markTicketContent{
min-height: 70vh;
}
Related
I am trying to build a layout that has the following shape:
I am trying to build the layout with tailwind css and flex properties but I can't manage to get the second sidebar right. Either the sidebar scrolls with the content or I cannot scroll the content at all.
My tailwind code roughly looks the following:
<div className="flex">
<div className="h-screen sticky top-0">
{ Sidebar1 code ...}
</div>
<div className="min-h-0 w-full">
<div className="flex gap-x-4 p-5">
<div className="sticky flex-none w-1/5">
{sidebar 2 code }
</div>
<div className="p-5">{content}</div>
</div>
</div>
</div>
I tried playing with overflow properties but cannot get what I want. What am I missing ?
I'm not sure if you meant that the sidebar1 and 2 should always be sticky but I made almost the exact same screen you provided, I added overflow-y-scroll to the content div to it won't overflow
check it here : https://play.tailwindcss.com/SzzWQnn5Fi
In future, it would be helpful to include solutions that have not yet worked.
If I understand your question correctly, you want to make sidebar2 stay fixed in place while you scroll through content. That can be achieved using position: absolute
Positioning with examples is explained here
I have a header section in a website which consists of:
Logo
Login, Register buttons
Menu
Language picker
And I want to make them in a single row, but the problem is that they overlap each other when I am resizing the window, specifically the login button overlaps the logo and the language picker overlaps the main menu.
<div id="header-container" class="container">
<div id="header-container-nav" class="row align-items-center">
<div class="col-md-3">LOGO</div>
<div class="col-md-1">LOGIN BUTTONS</div>
<div class="col-md-5">MENU</div>
<div class="col-md-1">LANGUAGE</div>
</div>
</div>
Instead of using bootstrap here, I would use flex
I'd use this HTML
<div id="header-container-nav">
<div">LOGO</div>
<div>LOGIN BUTTONS</div>
<div>MENU</div>
<div>LANGUAGE</div>
</div>
and this CSS
#header-container-nav {
display: flex;
}
And now you can adjust the size of each item (check out this article http://javascriptkit.com/dhtmltutors/css-flexbox2.shtml)
This usually isnt a problem but just Material 2 is very under-documented atm so im having trouble making all images the same size but properly resize with window change
All the images I have were pretty similar in size when I created then but one was abit longer height wise, but my old code just adjusted that with some bootstrap calls.
But using the image in a mat-card it is a longer length and thus looks out of place shown here:
The BAC calculator's image is longer than the rest so it looks out of place and pushes others out of proportion under it or forces an empty cell, here is my call for displaying these:
<div *ngIf="data;else other_content">
<div class="row">
<div *ngFor="let project of data" class="col-md-6">
<div>
<mat-card class="mat-elevation-z4">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>{{project.title}}</mat-card-title>
<mat-card-subtitle>{{project.category}}</mat-card-subtitle>
<div class="grow-empty"></div>
<div *ngIf="project.source">
<button mat-raised-button (click)="openSite(project.source)">SOURCE</button>
</div>
</mat-card-header>
<img mat-card-image src="{{project.image}}" alt="{{project.title}}">
<mat-card-content>
<p>
{{project.detail | slice:0:250}}...
</p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button>Information</button>
</mat-card-actions>
</mat-card>
</div>
<br>
</div>
</div>
</div>
If I set the height as a static like '300', it technically fixes the issue but rescaling will just ruin it
I want it to be a set scale like it is, but take any image and scale it up/down to sit and be an appropriate size for the card itself (like Callum.Tech card for example)
Just add this style reference in your code.
If you want to apply this styles to all your cards in the view, add to your style file:
mat-card img{
object-fit: cover; /*this makes the image in src fit to the size specified below*/
width: 100%; /* Here you can use wherever you want to specify the width and also the height of the <img>*/
height: 80%;
}
Another solution to this issue may be using the class of bootstrap "img-responsive". Here is a brief description
Just add css-class to the image and and style the image from the SCSS file.
<img mat-card-image class="imgs src="{{project.image}}" alt="{{project.title}}">
Now in SCSS:
imgs {
height: 50px;
width: 50px;
}
And for more to Information visit W3school.com/image.
I'm trying to use material2 sidenav component. I want it to be separate from content. Just a full-height sidebar that slides there and back - without any sidenav-layout as it creates some unwanted things in my app layout.
What I want looks really close to https://inbox.google.com/u/0/?pli=1 sidenav.
What I currently have is:
If you want to separate side bar and main content, Use the bootstrap column classes to achieve as below,
<md-sidenav-container class="container-fluid">
<div class="col-md-1">
<button md-button (click)="sidenav.open()">
<i class="fa fa-list"></i>
</button>
</div>
<div class="col-md-11">
Main content goes here
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<md-sidenav #sidenav class="example-sidenav">
Manu bar
</md-sidenav>
</md-sidenav-container>
Note:Break tags are added to increase the height of the content.
LIVE DEMO
I have a slider that I need to fit its content within the bootstrap container. However, I want to put the pager outside the container. This is my logic but it doesn't work.
<div class="container-fluid"><!-- a wrapper for the slider and its pager -->
<div class="pager">
my pager content
</div>
<div class="slidercontent container"><!-- so that the slider content fits within the container area with the normal margins-->
my slider content
</div>
</div>
CSS:
.pager{
position:absolute;
left:-50px;
}
Can't see your code though...