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-材料佈局

回答

相關問題