Material grid list in Material grid tile possible (nested grids)? - material-design

I guess, it is not allowed to put a material grid in a material grid (nesting grids)?
Can someone please confirm my assumption?
(I am using Angular Material 6.)
<mat-grid-list cols="6" gutterSize="32px">
<mat-grid-tile [colspan]="3">
left
<mat-grid-list cols="3" gutterSize="8px">
<mat-grid-tile>1</mat-grid-tile>
<mat-grid-tile [colspan]="2">2</mat-grid-tile>
<mat-grid-tile [colspan]="3">3</mat-grid-tile>
</mat-grid-list>
</mat-grid-tile>
<mat-grid-tile [colspan]="3">
right
<mat-grid-list cols="3" gutterSize="8px">
<mat-grid-tile>4</mat-grid-tile>
<mat-grid-tile [colspan]="2">5</mat-grid-tile>
<mat-grid-tile [colspan]="3">6</mat-grid-tile>
</mat-grid-list>
</mat-grid-tile>
</mat-grid-list>
The result should be look like this (two different gutter sizes):
Why do I want this? The design I have to implement has DIFFERENT GUTTER SIZES between the columns :-/ I thought a grid in a grid would be a clever solution, but it doesn't work.
UPDATE:
The solution suggested here does not work, as this is only possible in the older AngularJS Material.

After trying everything I could think of, I came to the conclusion, that material grid in material grid is not possible and probably conceptually not meant to work (understandably).
I decided to solve my problem by using a CSS grid (https://www.w3schools.com/css/css_grid.asp). This works (so far):
<mat-grid-list cols="2" rowHeight="fit" gutterSize="32px">
<mat-grid-tile>
<div class="css-grid">
<div class="css-grid-tile top-left">
</div>
<div class="css-grid-tile top-right">
</div>
<div class="css-grid-tile bottom">
</div>
</div>
</mat-grid-tile>
<mat-grid-tile>
<div class="css-grid">
<div class="css-grid-tile top-left">
</div>
<div class="css-grid-tile top-right">
</div>
<div class="css-grid-tile bottom">
</div>
</div>
</mat-grid-tile>
.css-grid {
display: grid;
grid-gap: 8px;
grid-template-columns: 33% 67%; // two columns
grid-template-rows: 33% 67%; // two rows
height: 100%;
width: 100%;
.css-grid-tile {
&.top-left {
grid-column: 1 / 2;
}
&.top-right {
grid-column: 2 / 3;
}
&.bottom {
grid-column: 1 / 3;
}
}
}

Related

Clarity Design Systems - Vertical Nav

I was looking at the Vertical nav options on clarity. I would just like to know if its possible to right align the nav?
the example code I used on clarity is as follows:
<div class="main-container">
<header class="header">
...
</header>
<div class="content-container">
<div class="content-area">
<router-outlet></router-outlet>
</div>
<clr-vertical-nav>
<a clrVerticalNavLink routerLink="./charmander" routerLinkActive="active">Charmander</a>
<a clrVerticalNavLink routerLink="./jigglypuff" routerLinkActive="active">Jigglypuff</a>
<a clrVerticalNavLink routerLink="./pikachu" routerLinkActive="active">Pikachu</a>
<a clrVerticalNavLink routerLink="./raichu" routerLinkActive="active">Raichu</a>
<a clrVerticalNavLink routerLink="./snorlax" routerLinkActive="active">Snorlax</a>
<a clrVerticalNavLink routerLink="./credit" routerLinkActive="active">Credit</a>
</clr-vertical-nav>
</div>
This works perfectly but aligns the nav to the left margin. Any advise on how to align it to the right margin?
Clarity uses flexbox order property to align side-nav to left
If you want to align side-nav to right change the negative order
to positive number Or zero
.sidenav{
flex: 0 0 auto;
order: 1;
}
or
.main-container .content-container .clr-vertical-nav, .main-container .content-container .sidenav {
flex: 0 0 auto;
order: 1;
}

How to implement position responsive patterns in MDC-Web (material-components-web)?

Tell me please how to use the material-components-web to implement this pattern:
Link on Material.io
#PavelB answer's has a minor problem on smaller screens, namely smartphones. The main section overlaps the content of the navbar.
Each .mdc-toolbar__row has a height of 64px on tablets and smartphones, but on smartphones its height is 56px.
This can be solved using media queries, like this:
.demo-toolbar {
margin-bottom: -192px;
}
#media (max-width: 599px) {
.demo-toolbar {
margin-bottom: -168px;
}
}
EDIT: here's the edited pen.
Solved this problem as follows:
CSS
.demo-toolbar {
margin-bottom: -190px;
}
HTML
<header class="mdc-toolbar demo-toolbar">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
menu
<span class="mdc-toolbar__title">Title</span>
</section>
<div class="mdc-toolbar__row"> </div>
<div class="mdc-toolbar__row"> </div>
<div class="mdc-toolbar__row"> </div>
</header>
https://codepen.io/anon/pen/jmwgjQ

