NG-地图方面NG-材料布局

我试图创建一个使用angular material desgin布局有两列：NG-地图方面NG-材料布局

<div layout="row"> 
    <div flex="33"> 
    123 
    </div> 
    <div flex="77"> 
    456 
    </div> 
</div>

其确定。但如果我放置一个ng-map元素：

<div layout="row"> 
    <div flex="33"> 
    123 
    </div> 
    <div flex="77"> 
    <ng-map ></ng-map> 
    </div> 
</div>

呈现堆叠verticaly。为什么？

演示：https://plnkr.co/edit/mNdHAwGXC0vLE7Erttib?p=preview

来源

2017-02-23 dovid

小告示：33 + 77 = 110，不是100，所以应该是33和66。但是，这不是修复。 – silex

在检查元件，我认为NG-地图标签自动加载从谷歌的API某些样式，它覆盖所述柔性/角造型。

我写了一个解决方案在这里：https://plnkr.co/edit/GHYZoC5BotyD58RG0Qdj?p=preview

我看着角的文档layout.I觉得没什么覆盖没有很好的办法是在NG-地图的CSS样式被自动加载。

所以，我选择了只简单地使用采用浮动两个元素放置一些自定义CSS：

.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>

来源

2017-03-01 04:43:38 ethanchewy

展望console，你可以看到以下错误：

TypeError: $element.bind is not a function at new __MapController(ng-map.js:318)

个flex属性应用样式如下CSS类：

./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 
}

然后一些其他风格，但那些负责的FlexGrid。如果您在<ng-map>的父母手动应用样式，他们确实有效。

在 <ng-map>

提到的错误在一些点很快停止脚本执行不应用预期.flex-*类形式./angular-material.min.css在包装<div>。

考虑opening new issue（我查了一下，现在没有关于此事的问题）或者只是使用不同的地图插件。

来源

2017-03-01 06:34:47 wscourge

你不包括引导样式

<!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>

直播https://plnkr.co/edit/lldddeNsw3LwhhXQkBv4?p=preview

来源

2017-03-02 08:19:36 grinmax

NG-地图方面NG-材料布局

回答

相关问题