Cambios al diseño de forma.html

Cambios al diseño de forma.html para permitir cualquier cantidad de inputs por columnas.
Además, prepara para presentar en celulares.

static/estilo.css

@@ -59,6 +59,10 @@ body {
   font-family: "arial";
   text-align: center;
 }
+.form-control-inline
+{
+margin: 12px 0px 0px 0px;
+}
 .header{
   background-color: var(--colorOscuro); 
   color: var(--fontClaro);;

templates/forma.html

@@ -43,13 +43,15 @@
 </div>
 <div class="container" align="center">
 <!-- <form class="form" action="/procesaUser" method="POST"> -->
-<form class="form" action="/{{user_type}}/procesaUser" method="POST">
+<form class="form-inline" action="/{{user_type}}/procesaUser" method="POST">
       {% raw %}
+<div class="modal-body row">
+  <div class="col-md-6">
 <span ng-repeat="entrada in entradas.col1">
-<div>
-	<span class="boton labelForma">
+  <div class="form-group">
+	<label for="{{entrada.name}}" class="boton labelForma">
 		{{entrada.label}}
-	</span>
+	</label>
 	<span ng-if="entrada.type=='select'">
 		<select ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" name="{{entrada.name}}" id="{{entrada.name}}" class="form-control-inline"  style="width: 250px;height: 48px;"
       ng-options="opcion.label for opcion in entrada.options track by opcion.id"
@@ -58,55 +60,65 @@
       ></select>
 	</span>
 	<span ng-if="entrada.type=='checkbox'">
-		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="{{entrada.type}}" name="{{entrada.name}}" value="1" ng-checked="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="{{entrada.type}}" name="{{entrada.name}}" id="{{entrada.name}}" value="1" ng-checked="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
 	</span>
 	<span ng-if="entrada.type=='tel'">
-		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="tel" placeholder="787-123-4567" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" ng-required="entrada.require" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="tel" placeholder="787-123-4567" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" ng-required="entrada.require" id="{{entrada.name}}" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
 	</span>
 	<span ng-if="entrada.type=='date'">
-		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="date" placeholder="yyyy-MM-dd" pattern="\d{4}-\d{1,2}-\d{1,2}" ng-required="entrada.require" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="date" placeholder="yyyy-MM-dd" pattern="\d{4}-\d{1,2}-\d{1,2}" ng-required="entrada.require" id="{{entrada.name}}" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
 	</span>
 	<span ng-if="entrada.type!='select' && entrada.type!='checkbox' && entrada.type!='tel' && entrada.type!='date'">
-		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" ng-required="entrada.require" class="form-control-inline" type="{{entrada.type}}" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
-	</span>
-
-  <span ng-if="entradas.col2[$index].name">
-	<span class="boton labelForma">
-		{{entradas.col2[$index].label}}
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" ng-required="entrada.require" class="form-control-inline" type="{{entrada.type}}" id="{{entrada.name}}" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
 	</span>
-	<span ng-if="entradas.col2[$index].type=='select'">
-		<select ng-disabled="entradas.col2[$index].disabled" name="{{entradas.col2[$index].name}}" id="{{entradas.col2[$index].name}}" class="form-control-inline"  style="width: 250px;height: 48px;"
-      ng-options="opcion.label for opcion in entradas.col2[$index].options track by opcion.id"
-      ng-model="entradas.col2[$index].value"
-      ng-required="entradas.col2[$index].require"
+  </div>
+</div>
+  <div class="col-md-6">
+<span ng-repeat="entrada in entradas.col2">
+  <div class="form-group">
+	<label for="{{entrada.name}}" class="boton labelForma">
+		{{entrada.label}}
+	</label>
+	<span ng-if="entrada.type=='select'">
+		<select ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" name="{{entrada.name}}" id="{{entrada.name}}" class="form-control-inline"  style="width: 250px;height: 48px;"
+      ng-options="opcion.label for opcion in entrada.options track by opcion.id"
+      ng-model="entrada.value"
+      ng-required="true" required
       ></select>
 	</span>
-	<span ng-if="entradas.col2[$index].type=='checkbox'">
-			<input ng-disabled="entradas.col2[$index].disabled" class="form-control-inline" type="checkbox" name="{{entradas.col2[$index].name}}" value="1" ng-checked="{{entradas.col2[$index].value}}" style="width: 250px;height: 48px;align:left;">
+	<span ng-if="entrada.type=='checkbox'">
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="{{entrada.type}}" name="{{entrada.name}}" id="{{entrada.name}}" value="1" ng-checked="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
 	</span>
-	<span ng-if="entradas.col2[$index].type=='tel'">
-		<input ng-disabled="entradas.col2[$index].disabled" class="form-control-inline" type="tel" placeholder="787-123-4567" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" ng-required="entradas.col2[$index].require" name="{{entradas.col2[$index].name}}" value="{{entradas.col2[$index].value}}" style="width: 250px;height: 48px;align:left;">
+	<span ng-if="entrada.type=='tel'">
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="tel" placeholder="787-123-4567" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" ng-required="entrada.require" id="{{entrada.name}}" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
 	</span>
-	<span ng-if="entradas.col2[$index].type=='date'">
-		<input ng-disabled="entradas.col2[$index].disabled" class="form-control-inline" type="date" placeholder="yyyy-MM-dd" pattern="\d{4}-\d{1,2}-\d{1,2}" ng-required="entradas.col2[$index].require" name="{{entradas.col2[$index].name}}" value="{{entradas.col2[$index].value}}" style="width: 250px;height: 48px;align:left;">
+	<span ng-if="entrada.type=='date'">
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="date" placeholder="yyyy-MM-dd" pattern="\d{4}-\d{1,2}-\d{1,2}" ng-required="entrada.require" id="{{entrada.name}}" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
 	</span>
-	<span ng-if="entradas.col2[$index].type!='select' && entradas.col2[$index].type!='checkbox' && entradas.col2[$index].type!='tel' && entradas.col2[$index].type!='date'">
-		<input ng-disabled="entradas.col2[$index].disabled" class="form-control-inline" type="{{entradas.col2[$index].type}}" ng-required="entradas.col2[$index].require" name="{{entradas.col2[$index].name}}" value="{{entradas.col2[$index].value}}" style="width: 250px;height: 48px;align:left;">
+	<span ng-if="entrada.type!='select' && entrada.type!='checkbox' && entrada.type!='tel' && entrada.type!='date'">
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" ng-required="entrada.require" class="form-control-inline" type="{{entrada.type}}" id="{{entrada.name}}" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
 	</span>
-  </span>
+  </div>
+</div>
+</div>
+
 </div>
 </span>
+</div>
       {% endraw %}
 <input type="hidden" name="id" value="{{id}}">
 <input type="hidden" name="accion" value="{{accion}}">
 <input type="hidden" name="tipo" value="{{tipo}}">
       {% raw %}
+<div class="modal-body row">
+  <div class="col-md-12" align="center">
 <span ng-if="abled">
  <input class="boton labelForma" type="submit">
 </span>
+</div>
+</div>
       {% endraw %}
 </form>
 </div>
-</div>
 </body>
 </html>