I am new to angularJS, I am trying md-tabs to create an items page, where each item is a tab on the page listing its details, here is my HTML code:
<md-content class="md-padding">
<md-tabs md-dynamic-height="" md-border-bottom="" md-autoselect="">
<md-tab ng-repeat="itemTab in itemList" label="{{itemTab.name}}">
<div style="padding: 35px; text-align: left;">
<div ng-repeat="detail in itemTab.details">
<p><pre>{{detail.info}}</pre></p>
</div>
</div>
</md-tab>
</md-tabs>
</md-content>
Here when the number of items increases, more than it can show on the page there is no pagination arrow that would help me to scroll to next set of items, can anyone help me with this problem?
The issue is probably related to you css. Try including the angular material css only and try if it works.
Related
I copied this sidenav demo from the angular material docs.
https://material.angularjs.org/latest/demo/sidenav
And added the first toolbar demo to it from https://material.angularjs.org/latest/demo/toolbar
What I want is the toolbar to be fixed.
Codepen demo: http://codepen.io/gvorster/pen/BzWvGe
When adding this style the toolbar is fixed.
<md-toolbar class="md-hue-2" style="position:fixed !important">
But the icons on the right are gone.
Resizing the screen until the sidenav is hidden will show the right side icons.
Removing the style shows the right side icons but the toolbar is not fixed:
Is there a way to get a sticky toolbar and have the rigth side icons shown.
You have to use md-sidenav inside the md-content container. Plus try to use md-content instead of div tag. In your example you gave wrong values to layout-align attribute. Please check the appropriate values in the Docs.
Here is the basic structure for your requirement.
<md-content flex>
<md-toolbar>
</md-toolbar>
<md-content layout="column" layout-fill>
<!-- content -->
<md-sidenav>
</md-sidenav>
</md-content>
</md-content>
here is the working pen. http://codepen.io/next1/pen/xOqMjy
You need to add layouts for all containers and move the toolbar out of the md-content that should be scrolled.
<div layout="row" flex>
<md-sidenav></md-sidenav>
<div layout="column" flex>
<md-toolbar></md-toolbar>
<md-content></md-content>
</div>
<md-sidenav></md-sidenav>
</div>
Here's a working demo: http://codepen.io/anon/pen/EyWJKK?editors=1010
I've got a couple of layout issues with an Angular Material app. I'm quite new to AngularJS so hopefully it's just something obvious.
The first and most annoying is that I'm struggling with getting an Angular Material list looking as I'd like it to.
<md-content layout-padding>
<section>
<md-list ng-cloak>
<md-list-item class="md-3-line" ng-repeat="item in items | filter:filtered" go-click="item/{{item.id}}">
<md-icon class="material-icons">{{ item.acknowledgedBy ? 'assignment' : 'assessment'}}</md-icon>
<div class="md-list-item-text" layout="column" style="overflow: hidden; text-overflow: ellipsis;">
<h3>{{item.id}} - blah blah </h3>
<h4>2016-01-01 15:23:45</h4>
<h4>{{ item.description }}</h4>
</div>
<md-checkbox class="md-secondary" aria-label="Select {{item.id}}" ng-checked="selected.indexOf(item) > -1" ng-click="toggleSelection(item)"></md-checkbox>
</md-list-item>
</md-list>
</section>
</md-content>
The above worked as I expected until I added the checkbox to the list item. However this seems to prevent the text for the description being truncated with an ellipsis. Some of these descriptions can be large and I only want to show a lines worth, the primary action will show the info in full.
There is a plunker at https://plnkr.co/edit/thktG7C63cZv0FhqCzOD
My other niggle, on the same page is I'd like the both title bars to remain at the top of the page, the main app title and menu at the top and view specific title and menu options underneath. Currently the page specific one scolls up off the view.
Answer to your 2nd question.
Use md-content as the parent element since it will provide a scrollbar if needed.Now inside md-content whatever you place outside the 2nd md-content will not be scrollable and will work as a static header.
Here is a full code for that. I use simple ng-repeat and md-button to set more content and set header. You may use it as you like.
<md-content layout='column' layout-fill style='background-color:white'>
<md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar">
<div class="md-toolbar-tools">
<md-menu>
<md-button aria-label="Menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
M
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button go-click="/">
Home
</md-button>
</md-menu-item>
<md-menu-item>
<md-button go-click="/items">
Items (12)
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<h2>Mobile App</h2>
<span flex></span>
<md-button ng-click="page='report';option='option'">
Report Problem
</md-button>
<md-button ng-click="page='unread';option='unread option'">
Unread Messages
</md-button>
</div>
</md-toolbar>
<div layout='row'>
<span>
Current Page -> {{page}}
</span>
<span flex></span>
<span>
Options - {{option}}
</span>
</div>
<md-content flex layout='column' style='background-color:yellow'>
<md-button ng-repeat="item in [1,2,3,4,5,6,7,8,9,0]"> {{item}}</md-button>
<md-button ng-repeat="item in [1,2,3,4,5,6,7,8,9,0]"> {{item}}</md-button>
</md-content>
Here is a Working Example. http://codepen.io/next1/pen/yJyOvP
There are a few issues:
1. When screen is smaller than the line width of item.description things gets pushed out of the screen
This this caused by white-space: nowrap; on the <h4> tag. You can fix the layout by overriding it using white-space: normal;.
md-list-item.md-2-line .md-list-item-text h4, md-list-item.md-2-line > ._md-no-style .md-list-item-text h4, md-list-item.md-3-line .md-list-item-text h4, md-list-item.md-3-line > ._md-no-style .md-list-item-text h4 {
white-space: normal;
}
(I would actually use a <div> and give this a style instead of using <h4> tags because you get this kind of issues with most CSS frameworks.)
2. But now the text will wrap to the next line
I think it will be much easier to use the limitTo angular filter to do this with JavaScript than CSS. Set the value to something like 100, so it will show 100 characters of the string and hide the rest. Here's the original question: Limit the length of a string with AngularJS.
{{ "My String Is Too Long" | limitTo: 9 }} // outputs "My String"
3. Show both title bars
I think this is not possible unless you hack the Angular Material framework.
I am trying to implement tabs in AngularJS using Angular Material.
I have some tabs. On clicking over a tab, the content specific to that tab should be displayed. But the problem I am facing is that, the content of that tab doesn't occupy the full device length.
<md-tabs md-selected="selectedIndex">
<md-tab md-on-select="onTabSelected(tab)" md-on-deselect="announceDeselected(tab)" ng-disabled="tab.disabled">
<md-tab-label>
<p>Tab A</p>
</md-tab-label>
<md-tab-body>
<p>Content of tab A</p>
<div infinite-scroll="loadMore(tab.id)" infinite-scroll-disabled="busy">
<div ng-repeat="p in products">
<div class="well">
<h3>{{p.id}}</h3>
<h5>{{p.cat_id}}</h5>
</div>
</div>
<div ng-show="busy">Loading more products....</div>
</div>
</md-tab-body>
</md-tab>
</md-tabs>
"md-tab-body" directive specifies the tab content.
In the above code, I just intend to implement ng-Infinite scroll as a part of tab content. But somehow, tab content occupies only a part of the page length.
Is there any solution by which I can make the tab content occupy full length of the page.
I am not sure if there are any other solutions for this problem, but the simplest one is to use md-dynamic-height attribute on md-tabs directive.
<md-tabs md-dynamic-height>
.....
</md-tabs>
This is all that you need!
There is a strange behavior on the graph when I open dialog and click on the next tab. The axis just disappear :/
I've defined graphs separately in two controllers and bind to the md-tabs:
<div class="md-padding" id="popupContainer" ng-cloak>
<md-content>
<md-tabs md-dynamic-height md-selected="selectedIndex">
<md-tab label="Tab 1" aria-controls="Tab 1"><span flex=""></span>
<div class="panel-body" ng-controller="GraphCtrl" ng-cloak>
<svg id="chart1" width="450" height="300"></svg>
</div>
</md-tab>
<md-tab label="Tab2" aria-controls="Tab 2"><span flex=""></span>
<div class="panel-body" ng-controller="Graph2Ctrl" ng-cloak>
<svg id="chart2" width="450" height="300"></svg>
</div>
</md-tab>
</md-tabs>
</md-content>
</div>
Please take a look at the plunker what is going on.
You will need to call the resize on tab select(why i think this is the issue, because if you resize your browser you will see the x/y scales come back!)
Something like this on tab select of Tab 1
$scope.chart_grid_lines.resize()//in reference to your plunk above
Something like this on tab select of tab 2
$scope.chart.resize()//in reference to your plunk above
I'm developing an app with Ionic and Angular Material.
Now I'm struggling to get Ionics back button to work when it is used under the mdToolbar directive of angular material.
You can see the problem here:
http://plnkr.co/edit/lfVVa4KAUkOFLOL1nQET
In index.html <ion-nav-bar> is located under the <mdToolbar> (line 59) tag and the back button and the title does not show up when navigating.
If the <ion-nav-bar> tag is listed anywhere else it works fine.
Any suggestions where the problem is and how to solve it?
While investigating this issue further it seems in ionic.bundle.js:48400 (function getAssoctiatedNavBarCtrl()) navBarDelegate is not initialized properly. But currently I have no idea why...
If you are interested in material-design, then I recommend you to use Angular-material + Cordova.
Here is yr plunk edited
You will have to reorganize yr base layout :
<body layout="column" ng-controller="AppCtrl" md-swipe-right="openSidenav('left')" md-swipe-left="closeSidenav('left')">
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
</md-sidenav>
<ion-nav-bar layout="column" class='bar-positive'>
</ion-nav-bar>
<div class="row" style="min-height:400px">
<div layout="column" class="relative" layout-fill="" role="main">
<md-toolbar>
</md-toolbar>
<md-content flex="" md-scroll-y="">
<ion-nav-view layout="column" layout-fill="" layout-padding="" class="ui-view-container"></ion-nav-view>
</md-content>
</div>
</div>
</body>