Angular Material List design - css

I need to design a parent container, which has fixed length child list items (150 px).
1) when the parent container is resized the children list Items should flow from left to right and should break into New Row & the space between the child list items should be evenly distributed.
pls tell me how to achieve this using angular material. pls see the below picture for my requirement.
I tried to implement this.. using the following code.
<div layout-padding layout-fill layout="row" layout-wrap layout-align="space-around start">
<div ng-repeat="student in students"
style="width: 150px; height: 52px;line-height: 52px;min-height: 52px;max-height: 52px;
margin:8px;padding: 0px; border: solid 1px"
draggable="true">
{{student.name}}
</div>
</div>
but this is what I've got

Thanks to Mr. #MikeHarrison... I've edited my code like below & the result is exactly what I've wanted.!
<div class="md-padding" layout="row" layout-fill layout-wrap layout-align="start start">
<md-list-item ng-repeat="student in students" draggable="true" flex-xs="100" flex-sm="50" flex-md="33"
flex-gt-md="25" class="md-3-line" ng-click="alert('hi')">
<img src="../../_resources/images/boy_real.jpg" class="md-avatar"/>
<div class="md-list-item-text">
<h3> {{student.name}} </h3>
<h4> {{student.roll}} </h4>
<p> {{student.desc + ' guy'}} </p>
</div>
<md-divider md-inset></md-divider>
</md-list-item>
</div>
and the result in a browser is
and the result in a mobile is

That will be a totally new control, you will need to create your own using "pieces" of angular material. For example, you can create the list items out of the angular material md-button, host all the buttons inside a md-content if you want scrolling and use the md-layout to align your items. Obviously the most important part will be the styles for your control to have the look and feel of angular material.
The point here is that you will need to create your custom control. I recommend creating your own control module and add the necessary directives, services for you control to work.

Related

How to change fxFlex size on Window Size change?

I have two divs within my main fxLayout Container. They look like this:
Where the red box is the fxLayout Container, the blue box is the Information and the black box is the Chart. As may be noted, the charts div is larger than the information box's div. I would like it to stay this way when resized at all times. In order to achieve this, I have done the following:
information.component.html:
This component is simply a box with several mat-card. It is within a fxLayout container as well.
<div id = "dataInformation" fxLayout="column" fxLayoutAlign="space-evenly center" fxLayoutGap="5%">
<h1>CrowBox Information</h1>
<!-- ...CODE FOR DROPDOWN BUTTON... -->
<!-- ...EXAMPLE MAT-CARD... -->
<mat-card>
<mat-card-title>NICKNAME</mat-card-title>
<mat-card-content>{{ crowboxNickname }}</mat-card-content>
</mat-card>
<!-- ...SAME MAT-CARDS JUST WITH DIFFERENT PROPERTIES... -->
</div>
The only styling applied is width:75% for .mat-card and font related styling.
I then call this component in another component.
data.component.html
In here, I create the charts, call the information.component and place all of this within another fxLayout container. I also specify what should happen if the window is resized. I would like for the size proportions to remain the same when the container goes from a row to a column. However, for some reason, fxFlex.xs does not seem to be working for me and the chart ends up looking really small as can be seen here:
<div class="wrapper" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly center" >
<div id = "charts" fxFlex="60" fxFlex.xs="60">
<!-- THE CHART -->
<div *ngIf="showCoinsDeposited === false" >
<canvas baseChart
[datasets]="crowOnPerchChartData"
[labels]="crowOnPerchChartLabels"
[options]="crowOnPerchChartOptions"
[legend]="crowOnPerchChartLegend"
[chartType]="crowOnPerchChartType"
[colors]="crowOnPerchChartColor"
>
</canvas>
</div>
<!-- ...ANOTHER CHART HERE... -->
</div>
<!-- THE INFORMATION BOX -->
<div fxFlex="27" fxFlex.xs="27" style="border: blue; border-style: double;">
<app-information [crowsOnPerch]="crownsOnPerchValues" [coinsDeposited]="coinsDepositedValues"></app-information>
</div>
</div>
I have set fxFlex.xs for the chart to be 60 and fxFlex.xs for the information box to be 27. I do not think this is being accurately reflected and cannot seem to figure out why. I would like the chart to fill the width of the screen and be much larger. How might I achieve this?
Note: The charts and wrapper do not have any positional styling (only fonts and borders).
If I'm not mistaken, you want the two boxes on different rows while using the xs screens.
Note: fxFlex="60" is a shorthand for fxFlex="1 1 60%".
I think it's better to remove the fxLayout.xs="column" and use fxLayout="row wrap" and add fxFlex.xs="100" or whatever for your chart div. Then after adding fxFlex.xs for the next box, if the sum of the sizes is more than 100, the next item would go to the next row.
<div fxLayout="row wrap" fxLayoutAlign="space-evenly center">
<div fxFlex="60" fxFlex.xs="87" style="background: green">
box1
</div>
<div fxFlex="27" fxFlex.xs="40" style="background: yellow;">
box2
</div>
</div>
Also, there are lots of useful information and examples about flex-layout in here and here.

