llaske#1607 Fix alignment issue. Wrap label and input tag in div and …

…apply some css to wrapper div.
vraj-712 · Apr 23, 2024 · a5d7995 · a5d7995
1 parent 075de81
commit a5d7995
Showing 1 changed file with 35 additions and 16 deletions.
diff --git a/activities/Abacus.activity/js/custompalette.js b/activities/Abacus.activity/js/custompalette.js
@@ -11,64 +11,88 @@ define(["sugar-web/graphics/palette"], function (palette) {
         palette.Palette.call(this, invoker, primaryText);
 
 		var div = document.createElement('div');
+		div.setAttribute("style", "padding: 5px 13px;")
 
+		var rodsdiv =  document.createElement('div'); //
+		rodsdiv.setAttribute("style", "display: flex;justify-content:space-between;align-items: center;margin-top:10px;");
 		var lrods = document.createElement("label");
 		lrods.innerHTML = "Rods:";
 		lrods.setAttribute("for","rods");
 		var rods = document.createElement("INPUT");
 		rods.setAttribute("type", "number");
 		rods.setAttribute("min","1");
-		rods.setAttribute("style","width:40px;margin:5px;");
+		rods.setAttribute("style","width:40px;");
 		rods.setAttribute("id","rods");
 		rods.value=g.customarr[0];
+		rodsdiv.append(lrods);
+		rodsdiv.append(rods);
 
+		var topdiv =  document.createElement('div');
+		topdiv.setAttribute("style", "display: flex;justify-content:space-between;align-items: center;margin-top:5px;");
 		var ltop = document.createElement("label");
 		ltop.innerHTML = "Top:";
 		ltop.setAttribute("for","top");
 		var top = document.createElement("INPUT");
 		top.setAttribute("type", "number");
 		top.setAttribute("min","1");
-		top.setAttribute("style","width:40px;margin:5px;");
+		top.setAttribute("style","width:40px;");
 		top.setAttribute("id","top");
 		top.value=g.customarr[1];
+		topdiv.append(ltop);
+		topdiv.append(top);
 
+		var bottomdiv =  document.createElement('div');
+		bottomdiv.setAttribute("style", "display: flex;justify-content:space-between;align-items: center;margin-top:5px;");
 		var lbottom = document.createElement("label");
 		lbottom.innerHTML = "Bottom:";
 		lbottom.setAttribute("for","bottom");
 		var bottom = document.createElement("INPUT");
 		bottom.setAttribute("type", "number");
 		bottom.setAttribute("min","1");
-		bottom.setAttribute("style","width:40px;margin:5px;");
+		bottom.setAttribute("style","width:40px;");
 		bottom.setAttribute("id","bottom");
 		bottom.value=g.customarr[2];
+		bottomdiv.append(lbottom);
+		bottomdiv.append(bottom);
 
+		var factordiv =  document.createElement('div');
+		factordiv.setAttribute("style", "display: flex;justify-content:space-between;align-items: center;margin-top:5px;");
 		var lfactor = document.createElement("label");
 		lfactor.innerHTML = "Factor:";
 		lfactor.setAttribute("for","factor");
 		var factor = document.createElement("INPUT");
 		factor.setAttribute("type", "number");
 		factor.setAttribute("min","1");
-		factor.setAttribute("style","width:40px;margin:5px;");
+		factor.setAttribute("style","width:40px;");
 		factor.setAttribute("id","factor");
 		factor.value=g.customarr[3];
+		factordiv.append(lfactor);
+		factordiv.append(factor);
 
+		var basediv =  document.createElement('div');
+		basediv.setAttribute("style", "display: flex;justify-content:space-between;align-items: center;margin-top:5px;");
 		var lbase = document.createElement("label");
 		lbase.innerHTML = "Base:";
 		lbase.setAttribute("for","base");
 		var base = document.createElement("INPUT");
 		base.setAttribute("type", "number");
 		base.setAttribute("min","1");
-		base.setAttribute("style","width:40px;margin:5px;");
+		base.setAttribute("style","width:40px;");
 		base.setAttribute("id","base");
 		base.value=g.customarr[4];
+		basediv.append(lbase);
+		basediv.append(base);
 
+		var submitdiv = document.createElement("div");
+		submitdiv.setAttribute("style", "display: flex;justify-content:space-between;align-items: center;margin-top:5px;");
 		var submit = document.createElement('button');
 		submit.className = 'toolbutton';
 		submit.setAttribute('id','new-button');
 		submit.setAttribute('title','Create');
 		submit.onclick = function() {
 			that.setAbacus();
 		}
+		submitdiv.append(submit);
 
 		function isNormalInteger(str) {
 		    var n = Math.floor(Number(str));
@@ -83,17 +107,12 @@ define(["sugar-web/graphics/palette"], function (palette) {
 			}
 		}
 
-		div.appendChild(lrods);
-		div.appendChild(rods);
-		div.appendChild(ltop);
-		div.appendChild(top);
-		div.appendChild(lbottom);
-		div.appendChild(bottom);
-		div.appendChild(lfactor);
-		div.appendChild(factor);
-		div.appendChild(lbase);
-		div.appendChild(base);
-		div.appendChild(submit);
+		div.appendChild(rodsdiv);
+		div.appendChild(topdiv);
+		div.appendChild(bottomdiv);
+		div.appendChild(factordiv);
+		div.appendChild(basediv);
+		div.appendChild(submitdiv);
 
 		this.setContent([div]);
 		var that = this;