bug 12396: Put apply button on bottom of detail view

-In order to have the 'Apply' button always visible when editing data,
 only put the main fields (i.e., everything except action bar and
 apply button) into a scrollable container.

-Move apply button to bottom of detail view pane

ui/css/cloudstack3.css

@@ -1237,11 +1237,17 @@ div.list-view td.state.off {
   height: 78%;
   width: 97%;
   padding-top: 7px;
-  overflow: auto;
+  overflow: hidden;
   height: 591px;
   margin: -4px 0 0;
 }
 
+.detail-view .main-groups {
+  max-height: 469px;
+  overflow: auto;
+  margin-right: 12px;
+}
+
 .detail-group table {
   width: 96%;
   font-size: 12px;
@@ -1301,6 +1307,11 @@ div.list-view td.state.off {
   margin: 0 0 0 12px;
   padding: 9px 20px;
   background: url(../images/bg-gradients.png) 0px -221px;
+  /*+placement:shift -1px 550px;*/
+  position: relative;
+  left: -1px;
+  top: 550px;
+  position: absolute;
 }
 
 .detail-view .button.done:hover {

ui/scripts/ui/widgets/detailView.js

@@ -601,12 +601,14 @@
       });
     }
 
+    $detailGroups.append($('<div>').addClass('main-groups'));
+
     $(fields).each(function() {
       var fieldGroup = this;
 
       var $detailTable = $('<tbody></tbody>').appendTo(
         $('<table></table>').appendTo(
-          $('<div></div>').addClass('detail-group').appendTo($detailGroups)
+          $('<div></div>').addClass('detail-group').appendTo($detailGroups.find('.main-groups'))
         ));
 
       $.each(fieldGroup, function(key, value) {
@@ -678,7 +680,7 @@
           actionFilter: actionFilter,
           data: data,
           context: $detailView.data('view-args').context
-        }).prependTo($firstRow.closest('div.detail-group'));
+        }).prependTo($firstRow.closest('div.detail-group').closest('.details'));
 
       // 'View all' button
       if (detailViewArgs.viewAll) {