everybody.
I am using the following:
angular: 1.6.1,
angular-material: 1.1.3,
angular-ui-router: 1.0.0-rc.1
All my views are built using components and I am routing them with the UI-Router 1.x component syntax:
$stateProvider
.state('main', {
url: '/main',
component: 'main',
})
For the sake of completeness, my components are laid out as follows:
angular
.module('app.main')
.component('main', {
templateUrl: '/modules/main/main.html',
controller: MainCtrl,
})
MainCtrl.$inject = [];
function MainCtrl (){
}
My index.html is as follows:
<body ng-app="app" layout="column" ng-cloak>
<md-toolbar layout="row" layout-align="center center">
<h1>Site Title</h1>
</md-toolbar>
<div layout="column" flex ui-view></div>
My view for the main component is irrelevant at this point as the problem starts here. If, for example, my view for main.html is as follows:
<div layout="row" flex>
Content
</div>
The div will NOT flex. If, however, it is simply added in place of the ui-view in the parent, it will flex as normal.
<body ng-app="app" layout="column" ng-cloak>
<md-toolbar layout="row" layout-align="center center">
<h1>Site Title</h1>
</md-toolbar>
<div layout-align="column" flex>
Content (THIS WORKS FINE!)
</div>
Both contain the same attributes in the inspector apart from the usual differences in using ui-view.
This also seems to be causing problems with md-content, which will only scroll if it is the element in the parent that contains the ui-view. Any nested md-contents will not scroll.
I have also tried using the original ui-router way of routing to controllers and templates which was the norm before the .component syntax.
There is a similar problem listed here:
Angular Material layout breaks when using UI-Router
It seems that this gentleman's solution was to abandon UI-Router and use ng-route. I really don't want to move away from UI-Router and am considering completely abandoning Angular-Material but would really prefer to avoid that.
Can anybody please help out with this?
Related
I'm trying to create a simple app to learn Laravel with VueJS. I created a JetStream sample app with InertiaJS but seem to have gotten stuck on something that is probably just related to a fundamental misunderstanding.
I have added a link to my navigation section, which renders a Vue component, which uses GridJS to display a list of all users. Now when I check in Chrome's DevTools Network tab, the request seems to route correctly, but the template in the page doesn't get added to the DOM. I have some JS in the same document which gets a link hook, and it then uses that to look up a querySelector, but doesn't find it. The link is in the same file but within a template block, so the template block contents are obviously not being added to the DOM.
Here is my route:
Route::get('/user/view', function() {
return Inertia::render('UserList');
})->name('user.view');
Here is my Vue component (just relevant part):
<template>
<div class="row">
<div class="col-lg-12">
<div js-hook-url="{{ route('user/view') }}" js-hook-table-users></div>
</div>
</div>
</template>
<script>
import { Grid, html } from "gridjs";
import "gridjs/dist/theme/mermaid.css";
const USER_TABLE = '[js-hook-table-users]'
const TABLE_USERS_WRAPPER = document.querySelector(USER_TABLE);
const TABLE_USERS_URL = TABLE_USERS_WRAPPER.getAttribute('js-hook-url');
So the error happens on the last line there, because the node does not exist in the DOM and so is not picked up by the querySelector, so getAttribute gets called on null. Again, I'm sure this is a fundamental issue being new to Laravel and Vue. TIA
I need to wrap a div tag inside of an agm-polyline so it will accommodate both an ngFor and ngIf directive on the same agm-polyline-point tags. Example:
<agm-polyline [strokeColor]="'blue'">
<div *ngFor="let waypoint of waypoints">
<agm-polyline-point *ngIf="boolean" [latitude]="waypoint.lat" [longitude]="waypoint.lng"></agm-polyline-point>
</div>
</agm-polyline>
Adding the wrapped div results in the polyline no longer showing up in my browser when accessing on my computer from localhost:4200. However, when I run the code on Stackblitz it works perfectly.
Any ideas why this is happening? I've tried it locally on two versions of #agm/core (1.0.0 and 3.0.0-beta.0) with the same results each time.
Github is here.
Use ng-container instead of div.
When you use div tags, they are inserted into the DOM, which can interfere with the styling and structure of the page.
In contrast, ng-container tags are excluded from the DOM, but can use ngIf and other Angular constructs just as you are now.
<agm-map [latitude]="lat" [longitude]="lng">
<agm-polyline [strokeColor]="'blue'">
<ng-container *ngFor="let waypoint of waypoints">
<agm-polyline-point *ngIf="boolean" [latitude]="waypoint.lat" [longitude]="waypoint.lng"></agm-polyline-point>
</ng-container>
</agm-polyline>
</agm-map>
for some reason this navbar is not rendering correctly on the browser :
<header data-role="header">
<div id="navbar-personalize" data-role="navbar" class="my-navbar">
<div data-align="left">
<img src="../../Images/dashboard6.png" alt="Dashboard"/>
</div>
<span data-role="view-title">Cart Summary</span>
<div data-align="right">
<a href="#merchandise-otherorders-view">
<img src="../../Images/whoelse6.png" alt="Who else is going?"/>
</a>
</div>
</div>
</header>
I have other navbars just like this one all around my index file, and they all work fine, except for this one. It seems that KendoUI isn't initializing it all. By inspecting the code I can see that it's missing all of kendo's styling (like "km-navbar" and such).
It may have to do with the fact that I'm defining this header in each one of the views inside the file, instead of defining it in the app layout, but for some reason defining it inside the app layout doesn't work for me, it simply doesn't render at all.
I'm out of ideas, can somebody help me?
Thanks
I had this problem today. Make sure that kendo.mobile.min.js is included on your page. The docs don't say to put it in, but adding that made it work for me.
I want to add multizoom.js in my AngularJS project.
This is my index page:
<body>
<img id="zoom" ng-src="example.jpg" class="example ng-class">
<div ng-view> </div>
</body>
and this is detail page:
<img id="zoom" ng-src="example.jpg" class="example ng-class">
My problem is jQuery multizoom plugin doesn't zoom image which is in AngularJS's ng-view part.
If image is not in ng-view part multizoom works fine.
This is because I presume you are initialising the multizoom behaviour on the DOM ready event, using $(function() { /* ...(multizoom init code)... */ }); or $(document).ready(function() { /* ...(multizoom init code)... */. If so, that will only be run once, and likely before the details page is loaded into the <div ng-view></div>. As a consequence, it will not be able to find the image on that page it is searching for as it hasn't been loaded in yet.
Instead, what you need to do is initialise your multizoom functionality whenever the ng-view content is loaded, using the event that is emitted, like so:
// (inside some function with $rootScope available)
$rootScope.$on('$viewContentLoaded', function() {
// ... (multiview init code here) ...
});
Does that make sense?
As a small side note, don't have multiple elements with the same ID, it's not a good idea. Instead, use a class to signify the images you want to apply the multizoom plugin to.
I'm working on an ASP.NET MVC 3 application. I primarily come from a ASP.NET WebForms background. I am working on an application with a complicated layout scheme. Because of this, i was hoping to have all of my layout code in, well, _Layout.cshtml. My challenge is, there is custom javascript logic associated with each page. I've found that if this JavaScript is included in the middle of my page, it doesn't work. So what I wanted to do was move it elsewhere. But in order to do this, I need something similar to the ASP.NET WebForms PlaceHolder control. Ideally, I would like to be able to do something like this:
<body>
<div id="myLayout" style="background-color:Gray; height:100%;">
<div id="myContent" style="background-color:Silver;">
#RenderBody()
</div>
<div id="myFooter" style="background-color:Silver;">
Footer
</div>
</div>
#RenderScript()
</body>
Is there a way for me to do this? Or am I going to have to write every page individually?
Thank you!
Here's what i do, in each of your views create a section like this, put any html you want in it
Any View:
#section Scripts
{
<script src="#Url.Content("~/Scripts/myscript.js")" type="text/javascript"></script>
<!-- Styles, more scripts, etc -->
}
Then back in your _Layout.cshtml you can render the section anywhere you want, the second parameter says if the page requires a Scripts section or not.
_Layout.cshtml: (anywhere you want)
<head>
#RenderSection("Scripts", false)
</head>