Labels Created on index page

views/index.ejs

@@ -15,37 +15,69 @@
     <div class="row">
         <div class="col-break w-100">
             <input id="hdn_partid" name="partid" type="text" class="form-control visually-hidden" placeholder="partid" dmx-bind:value="api1.data.id">
-            <input id="txt_partNumber" name="partnumber" type="text" class="form-control" placeholder="Part Number" dmx-on:blur="hdn_url.setValue(hdn_baseurl.value.concat(value));api1.load({})">
+            <div class="form-group mb-3 row">
+                <label for="partnumber" class="col-sm-2 col-form-label" style="width:6%;">Part #</label>
+                <div class="col-sm-10" style="float: left; width: 94%;">
+                    <input id="txt_partNumber" name="partnumber" type="text" class="form-control" dmx-on:blur="hdn_url.setValue(hdn_baseurl.value.concat(value));api1.load({})">
+                </div>
+            </div>
         </div>
     </div>
-    <div class="row">
-        <div class="col"><button id="btn_Search" class="btn btn-primary" dmx-on:click="api1.load({});hdn_partid.setValue(api1.data.id)">Search</button></div>
-    </div>
     <div class="row">
         <div class="col">
-            <div class="d-block"><input id="txt_description" name="description" type="text" class="form-control" placeholder="Description" dmx-bind:value="api1.data.description"><select id="select1" class="form-select" name="pcodes" dmx-bind:options="serverconnect1.data.api.data" optiontext="name" optionvalue="id" dmx-bind:value="api1.data.partcode.id">
-                    <option value="">Part Code</option>
-                </select></div>
-
-
+            <div class="d-block">
+                <div class="form-group mb-3 row">
+                    <label for="description" class="col-sm-2 col-form-label" style="width:18%;">Description</label>
+                    <div class="col-sm-10" style="float: left; width: 82%;">
+                        <input id="txt_description" name="description" type="text" class="form-control" dmx-bind:value="api1.data.description">
+                    </div>
+                </div>
+                <div class="form-group mb-3 row">
+                    <label for="pcodes" class="col-sm-2 col-form-label" style="width:19%;">Part Codes</label>
+                    <div class="col-sm-10" style="float: left; width: 81%;">
+                        <select id="select1" class="form-select" name="pcodes" dmx-bind:options="serverconnect1.data.api.data" optiontext="name" optionvalue="id" dmx-bind:value="api1.data.partcode.id">
+                            <option value=""></option>
+                        </select>
+                    </div>
+                </div>
+            </div>
         </div>
         <div class="col">
-
-
-
-            <div class="d-block"><input id="txt_replaces" name="replaces" type="text" class="form-control" placeholder="Replaces" dmx-bind:value="api1.data.replaces.number"><input id="txt_replacedby" name="replacedby" type="text" class="form-control" placeholder="Replaced By" dmx-bind:value="api1.data.replacedby.number"></div>
+            <div class="d-block">
+                <div class="form-group mb-3 row">
+                    <label for="replaces" class="col-sm-2 col-form-label" style="width:18%;">Replaces</label>
+                    <div class="col-sm-10" style="float: left; width: 82%;">
+                        <input id="txt_replaces" name="replaces" type="text" class="form-control" dmx-bind:value="api1.data.replaces.number">
+                    </div>
+                </div>
+                <div class="form-group mb-3 row">
+                    <label for="replacedby" class="col-sm-2 col-form-label" style="width:22%;">Replaced By</label>
+                    <div class="col-sm-10" style="float: left; width: 78%;">
+                        <input id="txt_replacedby" name="replacedby" type="text" class="form-control" dmx-bind:value="api1.data.replacedby.number">
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     <div class="row">
         <div class="col">
             <div class="d-block">
-                <input id="txt_primaryvendor" name="primaryvendor" type="text" class="form-control" placeholder="Primary Vendor" dmx-bind:value="api1.data.primaryvendor.name">
-
+                <div class="form-group mb-3 row">
+                    <label for="primaryvendor" class="col-sm-2 col-form-label" style="width:30%;">Primary Vendor</label>
+                    <div class="col-sm-10" style="float: left; width: 70%;">
+                        <input id="txt_primaryvendor" name="primaryvendor" type="text" class="form-control" dmx-bind:value="api1.data.primaryvendor.name">
+                    </div>
+                </div>
             </div>
         </div>
         <div class="col">
             <div class="d-block">
-                <input id="txt_secondaryvendor" name="seconaryvendor" type="text" class="form-control" placeholder="Secondary Vendor" dmx-bind:value="api1.data.secondaryvendor.name">
+                <div class="form-group mb-3 row">
+                    <label for="seconaryvendor" class="col-sm-2 col-form-label" style="width:30%;">Secondary Vendor</label>
+                    <div class="col-sm-10" style="float: left; width: 70%;">
+                        <input id="txt_secondaryvendor" name="seconaryvendor" type="text" class="form-control" dmx-bind:value="api1.data.secondaryvendor.name">
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -54,14 +86,4 @@
             <a href="#" class="btn btn-warning" id="btn_dspec" dmx-bind:href="'/dspec?id='+hdn_partid.value">DSpec</a>
         </div>
     </div>
-</div>
-
-
-
-
-
-</form>
-
-
-
 </div>