user1183352 user1183352 - 1 year ago 140
CSS Question

Ionic Maps - Fitting map inside a small part of the view

I've created a very simple Ionic Maps App (using this template), and it works fine, both in the browser and on my devices. As you know, the default maps template produces an app which looks something like this:

enter image description here

I've got the default template code.But now i'm trying to change it to make the map fit a small part of the view (on the top-right corner).

I'd like it to look something like this:

enter image description here

I thought this could be done with simple CSS (fiddling around with the width and height of the map element), so I went to the style.css and tried changing it.

However, if I change it to something other than 100%, and if I change "display" to something other than "block", the map simply disappears all together.

What I tried:

  • Changing the width/height/display of the map element. If I do it, the map simply disappears, or appears in front of the other elements (text & buttons of the main view);

  • Fitting it inside the ionic grid's "col" div. Does not work;

  • Fitting the other content inside the Ionic grid. It does not work - the map is always shown in front of the other elements.

EDIT: What worked:

  • I had to remove the wrapper for the directive. I believe this, among other things, prevented the item inside to be treated in the way I described here.

Many thanks for Prashant for his time and suggestions.

Answer Source

I tried playing around with the ionic starter maps project and here's what worked for me:

Update: (Exactly what you want)

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

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

  <ion-content scroll="false">

    <div class="row">

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

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


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


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



Small Map for ionic

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download