JSFiddle - React, Tailwind, and code Playground

by ckosloski

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<div ng-app="app" ng-controller="Ctrl">

  <header>Angular-xeditable Obscured popover</header>
  <div class="columns" id="test">
    <div class="menu column">
      <b>Band</b>
      <ul>
        <li ng-repeat="(key, value) in band">{{value}}</li>
      </ul>
    </div>
    <div class="column">
      <div ng-repeat='(key, value) in band' class="bandmate">
        {{key}}:<br>
        <div class="popover-wrapper" id="{{$index}}">
           <a href="#" editable-text="band[key]" onshow="updateWrapper($index)" onhide="updateWrapper($index)">
              {{ value || 'no name' }}
           </a>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

header {
  background: #ccc;
  height:40px;
  text-align:center;
  line-height:40px;
}

.columns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
  background: #ddd;
  width: 100%;
  /* height:calc(100vh - 40px); */

}

.column {
  flex-grow: 5;
  overflow:hidden;
  overflow-y: auto;
  height: 200px;
  &.menu{
    background: #999;
    flex-grow: 1;
  }
  padding: 1rem;
}

.bandmate{
  margin-bottom: 1rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #999;
}

.popover-wrapper {
	display: inline;
  position: relative;
}
.popover-wrapper-fixed {
  position: fixed;
}

JavaScript

var app = angular.module("app", ["xeditable"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope, $filter) {
  $scope.band = {
    bass: 'Paul',
    drums: 'Ringo',
    guitar: 'George',
		vocals: 'John'
  };
  
  $scope.updateWrapper = function(id) {
    var element = document.getElementById(id);
    element.className = element.className.includes('popover-wrapper-fixed') ? 'popover-wrapper' : 'popover-wrapper popover-wrapper-fixed';
  };
});