openmct/platform/features/layout/res/templates/fixed.html

<div class="t-fixed-position l-fixed-position"
     ng-controller="FixedController as controller"
     mct-resize="controller.setBounds(bounds)">

    <!-- Background grid -->
    <div class="l-grid-holder" ng-click="controller.clearSelection()">
	    <div class="l-grid l-grid-x"
             ng-style="{ 'background-size': controller.getGridSize() [0] + 'px 100%' }"></div>
	    <div class="l-grid l-grid-y"
             ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></div>
    </div>

    <!-- Fixed position elements -->
    <div ng-repeat="element in controller.getElements()"
         class="l-fixed-position-item"
         ng-class="{ 's-not-selected': controller.selected() && !controller.selected(element) }"
         ng-style="element.style"
         ng-click="controller.select(element)">
        <mct-include key="element.template"
                     parameters="{ gridSize: controller.getGridSize() }"
                     ng-model="element">
        </mct-include>
    </div>

    <!-- Selection highlight, handles -->
    <span ng-if="controller.selected()">
        <div class="l-fixed-position-item s-selected"
             mct-drag-down="controller.moveHandle().startDrag(controller.selected())"
             mct-drag="controller.moveHandle().continueDrag(delta)"
             mct-drag-up="controller.moveHandle().endDrag()"
             ng-style="controller.selected().style">
        </div>
        <div ng-repeat="handle in controller.handles()"
             class="l-fixed-position-item-handle"
             ng-style="handle.style()"
             mct-drag-down="handle.startDrag()"
             mct-drag="handle.continueDrag(delta)"
             mct-drag-up="handle.endDrag()">
        </div>
    </span>

</div>