From d5e14d1c647b36af08259272760cfaacaee1ec71 Mon Sep 17 00:00:00 2001
From: phamt <phamt@8638fb3e-16cb-4fca-ae20-7b5d299a9bcd>
Date: Thu, 1 Nov 2012 03:13:49 +0000
Subject: [PATCH] Fix display problem for images table and disable edit for 1st
 and 2nd columns of images table.

git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@14191 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd
---
 xCAT-UI/js/nodes/nodes.js      | 14 +++++++-------
 xCAT-UI/js/provision/images.js | 26 ++++++++++++++++++++------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/xCAT-UI/js/nodes/nodes.js b/xCAT-UI/js/nodes/nodes.js
index 1a7f80c30..498a35d0b 100644
--- a/xCAT-UI/js/nodes/nodes.js
+++ b/xCAT-UI/js/nodes/nodes.js
@@ -634,7 +634,7 @@ function loadNodes(data) {
     $('#nodesTab').append(info);
 
     // Create action bar
-    var actionBar = $('<div class="actionBar"></div>');
+    var actionBar = $('<div class="actionBar"></div>').css("width", "290px");
 
     /**
      * Create menu for actions to perform against a given node
@@ -877,7 +877,7 @@ function loadNodes(data) {
     powerCol.unbind('click');
     monitorCol.unbind('click');
     commentCol.unbind('click');
-            
+    
     // Create enough space for loader to be displayed
     // Center align power, ping, and comments
     $('#' + nodesTableId + ' td:nth-child(3),td:nth-child(4),td:nth-child(5)').css({
@@ -1204,7 +1204,7 @@ function addNodes2Table(data) {
                 break;
             }
         }
-                
+        
         // Get node status
         var status = '';
         if (attrs[node]['status']){
@@ -1212,7 +1212,7 @@ function addNodes2Table(data) {
         }
         
         rows[nodeRowPos][headersCol['status']] = status;
-                
+        
         // Go through each header
         for (var key in headersCol) {
             // Do not put comments and status in twice
@@ -1231,7 +1231,7 @@ function addNodes2Table(data) {
         // This is done after datatable is updated because
         // you cannot insert an object using fnUpdate()
         var comments = attrs[node]['usercomment'];
-                
+        
         // If no comments exists, show 'No comments' and
         // set icon image source
         var iconSrc;
@@ -1241,7 +1241,7 @@ function addNodes2Table(data) {
         } else {
             iconSrc = 'images/nodes/ui-icon-comment.png';
         }
-                
+        
         // Create icon for node comments
         var tipID = node + 'Tip';
         var commentsCol = $('#' + node).parent().parent().find('td').eq(5);
@@ -1261,7 +1261,7 @@ function addNodes2Table(data) {
         icon.tooltip({
             position: "center right",
             offset: [-2, 10],
-            effect: "fade",    
+            effect: "fade",
             opacity: 0.8,
             relative: true,
             delay: 500
diff --git a/xCAT-UI/js/provision/images.js b/xCAT-UI/js/provision/images.js
index 7a8ac9ac0..9e9d88fcf 100644
--- a/xCAT-UI/js/provision/images.js
+++ b/xCAT-UI/js/provision/images.js
@@ -209,7 +209,7 @@ function loadImages(data) {
     });
     
     // Actions
-    var actionBar = $('<div class="actionBar"></div>');
+    var actionBar = $('<div class="actionBar"></div>').css("width", "370px");
     var advancedLnk = '<a>Advanced</a>';
     var advancedMenu = createMenu([copyCDLnk, generateLnk]);
 
@@ -236,8 +236,8 @@ function loadImages(data) {
      * Enable editable columns
      */
     
-    // Do not make 1st column editable
-    $('#' + imgTableId + ' td:not(td:nth-child(1))').editable(
+    // Do not make 1st or 2nd columns editable
+    $('#' + imgTableId + ' td:not(td:nth-child(1),td:nth-child(2))').editable(
         function(value, settings) {    
             // Get column index
             var colPos = this.cellIndex;
@@ -1030,6 +1030,7 @@ function openEditImagePage(tgtImage) {
 
     // Create an input for each definable attribute
     var div, label, input, value;
+    var attrIndex = 0;
     // Set node attribute
     origAttrs[tgtImage]['imagename'] = tgtImage;
     for (var key in defAttrs) {
@@ -1044,7 +1045,21 @@ function openEditImagePage(tgtImage) {
         // Create label and input for attribute
         div = $('<div></div>').css('display', 'inline');
         label = $('<label>' + key + ':</label>').css('vertical-align', 'middle');
-        input = $('<input type="text" id="' + key + '" value="' + value + '" title="' + defAttrs[key] + '"/>').css('margin-top', '5px');
+        input = $('<input type="text" id="' + key + '" value="' + value + '" title="' + defAttrs[key] + '"/>').css({
+            'margin-top': '5px',
+            'float': 'none',
+            'width': 'inherit'
+        });
+        
+        // There is an element called groups that will override the defaults for the groups attribute.
+        // Hence, the input must have use CSS to override the float and width.
+        
+        // Split attributes into 3 per row
+        if (attrIndex > 0 && !(attrIndex % 3)) {
+            div.css('display', 'inline-block');
+        }
+        
+        attrIndex++;
         
         // Create server browser
         switch (key) {
@@ -1177,8 +1192,7 @@ function openEditImagePage(tgtImage) {
             $(this).css('border-color', 'blue');
         });
         
-        div.append(label);
-        div.append(input);
+        div.append(label, input);
         setPropsForm.append(div);
     }