mardi 24 novembre 2015

Child div resizes to parent div but inside not positioned correctly

I'm making a web map using angularjs. I'm using ng-repeat and a function in order to load the icon location from a json string. The printer icons are positioned by inline css from the app.js file.

My Problem: My the angularjs is correctly working but my css positioning isn't. The printer icons end up on the bottom instead where they are supose to be positioned. What can I do to fix my problem.

Run the snippet to check my code.

var app = angular.module('PrinterMap', [])
  .controller('pMap', function($scope) {
    var json = {
      "printers": [{
          "id": 1,
          "netoworkPrinterName": "Printer1",
          "location_X": 30,
          "location_Y": 200,
          "roomLocation": "Jesse'sCubical"
        }, {
          "id": 2,
          "netoworkPrinterName": "Printer2",
          "location_X": 56,
          "location_Y": 18,
          "roomLocation": "Fam'sCubical"
        }, {
          "id": 3,
          "netoworkPrinterName": "Printer3",
          "location_X": 52,
          "location_Y": 23,
          "roomLocation": "Ed'sCubical"
        }, {
          "id": 4,
          "netoworkPrinterName": "Printer4",
          "location_X": 22,
          "location_Y": 42,
          "roomLocation": "Jono's Cubical"
        }, {
          "id": 5,
          "netoworkPrinterName": "Printer4",
          "location_X": 80,
          "location_Y": 80,
          "roomLocation": "Jono's Cubical"
        }, {
          "id": 4,
          "netoworkPrinterName": "Printer4",
          "location_X": 82,
          "location_Y": 92.5,
          "roomLocation": "Jono's Cubical"
        },

      ]

    };
    $scope.ocw = json
    $scope.xandy = function(x, y) {
      return {
        width: 10 + 'px',
        height: 10 + 'px',
        position: 'relative',
        left: x + '%',
        top: y + '%'
      };
    };
  });
/* CSS for map */

.northEastPod {
  position: relative;
  top: 150px;
  left: 150px;
  width: 10%;
  height: 10%;
}
#printerIcon {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
}
.position {
  background-image: url('http://ift.tt/1QGydAH');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 50px 20px 0;
}
.mapOuter {
  position: relative;
  width: 100%;
  padding-top: 70%;
}
.MapImage .mapOuter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  outline: 1px solid grey;
}
.MapImage {
  width: 100%;
  height: 100%;
}
.MapFix {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
<body ng-app="PrinterMap">
  <div class="position">
    <div class="mapOuter">
      <div class="mapInner">
        <div class="MapImage" ng-controller="pMap">
          <img ng-repeat="location in ocw.printers" ng-src="http://ift.tt/1QGyfs2" ng-style="xandy({{ location.location_X }}, {{ location.location_Y }})" data-toggle="modal" data-target="#basicModal" data-content="Popup with option trigger"
          data-container="body" rel="popover" data-placement="bottom" data-original-title="Title" />
        </div>
      </div>
    </div>
  </div>

  <script src="http://ift.tt/1EbO5VO"></script>
</body>



Aucun commentaire:

Enregistrer un commentaire