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;
}
I am trying to align 2 elements on same line. Alignment is fine but for different devices sometimes search fab-mini goes outside the view and for some devices fab-mini comes very much inside. How to align fab-mini properly aligned to the right side and input element alight to the left for every device.
<section>
<div fxLayout fxLayout.xs="row" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
<div fxFlex="96%" fxFlex.xs="90%" fxFlex.md="90%">
<ng-select
[placeholder]="to.placeholder"
[formControl]="formControl"
[items]="items"
[addTag]="addTag"
[hideSelected]="true"
multiple="true"
bindLabel="name"
>
</ng-select>
</div>
<div fxFlex="4%" fxFlex.xs="10%" fxFlex.md="90%">
<a href="javaScript:void(0)" mat-mini-fab color="primary" (click)="openSearchTable()">
<mat-icon>search</mat-icon>
</a>
</div>
</div>
</section>
Current situation
For web
For tablets and phones
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)
I have a simple toolbar with two components: an h1 and a menu button. I would like the h1 centered in the toolbar and the menu button on the left. after playing around with the material design attributes I still cannot achieve my end goal. do I need to write custom css? here is my index html as of now
<md-toolbar layout="row" layout-align='start center'>
<md-button class="md-icon-button md-primary" aria-label="Settings" flex='10'>
<i class='material-icons md-36 md-light'>menu</i>
</md-button>
<h1 class='title' flex='90'>MusiComp</h1>
</md-toolbar>
You can play around with <div class="mdl-layout-spacer"></div>. Try adding this right before your <h1 class='title' flex='90'>MusiComp</h1>
I have two columns in a row.
<div class="row">
<div class="col-lg-2">
I want this column in bottom side on mobile.
</div>
<div class="col-lg-8">
I want this column in top side on mobile.
</div>
</div>
When I visualize this on my laptop, they are in left and right side respectively. When I watch the page on my mobile phone I see first column on top of the web page.
I want to change the order, first column left side on laptop and bottom side on mobile phone instance of first column that is left side on laptop and top side on mobile phone.
I want to keep the laptop aspect, only change mobile phone view.
Check out the documentation of Bootstrap 3's grid system:
http://getbootstrap.com/css/#grid
By adding the *-lg classes you have only specified how your page should behave on a large screen.
You probably want to add the *-xs classes for defining the columns in the smartphone widths. You can keep the *-lg classes just as they are now.
Furthermore, for changing the order of columns in different widths, bootstrap provides *-push and *-pull classes, see here: http://getbootstrap.com/css/#grid-column-ordering
add class to the larger div .pull-left, and smaller div .pull-right
<div class="row">
<div class="col-lg-2 pull-right">
I want this column in bottom side on mobile.
</div>
<div class="col-lg-8 pull-left">
I want this column in top side on mobile.
</div>
</div>
This will float the second larger div to the left, and thus in the mobile view, where .col-lg-8 is not applicable, will bring it on top
Edit: As this answer creates a gap between two divs, because there are only 10 columns utilized
You will need to change your html see this http://jsfiddle.net/53u69ama/1/
<div class="row">
<div class="col-sm-8 col-xs-12 ">
I want this column in top side on mobile.
</div>
<div class="col-sm-2 col-xs-12 ">
I want this column in bottom side on mobile.
</div>
</div>
Edit 2: you can also change the top position using position style, but this will require you to set the static top for one div. Or you may change it using javascript dynamically.
see this http://jsfiddle.net/53u69ama/2/
Solution:
<div class="row">
<div class="col-lg-8 col-lg-push-2">
I want this column in top side on mobile.
</div>
<div class="col-lg-2 col-lg-pull-8">
I want this column in bottom side on mobile.
</div>
</div>
Use this
<div class="row">
<!-- this is visible if view is all less lg (on top) -->
<div class="device-xs visible-xs device-sm visible-sm device-md visible-md">
<div>
Content to view 2.
</div>
</div>
<div class="col-lg-2">
Content to view 1
</div>
<!-- this is visible when view is lg (in right) -->
<div class="col-lg-8 device-lg visible-lg">
Content to view 2.
</div>
</div>
Note that you will have to copy "Content to view 2." twice.