Angular 6 on Internet Explorer -- Angular Material/ Flex layout won't center?

I have a table inside a div that looks like this:
<div fxLayout="row" class="container" fxLayoutAlign="start center">
No related CSS -- I have tried various things but in internet explorer, where I have to use polyfills for anything to work anyway, it will simply refuse to center.
I've found a similar stackoverflow thread but the alignment of the items inside the div was different and didn't really apply to my use case.
I ended up wrapping my whole app in app.component.html like this:
<div class="container"
fxLayout="column">
<div>
<app-navigation></app-navigation>
</div>
<div fxFlexAlign="center" id="routerOutletDiv">
<router-outlet></router-outlet>
</div>
</div>
Then, in my component that I'm trying to center things, my main div where I wrap ALL other divs has the following:
<div fxFlexAlign="center" class="container" fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="15px">
Whilst most of the divs inside this 'parent' have the following:
<div fxFill class="item">
And some of them that had more items inside them, have the following:
<div fxFill fxLayoutAlign="center" class="item">
Also ended up adding fxLayoutAlign="center" to text that had icons inside it, it didn't want to center otherwise. But I did not have to add extra css or touch other properties.

Make a nested scrollable content area (with toolbar and sidenav) in Angular Material

I am simply trying to get my main view pages to scroll but can not seem to achieve this without setting the height of the div to a specific amount, even whilst using md-content.
The container div that I am using to place all the views is nested two levels deep using ui-view.
The root state is as follows:
<md-toolbar layout="row" layout-align="center center">
<h3>Site Title</h3>
</md-toolbar>
<div layout="column" flex id="content" ui-view></div>
Then the next view is used to display a toolbar and a sidenav that is present across all child states/views:
<div layout="row" flex>
<md-sidenav>
<md-list layout="column" flex>
//SCROLLABLE SIDENAV WORKS PERFECTLY
//NAVIGATION ITEMS LIVE HERE
</md-list>
</md-sidenav>
<div layout="column" flex>
<md-toolbar layout="row" layout-align="center center">
<h2>Subheading</h2>
</md-toolbar>
<div class="md-padding" ui-view flex>
//THIS IS WHERE THE CHILD VIEWS GO
</div>
</div>
I have tried adding a class to both this final ui-view and also to a div but can only achieve scrolling with a specific height (which obviously doesn't work across devices) and by changing the position which causes problems given that there are two toolbars above it (and also with FAB's that float on top).
md-content doesn't work properly, I'm not sure why something so simple is so difficult in this situation. I am redesigning my webapp which has always used Bootstrap so please forgive my lack of CSS skills as it was already layed out when I received it.
Thank you for your help.
The Parent class which contains the following code must have layout="column" and use md-content wherever you use ui-view.
<md-toolbar layout="row" layout-align="center center">
<h3>Site Title</h3>
</md-toolbar>
<md-content layout="column" flex id="content" ui-view>
</md-content>
Similarly you should use md-content in following child elements to get the desired result.
Here is the Codepen.

Is it possible to put "row"-s inside "d-flex" in Bootstrap 4?

