SlickGrid columnpicker boundaries

HTML

<script src="https://rawgithub.com/Celebio/SlickGrid/master/lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.core.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.css">
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick-default-theme.css">
<script src="https://rawgithub.com/Celebio/SlickGrid/master/controls/slick.columnpicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/6pac-slickgrid/2.4.0/slick.dataview.js"></script>
<div id="myGrid" style="width:100%;height:400px;"></div>
<button onclick="myFunction()">
change
</button>

CSS

.slick-columnpicker {
  border: 5px solid orange;
  background: #f0f0f0;
  padding: 6px;
  -moz-box-shadow: 2px 2px 2px silver;
  -webkit-box-shadow: 2px 2px 2px silver;
  box-shadow: 2px 2px 2px silver;
  min-width: 100px;
  cursor: default;
}

.slick-columnpicker li {
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
  white-space: nowrap;
}

.slick-columnpicker input {
  margin: 4px;
}

.slick-columnpicker li a {
  display: block;
  padding: 4px;
  font-weight: bold;
}

.slick-columnpicker li a:hover {
  background: white;
}

.slick-header-column {
  color: lightgray;
}

.slick-header-column:nth-child(6) {
  background: orange;
  color: black;
  font-weight: bold;
}

JavaScript

var grid, columnpicker;
  var columns = [{
      id: "title",
      name: "Title --- (very long title)",
      field: "title"
    },
    {
      id: "duration",
      name: "Duration",
      field: "duration"
    },
    {
      id: "%",
      name: "% Complete",
      field: "percentComplete"
    },
    {
      id: "start",
      name: "Start",
      field: "start"
    },
    {
      id: "finish",
      name: "Finish",
      field: "finish"
    },
    {
      id: "effort-driven",
      name: "Right click here",
      field: "effortDriven"
    }
  ];

  var options = {
    forceFitColumns: true
  };
  var dataView = new Slick.Data.DataView();

  var data = [];
  for (var i = 0; i < 5; i++) {
    data[i] = {
      title: "Task " + i,
      duration: "5 days",
      percentComplete: Math.round(Math.random() * 100),
      start: "01/01/2009",
      finish: "01/05/2009",
      effortDriven: (i % 5 == 0),
      id: i
    };
  }

  grid = new Slick.Grid("#myGrid", dataView, columns, options);
  dataView.onRowCountChanged.subscribe(function(e, args) {
    grid.updateRowCount();
    grid.render();
  });

  dataView.onRowsChanged.subscribe(function(e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
  });  
  dataView.setItems(data);


  function myFunction() {
  data[0].title = Math.random()
   dataView.setItems(data);
   grid.updateRow(0)

  };