manyi/static/angular-mod/tpl/layout_fullwidth.html

<!-- hbox layout -->
<div class="hbox hbox-auto-xs bg-light " ng-controller="JVectorMapDemoCtrl" ng-init="
  app.settings.asideFolded = true;
  app.settings.asideDock = false;
  app.settings.container = false;
  app.hideAside = true" 
  >
  <!-- column -->
  <div class="col item">
    <div ui-jq="vectorMap" class="h-full" style="min-height:240px;" ui-options="{
      map: 'us_aea_en',
      markers: {{usa_markers}},
      normalizeFunction: 'polynomial',
      backgroundColor: 'transparent',
      zoomMin: 0.5,            
      regionsSelectable: true,
      markersSelectable: true,
      regionsSelectableOne: true,
      markersSelectableOne: true,
      focusOn: {
        x:0,
        y:0,
        scale: 0.6
      },
      series: {
        markers: [{
          attribute: 'r',
          scale: [5, 15],
          values: [
            100.70,
            255.16,
            310.69,
            605.17,
            248.31,
            107.35,
            217.22
          ]
        }]
      },
      regionStyle: {
        initial: {
          fill: '#dde6e9',
          stroke: '#edf1f2',
          'stroke-width': 2,
          'stroke-opacity': 1
        },
        hover: {
          fill: '#fff'
        },
        selected: {
          fill: '{{app.color.info}}'
        },
      },
      markerStyle: {
        initial: {
          fill: '{{app.color.info}}',
          stroke: '#fff',
          r: 10
        },
        hover: {
          stroke: '#fff'
        },
        selected: {
          fill: '{{app.color.warning}}'
        }
      }
    }">
    </div>
    <div class="top" style="top:20px;left:60px">
      <div class="panel no-border w-md">
        <div class="panel-heading ">
          <a href class="pull-right" ng-click="isCollapsed = !isCollapsed" ui-toggle-class>
            <i class="fa fa-angle-up text"></i>
            <i class="fa fa-angle-down text-active"></i>
          </a>
          <span class="font-bold">Mark Detail</span>
        </div>
        <div collapse="isCollapsed">
          <div class="panel-body bg-light lter">
            <div class="scrollable" style="max-height:110px" ui-jq="slimScroll" ui-options="{height:'110px', size:'6px'}">
              <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. 
              </p>
              <p>
              Vestibulum ullamcorper sodales nisi nec condimentum. Mauris convallis mauris at pellentesque volutpat.
              </p>
            </div>
          </div>
          <div class="panel-footer">
            <i class="fa fa-fw m-r-xs text-info fa-bookmark"></i><span class="font-bold">37</span>
            <i class="fa fa-fw m-r-xs text-info fa-star m-l"></i><span class="font-bold">120</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom text-right w-full">
      <small class="text-muted wrapper-sm block">Data @ naturalearthdata.com.</small>
    </div>
  </div>
  <!-- /column -->

  <!-- column -->
  <div class="col w-md lter b-l">
    <div class="vbox">
      <div class="wrapper b-b b-light">Map</div>
      <div class="row-row">
        <div class="cell">
          <div class="cell-inner">
            <div class="wrapper-md">
              This is the scrollable content
              <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
              You got the bottom
            </div>
          </div>
        </div>
      </div>
      <div class="wrapper b-t b-light text-center">
        <p>Footer with fluid height</p>
        <a href class="btn btn-info">Create Marker</a>
      </div>
    </div>
  </div>
  <!-- /column -->
</div>
<!-- /hbox layout -->