イオニックマップ - ビューの小さな部分にフィッティングマップ

非常に簡単なイオニックマップアプリケーション（this templateを使用）を作成しました。ブラウザとデバイスの両方でうまく動作します。マップフィットを作るに私は今、デフォルトのテンプレートcode.Butを持ってイオニックマップ - ビューの小さな部分にフィッティングマップ

私はそれを変更しようとしている：あなたが知っているように、デフォルトのマップテンプレートは、次のようになりますアプリを作成しますビュー（右上の角）の小さな部分。

私はそれがこのような何かを見てみたい：

を私は、これは、単純なCSS（マップ要素の幅と高さの周りいじる）で行うことができると思っていたので、私が行ってきましたstyle.cssに変更してみました。しかし

、私は100％以外のものに変更して、私は「ブロック」以外に、「表示」を変更した場合、マップは単に一斉に消えます。

は、マップ要素の幅/高さ/表示を変更する：私が試した何

。私がそれをすると、マップは単に消えるか、または他の要素の前に現れます（テキスト&メインビューのボタン）。
イオングリッドの "col" divの内側にフィットさせます。動作しません;
イオングリッド内の他のコンテンツをフィッティング。それは動作しません - 地図は常に他の要素の前に表示されます。

EDIT：何が働いた：

を私はディレクティブのためのラッパーを削除する必要がありました。私はここで説明した方法で内部のアイテムを扱うことができないと考えています。

彼の時間と提案のためにPrashantに感謝します。

出典

2016-06-29 user1183352

私はここに、イオンスターターマッププロジェクトで遊んでみましたとは私のために働いていたものです：

更新：（正確に何をしたい）

<body ng-app="starter" ng-controller="MapCtrl"> 

    <ion-header-bar class="bar-stable"> 
    <h1 class="title">Map</h1> 
    </ion-header-bar> 

    <ion-content scroll="false"> 

    <div class="row"> 

     <div class="col col-50 col-center"> 
     <h3>Some heading</h3> 
     <p>Some text</p> 
     </div> 

     <div class="col col-50"> 
     <div style="height: 150px; width: 100%;"> 
      <map on-create="mapCreated(map)"></map> 
     </div> 
     </div> 

    </div> 

    <div class="padding"> 
     <a href="#" class="button button-block button-calm">Some button</a> 
     <a href="#" class="button button-block button-positive">Another button</a> 
    </div> 

    </ion-content> 

    <ion-footer-bar class="bar-stable"> 
    <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate"></a> 
    </ion-footer-bar> 

</body>

結果：

出典

2016-06-29 15:27:02

私はそれを考えてフロートを回避しようとしましたグリッドと衝突するだろうが、私は選択肢がないと思う。私はすぐにそれをテストし、もし私のすべてのデバイス上で動作しているなら - あなたの方法に従います。ありがとうございました！ – user1183352

フロートはそれが動作することを証明したばかりでした。私は次の編集でより良いバージョンを入れます。心配ない。 –

[OK]を、私は問題が私の代わりにあったことを理解します。私はラッパー要素を削除しませんでした。これは、私が望むように地図を扱うことを妨げていたと思われます。再度ありがとうPrashant！ – user1183352

イオニックマップ - ビューの小さな部分にフィッティングマップ

答えて

関連する問題