Merge pull request #1481 from iNavFlight/MrD-Fix-multi-line-label-positioning

Improved alignment of inputs and labels

main.css

@@ -37,10 +37,14 @@ a.disabled {
 }
 
 /* Help-Icon  */
+.gui_box_titlebar .helpicon {
+    margin-right: 10px;
+    margin-top: 5px !important;
+}
+
 .helpicon {
     float: right;
     margin-top: 7px;
-    margin-right: 7px;
     display: block;
     height: 14px;
     width: 14px;
@@ -1950,7 +1954,6 @@ dialog {
     .helpicon {
         float: right;
         margin-top: 5px;
-        margin-right: 7px;
         height: 14px;
         width: 14px;
         transition: none;

src/css/tabs/advanced_tuning.css

@@ -0,0 +1,7 @@
+.tab-advanced-tuning .config-section select, .tab-advanced-tuning .spacer_box div input {
+    margin-right: 0 !important;
+}
+
+.tab-advanced-tuning .config-section .checkbox .switchery {
+    margin-right: 63px !important;
+}

src/css/tabs/configuration.css

@@ -40,7 +40,7 @@
 
 .config-section .string input,
 .tab-configuration .string input {
-    width: 130px;
+    width: 106px;
 }
 
 .tab-configuration .disabled {
@@ -49,7 +49,7 @@
 
 .config-section input,
 .tab-configuration input {
-    float: left;
+    /*float: left;*/
 }
 
 .config-section .spacer_box,
@@ -185,6 +185,12 @@ hr {
     width: 110px;
 }
 
+.tab-configuration #magalign {
+    width: 111px;
+    height: 22px;
+    margin-right: 4px;
+}
+
 @media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
     .tab-configuration .gui_box span {
         line-height: 17px;
@@ -211,7 +217,12 @@ hr {
 .config-section .radio,
 .config-section .number {
     position: relative;
-    height: 22px;
+    min-height: 22px;
+}
+
+.config-section .select select,
+.config-section .number input {
+    vertical-align: top;
 }
 
 .config-section .checkbox label,
@@ -220,8 +231,8 @@ hr {
 }
 
 .config-section label {
-    position: absolute;
-    left: 108px;
+    display: inline-block;
+    width: calc(100% - 162px);
 }
 
 .config-section .radio label {
@@ -243,9 +254,21 @@ hr {
 }
 
 .config-section select {
-    width: 110px;
+    width: 111px;
+    height: 22px;
+    margin-right: 4px;
 }
 
 .config-section .helpicon {
     margin-top: 3px;
 }
+
+.config-section .unit_wrapper {
+    vertical-align: top;
+}
+
+.config-section .checkbox .switchery {
+    margin-right: 72px;
+    vertical-align: top;
+    margin-top: 3px;
+}

src/css/tabs/gps.css

@@ -113,6 +113,10 @@
     border-top-right-radius: 0;
 }
 
+.tab-gps .config-section .checkbox .switchery {
+    margin-right: 68px;
+}
+
 #gps-map {
     height: 400px;
     width: 100%;

src/css/tabs/motors.css

@@ -456,3 +456,11 @@
 .tab-servos .short {
     width: 32px;
 } 
+
+.tab-motors .config-section .checkbox .switchery {
+    margin-right: 68px;
+}
+
+.tab-motors .config-section .number input {
+    margin-right: 4px;
+}

src/css/tabs/osd.css

@@ -489,11 +489,11 @@ button {
 }
 
 .tab-osd .settings select {
-    width: 75px;
+    width: 80px;
 }
 
 .tab-osd .settings .switchery {
-    margin-right: 25px;
+    margin-right: 33px;
 }
 
 .tab-osd .settings .djiCraftNameElements {
@@ -530,3 +530,16 @@ button {
     width: auto !important;
     margin-right: 0 !important;
 }
+
+.tab-osd label > .i18n-replaced {
+    display: inline-block;
+    left: 108px;
+    width: calc(100% - 110px);
+}
+
+.tab-osd .settings select,
+.tab-osd .settings input, 
+.tab-osd .osd_settings .switchery,
+.tab-osd .unit_wrapper {
+    vertical-align: top;
+}

tabs/osd.html

@@ -38,7 +38,7 @@
                     </div>
                 </div>
             </div>
-            <div class="cf_column third_right">
+            <div class="cf_column third_right osd_settings">
                 <div class="gui_box grey">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" data-i18n="osd_video_format"></div>
@@ -221,11 +221,10 @@
                             <select data-setting="dji_message_speed_source" data-live="true"></select> 
                             <span data-i18n="osd_dji_speed_source"></span>
                         </label>
-                        <div class="djiCraftNameElements">
-                            <input type="checkbox" id="useCraftnameForMessages" data-setting="dji_use_name_for_messages" data-live="true" class="toggle"/>
-                            <span data-i18n="osd_dji_use_craft_name_elements"></span> 
-
-                        </div>
+                        <label class="djiCraftNameElements">
+                                <input type="checkbox" id="useCraftnameForMessages" data-setting="dji_use_name_for_messages" data-live="true" class="toggle"/>
+                                <span data-i18n="osd_dji_use_craft_name_elements"></span>
+                        </label>
                         <label>
                             <input type="checkbox" id="djiAdjustments" data-setting="dji_use_adjustments" data-live="true" class="toggle"></select>
                             <span data-i18n="osd_dji_adjustments"></span>