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

[Christy Perez]

Tested-By: Christy Perez <christy at linux.vnet.ibm.com>

On 09/23/2014 09:13 AM, Wen Wang wrote:
> 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"
>