Ionic Maps - Passende Karte in einem kleinen Teil der Ansicht

Ich habe eine sehr einfache Ionic Maps App (mit this template) erstellt, und es funktioniert gut, sowohl im Browser und auf meinen Geräten. Wie Sie wissen, stellt die Standard-Karten-Vorlage eine App, die etwa wie folgt aussieht:Ionic Maps - Passende Karte in einem kleinen Teil der Ansicht

ich die Standardvorlage code.But haben jetzt versuche ich es zu zu ändern, um die Karte fit machen ein kleiner Teil der Ansicht (in der oberen rechten Ecke).

Ich möchte es so etwas wie folgt aussehen:

Ich dachte, dies mit einfachen CSS getan werden könnte (das Hantieren mit der Breite und Höhe des Kartenelement), so ging ich in die style.css und versuchte es zu ändern.

jedoch wenn ich es etwas ändern andere als 100%, und wenn ich „Display“ auf etwas anderes als „Block“ zu ändern, die Karte verschwindet einfach alle zusammen.

Was ich versucht:

Ändern der Breite/Höhe/Anzeige des Kartenelement. Wenn ich es tue, verschwindet die Karte einfach oder erscheint vor den anderen Elementen (Text & Buttons der Hauptansicht);
Einbau in das "col" div des ionischen Gitters. Funktioniert nicht;
Den anderen Inhalt in das Ionengitter einpassen. Es funktioniert nicht - die Karte wird immer vor den anderen Elementen angezeigt.

EDIT: Was hat funktioniert:

ich hatte den Wrapper für die Richtlinie entfernen. Ich glaube, dass dies unter anderem verhindert hat, dass der Gegenstand im Inneren so behandelt wird, wie ich es hier beschrieben habe.

Vielen Dank für Prashant für seine Zeit und Anregungen.

Quelle

2016-06-29 user1183352

Ich habe versucht, mit dem ionischen Starter Karten Projekt herum spielen und hier ist was für mich gearbeitet:

Update: (Genau das, was Sie wollen)

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

Ergebnis:

Quelle

2016-06-29 15:27:02

Ich versuchte Float zu vermeiden, weil ich es dachte würde mit dem Raster in Konflikt geraten, aber ich denke, ich habe keine Wahl. Ich werde es bald testen, und wenn es auf allen meinen Geräten funktioniert - werde ich Ihrem Weg folgen. Vielen Dank! – user1183352

Float war nur um zu beweisen, dass es funktioniert.Ich werde eine bessere Version in die nächste Bearbeitung einfügen. Keine Bange. –

Ok, ich verstehe, was das Problem für mich war. Ich habe das Wrapper-Element nicht entfernt, von dem ich vermute, dass es die Map so behandelt hat, wie ich es möchte. Danke nochmal Prashant! – user1183352

Ionic Maps - Passende Karte in einem kleinen Teil der Ansicht

Antwort

Verwandte Themen