Menu
I'm trying to create a layout using angular material desgin with two-column:
<div layout="row">
<div flex="33">
123
</div>
<div flex="77">
456
</div>
</div>
its ok. but if i place an ng-map element:
<div layout="row">
<div flex="33">
123
</div>
<div flex="77">
<ng-map ></ng-map>
</div>
</div>
is presented stacked verticaly. why?
demo: https://plnkr.co/edit/mNdHAwGXC0vLE7Erttib?p=preview
671
Looking into the console, you can see following error:
TypeError:
$element.bindis not a function atnew __MapController(ng-map.js:318)
flex attributes are applying CSS classes styled as follow:
./angular-material.min.css
.layout-row>.flex-66 {
-webkit-box-flex: 1;
-webkit-flex: 1 1 66.66%;
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box
}
And then some other styles, but those are responsible for flexgrid. If you apply the styles manually on the <ng-map>'s parent, they do work.
Mentioned error in <ng-map> stops scripts execution at some point soon enough to not apply expected .flex-* class form ./angular-material.min.css on the wrapping <div>.
Consider opening new issue (I checked them, there's none on the matter now) or just using different map plugin.
52
You not include the bootstrap stylesheet
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="//maps.google.com/maps/api/js"></script>
<script src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="ctrl">
<div layout="row" style="display: flex;">
<div flex="33" style="width: 33%">
123
</div>
<div flex="77" style="width: 77%">
<ng-map ></ng-map>
</div>
</div>
</body>
</html>
Live https://plnkr.co/edit/lldddeNsw3LwhhXQkBv4?p=preview
43
Upon inspecting element, I saw that the ng-map tag automatically loads some styling from google apis that overrides the flex/angular styling.
I wrote a solution over here: https://plnkr.co/edit/GHYZoC5BotyD58RG0Qdj?p=preview
I looked at Angular's documentation for layout and I think there's really no good way to override's the ng-map's css styling that is automatically loaded.
So, I chose to just simply use some custom css that uses floating to position the two elements:
.first {
height: 250px;
width: 250px;
position: relative;
float: left;
}
.map {
height: 250px;
width: 250px;
position: relative;
float: right;
}
.container {
width: 500px;
margin-right: auto;
margin-left: auto;
height: auto;
}
HTML:
<body ng-controller="ctrl">
<div class="container">
<div class="first">Hello</div>
<ng-map class="map"></ng-map>
</div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
