I have the angular 6 application which has got a main sidenav container. in one of the page i am using a simple sidenav. evertything is working but the sidenav mode is not working as expected. Though i set the mode to 'side' it is using 'over' as the default.
<mat-sidenav-container>
<mat-sidenav [mode]="sidenavOption.mode"
position="start"
[opened]="sidenavOption.open"
appKvpDashboardSidenav
#leftsidenav>
<app-left-sidenav [sidenav]="leftsidenav"
[isEditing]="isEditing"
[kvpDashboardId]="kvpDashboardId"
[kvpModelId]="kvpModelId"
[kvpModelPath]="kvpModelPath">
</app-left-sidenav>
</mat-sidenav>
<mat-sidenav-content fxLayout="row">
<app-kvp-sidenav-toggle (toggleClicked)="toggleSidenav()"></app-kvp-sidenav-toggle>
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
I am using the below setting in .ts file
sidenavoption.mode = 'side'
sidenavoption.open = true
Can anyone help how to make this work?
Related
We are using Webfont Loader to load google fonts. And inside the active callback of WebFont.load we load our main script and bootstrap angular.js application.
<script type="text/javascript">
WebFontConfig = {
google: {
families: ['Open Sans:400,700,700i,400i:latin-ext']
},
active: function() {
var mainScript = document.createElement('script');
mainScript.src = "/js/main.js";
mainScript.onload = function() {
angular.bootstrap(document, ['cob']);
}
document.body.appendChild(mainScript);
}
};
WebFont.load(WebFontConfig);
</script>
To make browser use default fonts until the google font file loaded, we set fonts for .wf-active class
html.wf-active {
font-family: 'Open Sans', sans-serif;
}
Inside angular run, we switch apploaded and clear screen from loaders and show the application.
angular.module('mymodule')
.run([function() {
$rootScope.appLoaded = true;
}
]);
html
<body>
<div class="app-loader" ng-hide="appLoaded">loading...</div>
<div class="page-container" ng-if="appLoaded">
application loaded. <button>GİRİŞ</button>
</div>
</body>
We see "loading..." until the font files loaded, then application bootstraps successfully.
But the button text is rendered as "G R " for a couple of seconds, after a while 'İ' and 'Ş' characters are loaded into screen and we see GİRİŞ on button.
I am sure the font file is loaded before application bootstraps, because the font doesn't change after the application is loaded.
May be irrelevant but, I got some image files on the page and foreign characters are rendered with the image files. So there is some kind of a wierd screen render latency.
We only have this issue on iOS application, I have tested it on iPhone 6 and 6s, and on xcode simulators.
This works as intended on browsers (safari, chrome and firefox) and on android application we create with the same cordova project.
After trying various preload methods, just as I was considering to give it up, I came accross to a fact here
most browsers download fonts when they're used in a page rather than
when they're declared in CSS.
It seems like latin-ext subset of the font is delayed until it is used inside the page.
I have solved the issue by putting a dummy character (İ) that will make it download latin-ext subset on load screen
The problem is rather simple, see the template below:
<material-tab-panel>
<material-tab label="test">
<material-expansionpanel-set>
<material-expansionpanel name="panel 1">
Test 1
</material-expansionpanel>
<material-expansionpanel name="panel 2">
Test 2
</material-expansionpanel>
</material-expansionpanel-set>
</material-tab>
</material-tab-panel>
The Dartium browser renders nothing. If I remove the surrounding material-tab-panel and material-tab the expansion-panels are rendered with the expected accordion behavior. In reverse without the expensionpanel-set the tab is rendered correctly. It seems that the combination causes the problem.
Compiling to JavaScript does not change this outcome.
This has been fixed in v0.4.0-alpha of the components.
See here https://github.com/dart-lang/angular2_components/releases/tag/v0.4.0-alpha
We hope to have this as a "gold" (non-alpha) release soon!
I have simple paper-dropdown-menu:
<paper-dropdown-menu label="select">
<paper-listbox class="dropdown-content">
<paper-item>option a</paper-item>
<paper-item>option b</paper-item>
</paper-listbox>
</paper-dropdown-menu>
When I click the dropdown for the first time everything is ok, but each next click cuts height of the list in half (in Dartium):
It works well when I compile this to javascript:
How to prevent this behaviour in Dartium?
This is a known issue in Dartium, it should work fine in other browsers. A new version of Dartium was announced for Dart 1.14.
I'm developing a pure Material Design application using Angular Material framework.
However, I don't understand how to set containers' background colors (e.g. a login form with a blue background).
I could do it using CSS of course but I wonder if there's a built-in directive / theme option to do this.
I am pretty sure I have seen this somewhere in the docs, but I cant find it now. You have to do two different things:
set .backgroundPalette('indigo') same way as you set primary theme
create container
I have check it on 0.8.1 version of angular-material and it works ok.
Feel free to ask, if you have any additional questions.
For example:
app.config(function ($mdThemingProvider) {
$mdThemingProvider
.theme('default')
.primaryPalette('indigo')
.accentPalette('pink')
.warnPalette('red')
.backgroundPalette('blue-grey');
});
and in your template:
<md-content>
<p>Some text</p>
</md-content>
You can set any color from the palette with md-colors directive.
https://material.angularjs.org/1.1.4/api/directive/mdColors
The format will be [?theme]-[palette]-[?hue]-[?opacity] where ? means optional parameter.
But from my experience you have to specify the theme even if it's default:
<md-button md-colors="{color: 'default-red-A100', 'background': 'default-primary-600'}">Button</md-button>
On a sidenote, ignoring the "without css" part of the question, I see that the Material Angular creators uses plain old css to create a background color, see this codepen (you also find this via the Getting Started section: "Fork a codepen").
html
<div id="content" ng-view flex> </div>
css
.demo #content {
background-color: rgb(255, 244, 220);
padding:30px;
font-weight:600;
border: 1px solid #aeaeae;
border-top:none;
}
I'm trying to use the example accordion directive in my rails app but receive the following error and my browser crashes
Template for directive 'accordionGroup' must have exactly one root element.
template/accordion/accordion-group.html
My HTML view is the same as the example accordion (shortened for readability here)
<div ng-controller="AccordionDemoCtrl">
<accordion close-others="oneAtATime">
<accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</accordion-group>
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</accordion-group>
</accordion>
</div>
My routes:
angular
.module('App', [
'ngRoute',
'templates',
'ui.bootstrap'
])
.when('/page', {
templateUrl: 'page.html',
controller: 'PageCtrl'
})
$locationProvider.html5Mode(true);
});
I'm also using the angular template gem and not sure if that has anything to do with it.
I had a similar error with angular bootstrap and this was due to using
ui-bootstrap.js instead of ui-bootstrap-tpls.js
It might be the BOM in your accordion template file causing an issue.
Open the file in a text editor that allows you to change the encoding (like Notepad++), alter the file to be UTF-8 without BOM and save. That should solve it (assuming that's the issue!).