fixed Firefox layouting issue of settings popup

css/settings.css

@@ -1,5 +1,6 @@
 form {
   margin: 10px;
+  max-width: 600px;
 }
 form input {
   margin: 1px;
@@ -11,7 +12,6 @@ body,th,td {
 }
 .settingsContainer {
   position:relative;
-  max-width: 600px;
   /*min-width: 370px;*/
   width: 100%;
   height: 100%;

css/styles.css

@@ -422,20 +422,13 @@ top: 0px;
 	height: auto;
 	float: right;
 }
-.btnPrint.disabled {
-	opacity: 0.3;
 
-}
 .btnStop {
 	margin: 5% 10% 1% 5%;
 	float: right;
 	width: 90%;
 	max-width: 98px;
 	height: auto;
-	display: block;
-}
-.btnStop.disabled {
-	display: none;
 }
 
 .btnsSettingsInfo {
@@ -563,7 +556,7 @@ SETTINGS POPUP
 	right: 0;
 	bottom: 0;
 	z-index: 15;
-	max-width: 835px;
+	max-width: 775px;
 	max-height: 540px;
 	width: 80%;
 	height: 75%;
@@ -573,58 +566,60 @@ SETTINGS POPUP
 	box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
 	border: 2px solid #222;
 	border-radius: 15px;
-	overflow: hidden;
-	display: table;
 	padding: 2%;
 }
 
-#contentOverlay #settings .settingsLabelContainer {
+#contentOverlay #settings .toppanel {
+	height: 10%;
+}
+
+#contentOverlay #settings .toppanel .settingsLabelContainer {
 	width: 100%;
 	height: auto;
 	margin-bottom: 1%;
 }
 
-#contentOverlay #settings .settingsLabelImg {
+#contentOverlay #settings .toppanel .settingsLabelContainer .settingsLabelImg {
 	width: 45%;
 	max-width: 373px;
 	height: auto;
 }
 
-#contentOverlay #settings > .content {
+#contentOverlay #settings .bottompanel {
-	display: table-row;
 	width: 100%;
+	height: 90%;
 }
 
-#contentOverlay #settings > .content > .settings {
+#contentOverlay #settings .bottompanel > .settingsContainer {
+	float: left;
+	width: 83%;
+	height: 98%;
+	margin: .5%;
+
+	-ms-overflow-y: scroll;
+	overflow-y: scroll;
 	border: 1px solid #bbbbbb;
 	border-radius: 5px;
-	overflow: scroll;
-
-	-ms-overflow-x: hidden;
-	overflow-x: hidden;
 }
 
-#contentOverlay #settings > .content > .btnContainer {
+#contentOverlay #settings .bottompanel > .btnContainer {
 	width: 15%;
+	height: 100%;
+	float: right;
 	position: relative;
-	display: table-cell;
+	right: 0;
 }
 
-#contentOverlay #settings > .content > .btnContainer > .btnOK {
+#contentOverlay #settings .bottompanel > .btnContainer > .btnOK {
 	position: absolute;
 	bottom: 3%;
-	right: 3%;
+	right: 7%;
 	max-width: 85px;
 	min-width: 42px;
-	width: 91%;
+	width: 88%;
 	height: auto;
 	margin: 0 2% 2% 0;
 	cursor: pointer;
-	float: right;
-}
-
-#contentOverlay #settings > .content > div {
-	height: 100%;
 }
 
 @media only screen and (max-width: 480px),only screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5),only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio: 1.5) {

index.html

@@ -101,11 +101,13 @@
   </div>
   <div id="contentOverlay">
     <div id="settings">
-      <div class="settingsLabelContainer">
+      <div class="toppanel">
-        <img class="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
+        <div class="settingsLabelContainer">
+          <img class="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
+        </div>
       </div>
-      <div class="content">
+      <div class="bottompanel">
-        <div class="settings"></div>
+        <div class="settingsContainer"></div>
         <div class="btnContainer">
           <img src="img/buttons/btnOk_settings.png" class="btnOK" alt="settings"/>
         </div>

js/SettingsWindow.js

@@ -83,7 +83,7 @@ function SettingsWindow() {
 
 		this.window = $("#settings");
 		this.window.find(".btnOK").click(this.submitwindow);
-	  this.window.find(".settings").load("settings.html", function() {
+	  this.window.find(".settingsContainer").load("settings.html", function() {
       console.log("Settings:finished loading settings.html, now loading settings...");
 
       self.form = self.window.find("form");

less/settingsPopup.less

@@ -23,7 +23,7 @@
     right: 0;
     bottom: 0;
     z-index: 15;
-    max-width: 835px;
+    max-width: 775px;
     max-height: 540px;
     width: 80%;
     height: 75%;
@@ -31,55 +31,56 @@
     box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
     border: 2px solid #222;
     border-radius: 15px;
-    overflow: hidden;
-    display: table;
     padding: 2%;
 
-    .settingsLabelContainer {
+    .toppanel {
-      width: 100%;
+      height: 10%;
-      height: auto;
-      margin-bottom: 1%;
-    }
-    .settingsLabelImg {
-      width: 45%;
-      max-width: 373px;
-      height: auto;
-    }
 
-    > .content {
+      .settingsLabelContainer {
-//      margin: 3% 12%;
+        width: 100%;
-//      margin-top: 12%;
+        height: auto;
-//      max-height: 388px;
+        margin-bottom: 1%;
-      display: table-row;
-      width: 100%;
 
-      > .settings {
+        .settingsLabelImg {
+          width: 45%;
+          max-width: 373px;
+          height: auto;
+        }
+      }
+    }
+    .bottompanel {
+      width: 100%;
+      height: 90%;
+
+      > .settingsContainer {
+        float:left;
+        width: 83%;
+        height: 98%;
+        margin: .5%;
+        overflow-y: scroll;
+        overflow-x: hidden;
         border: 1px solid rgb(187, 187, 187);
         border-radius: 5px;
-        overflow: scroll;
-        overflow-x: hidden;
       }
       > .btnContainer {
         width: 15%;
+        height: 100%;
+        float:right;
         position:relative;
-        display: table-cell;
+        right: 0;
 
         > .btnOK {
           position: absolute;
           bottom: 3%;
-          right: 3%;
+          right: 7%;
           max-width: 85px;
           min-width: 42px;
-          width: 91%;
+          width: 88%;
           height: auto;
           margin: 0 2% 2% 0;
           cursor: pointer;
-          float: right;
         }
       }
-      > div {
-        height: 100%;
-      }
     }
   }
 }