[Kimchi-devel] [PATCH] Bugfix#: Prevent overlap issue occurs under General tab on Edit

[Wen Wang]

From: Wen Wang <wenwang at linux.vnet.ibm.com>

This patch fix the bug that occurs when changing languages which
might contain long words that cause problems of layout in
"General" tab under "Edit" for VM.

Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
---
 ui/css/theme-default/guest-edit.css |   10 ++++----
 ui/pages/guest-edit.html.tmpl       |   38 +++++++++++++++-------------------
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/ui/css/theme-default/guest-edit.css b/ui/css/theme-default/guest-edit.css
index f6cf214..75032c6 100644
--- a/ui/css/theme-default/guest-edit.css
+++ b/ui/css/theme-default/guest-edit.css
@@ -33,6 +33,10 @@
     padding: 1em;
 }
 
+#form-guest-edit-general .edit-general-inline {
+    display: inline-block;
+}
+
 #form-guest-edit-storage input[readonly] {
     background: none;
     border-color: transparent;
@@ -43,16 +47,12 @@
     padding-right: 0;
 }
 
-.guest-edit-wrapper-label, .guest-edit-wrapper-controls {
-    display: inline-block;
-}
-
 .guest-edit-wrapper-label {
     height: 38px;
     line-height: 38px;
     margin-top: 5px;
     vertical-align: top;
-    width: 100px;
+    min-width: 100px;
 }
 
 #form-guest-edit-storage .guest-edit-wrapper-label {
diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl
index 0eaa08d..3003ab1 100644
--- a/ui/pages/guest-edit.html.tmpl
+++ b/ui/pages/guest-edit.html.tmpl
@@ -44,48 +44,44 @@
             </ul>
             <form id="form-guest-edit-general">
                 <fieldset class="guest-edit-fieldset">
-                    <div>
+                    <div class="edit-general-inline">
                         <div class="guest-edit-wrapper-label">
                             <label for="guest-edit-id-textbox">
                                 $_("Name")
                             </label>
                         </div>
-                        <div class="guest-edit-wrapper-controls">
-                            <input id="guest-edit-id-textbox"
-                                name="name" type="text" />
-                        </div>
-                    </div>
-                    <div>
                         <div class="guest-edit-wrapper-label">
                             <label for="guest-edit-cores-textbox">
                                 $_("CPUs")
                             </label>
                         </div>
+                        <div class="guest-edit-wrapper-label">
+                            <label for="guest-edit-memory-textbox">
+                                $_("Memory (MB)")
+                            </label>
+                        </div>
+                        <div class="guest-edit-wrapper-label">
+                            <label for="guest-edit-icon-textbox">
+                                $_("Icon")
+                            </label>
+                        </div>
+                    </div>
+                    <div class="edit-general-inline">
+                        <div class="guest-edit-wrapper-controls">
+                            <input id="guest-edit-id-textbox"
+                                name="name" type="text" />
+                        </div>
                         <div class="guest-edit-wrapper-controls">
                             <input
                                 id="guest-edit-cores-textbox"
                                 name="cpus"
                                 type="text" />
                         </div>
-                    </div>
-                    <div>
-                        <div class="guest-edit-wrapper-label">
-                            <label for="guest-edit-memory-textbox">
-                                $_("Memory (MB)")
-                            </label>
-                        </div>
                         <div class="guest-edit-wrapper-controls">
                             <input id="guest-edit-memory-textbox"
                                 name="memory"
                                 type="text" />
                         </div>
-                    </div>
-                    <div>
-                        <div class="guest-edit-wrapper-label">
-                            <label for="guest-edit-icon-textbox">
-                                $_("Icon")
-                            </label>
-                        </div>
                         <div class="guest-edit-wrapper-controls">
                             <input
                                 id="guest-edit-icon-textbox"
-- 
1.7.1