(There's a similar question here, but I am too much of a noob yet to translate this onto Bootstrap)
What I want is to have an area on the page between "header" and "footer" (let's call it "body"), which may have a
some fixed section, like BS4 "row", put on the top,
some variable content, consisting of several BS "rows", AND aligned
vertically on the middle of what is left of the body (or of the body
itself)
Can it be done in a responsive manner, and without JS (using only Bootstrap 4 CSS) ?
I've tried some stuff:
<body>
<div id="root" class="container">
<div style="height: 100%;">
<div><h1>HEADER</h1></div><hr>
<div style="min-height: 60%;">
<div class="h100">
<div>some badge</div><br>
<div>
<div class="row justify-content-between">
<div class="col-3">Item #2</div>
<div class="col-3 text-right">
<div>some stats</div>
</div>
</div>
<div class="">
<div class="row justify-content-center">
<div class="col text-center"><h3>THIS SHOULD BE IN THE MIDDLE OF A BLANK SPACE</h3></div>
</div>
<div class="row justify-content-center">
<div class="col-4 text-right"><button class="btn btn-link">it's just below and left</button></div>
<div class="col-4 text-left"><button class="btn btn-link">it's just below and right</button></div>
</div>
</div>
</div>
</div>
</div><hr>
<div class="footer">FOOTER</div>
</div>
</div>
</body>
(https://jsfiddle.net/f93mhdbr/) but as long as I add "d-flex" onto "body" div, or any of it's children, all the previous "row"/"col"-based layout turns into horrible mess ! (see https://jsfiddle.net/f93mhdbr/2/)
I suspect this is due to Bootstrap itself using Flexbox for column and rows,
but maybe any solution exists?
I will try to work on improving this question, I know it's very poor, but I right now I am too much in a despair to work it all out...
UPDATE: added links to whatever I was trying to reproduce
You need to use the flex property to achieve it. Using flex-grow here will make your variable element to grow and fill the remaining height of its container, if there is any. Then all is left to do is set align-items-center on the element to align it on the x-axis.
Here is the Fiddle
Please note I added background-colors so it's easier for you to see how much space each element uses, or use an inspector.
You can set any fixed height for the header, footer and content-top. The height of content and content-remaining will adapt responsively, because they have the property flex-grow: 1 set on them. Here's an example.
To explain further, because the container wrap has a min-height: 100-vh, the content element will grow to fill the entire viewport relative to the rest of the flexible items inside the wrap container. The same logic applies to content-remaining, the only difference is that its parent is the content element and not the wrap container.
As last, I added the IE fix for the min-height property on flex-items. It's a known bug and a quick and reliable fix is to wrap it in a separate flex container.
Hopefully this was helpful to you, if you have any questions left please comment on this answer.

align img, span, and div with bottom border

I have an image, single character in a span (equal sign), and then a div where child elements are added/replaced via js.
However, I can't for the life of me figure out how to get it all aligned properly (fear I'm over thinking and complicating it.)
I'm using bootstrap's grid (row/col) system as well.
Something akin to...
<div class="container">
<div class="row">
<div class="col-lg-2 col-offset-lg-1">
<div class="response-part">
<img src="foo" />
<span class="opensans">=</span>
<div id="rp1" class="opensans inline" style="width: 50px;">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="response-part">
<img src="foo" />
<span class="opensans">=</span>
<div id="rp2" class="opensans inline" style="width: 50px;">
<span class="opensans">X</span>
</div>
</div>
</div>
</div>
</div>
See jsfiddle
Wanting image centered middle along equal sign (vertical-align) as well as span within neighboring div (and the text in that span appearing just a few pixels off the bottom line.)
I saw this but none of the solutions are addressing the problem for me (I can only guess it is because of the third element and font, etc.)
UPDATE1: Edited sample html to correctly reflect the scenario in which the response-part.div is empty (initial state, possible transition state as user interacts with the page.) Updated fiddle
UPDATE2: I "fixed" the issue occurring with no child elements by adding an initial element in the initial html for the response-part, and then adding one back in when the user removes all other elements. A bit hackish, would appreciate a fix that didn't involve this workaround if possible. Updated fiddle
PS: I initially considered using bootstrap v4 (with flexbox support) but it is still alpha. Alternatively, I also looked into using FlexboxGrid, however I still need bootstrap for other features and FlexboxGrid uses similar classes ("row", etc) as bootstrap, which I assumed would cause name conflicts (if I included both in my project, eg: which "row" class would be used!)
Try using display: flex; on your response-part class. Something like this:
.response-part {
display: flex;
align-items: center;
}
I edited your fiddle. Take a look on it: https://jsfiddle.net/gusLnyyh/6/

Resources