12

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

wscourge
  • 10,657
  • 14
  • 59
  • 80
dovid
  • 6,354
  • 3
  • 33
  • 73

3 Answers3

4

Looking into the console, you can see following error:

TypeError: $element.bind is not a function at new __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.

wscourge
  • 10,657
  • 14
  • 59
  • 80
3

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>
ethanchewy
  • 552
  • 1
  • 3
  • 14
3

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

grinmax
  • 1,835
  • 1
  • 10
  • 13