How to make only one column fluid in bootstrap

The following is the structure of my layout in Bootstrap 3.2:
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<!-- I want this column to be fixed. -->
</div>
<div class="col-xs-6">
<!-- I want only this column to be fluid. -->
</div>
<div class="col-xs-3">
<!-- I want this column to be fixed. -->
</div>
</div>
</div>
As you can see in psuedo-code comments, I want only the middle column to be fluid according to the screen size.
Is it possible in container-fluid fashion of Bootstrap? Or I should go through other ways?
There is no "Bootstrap way" to have columns a fixed width. So, we can use CSS to do what you want in a few ways
Use flexbox (the best way) - Demo.
.row {
display: flex;
}
.fixed-side-column {
width: 250px;
}
.fluid-middle-column {
flex-grow: 1;
}
Use calc() (or the JavaScript equivalent) keeping in mind browser support - Demo
.row > div {
float:left; /* Could also use display: inline-block. */
}
.fixed-side-column {
width:250px;
}
.fluid-middle-column {
width:calc(100% - 500px);
}
Use absolute positioning and padding on the middle element to remove the need for any calculations - Demo
You'd have to change the markup some
<div class="container-fluid">
<div class="row">
<div class="fluid-middle-column">
<!-- I want only this column to be fluid. -->
</div>
<div class="fixed-side-column">
<!-- I want this column to be fixed. -->
</div>
<div class="fixed-side-column right">
<!-- I want this column to be fixed. -->
</div>
</div>
</div>
/* CSS */
.fixed-side-column {
width:250px;
float:left;
}
.right {
float:right;
}
.fluid-middle-column {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
padding: 0 250px 0 250px;
}
You'll need to add custom media queries to handle what happens when the screen is getting small.

Bootstrap: fluid layout with no external margin

if i have:
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
Some Element....
</div>
<div class="span4">
Other Element
</div>
</div>
</div>
With this code i have some margin from left and right window borders. How can eliminate these margins?
Thanks for your support
If i understand your question correctly, I believe you want this:
.container-fluid {
padding: 0px;
}
Also if you are using responsive bootstrap you will also want this:
#media (max-width: 797px) {
body {
padding-left: 0px;
padding-right: 0px;
}
}
Edit: here is a js fiddle.
The effect you are seeing is because of the container’s padding.
You can change the container’s default padding with the built-in Bootstrap 4 spacing utility classes.
To remove the padding, add p-0 to the container:
<div class="container-fluid p-0">
<div class="row">
<div class="col-8">
Some Element....
</div>
<div class="col-4">
Other Element
</div>
</div>
</div>
Using the built-in utility classes has the benefit of keeping your CSS lean and it also does not modify the default container-fluid class definition.

IE7/IE8 Compatible rendering floated layout wrong

I have a site with a right sidebar and a left main content area. Code looks like this:
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="rightside">rightsidecontent</div>
<div class="rightside">rightsidecontent</div>
<div class="rightside">rightsidecontent</div>
with
.leftside
{
float:left;
width:710px;
}
.rightside
{
margin-left:720px;
}
(see actual site at http://blog.stephenkiers.com/)
Reason it is coded this way is so that because the leftsidecontent is important and I want to be first data accessed by visually impaired visitors; instead of them having to skip all the fluff every time!
The code works in FF, IE8, Safari etc; but in IE7 the rightside divs clear the floated divs.
I would love any suggestions you may have. I have some ideas about how to fix it; but they all involve pretty big rewrites.
thanks!
why don't you try wrapping the content stuff into two columns like this example
The CSS:
.leftside {
float:left;
width:710px;
}
.rightside {
float: left;
margin-left: 20px;
}
.contentBlock { margin-bottom: 10px; background: #ccc; padding: 8px; }
The HTML:
<div class="leftside">
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
</div>
<div class="rightside">
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
</div>
This way the leftside and rightside are just layout elements and are isolated from the content.
Another good tip for visually impaired visitors is to have links at the top of the page to allow users to skip directly to content sections and hide them from your layout with css:
.skipToLinks { position: absolute; top: -100px;}

Resources