[style] Fix checkbox/radio in input-group-addon, add missing label<->input refs

6 files changed, 48 insertions, 24 deletions

diff --git a/modules-available/serversetup-bwlp/templates/ipxe.html b/modules-available/serversetup-bwlp/templates/ipxe.html
index fbe3fb9e..bb776dca 100644
--- a/modules-available/serversetup-bwlp/templates/ipxe.html
+++ b/modules-available/serversetup-bwlp/templates/ipxe.html
@@ -15,9 +15,18 @@
 
 			<div class="form-group">
 				<strong>{{lang_bootBehavior}}</strong>
-				<div class="radio"><input type="radio" name="defaultentry" value="net" {{active-net}}><label>bwLehrpool</label></div>
-				<div class="radio"><input type="radio" name="defaultentry" value="hdd" {{active-hdd}}><label>{{lang_localHDD}}</label></div>
-				<div class="radio"><input type="radio" name="defaultentry" value="custom" {{active-custom}}><label>{{lang_customEntry}} (&quot;custom&quot;)</label></div>
+				<div class="radio">
+					<input type="radio" name="defaultentry" value="net" {{active-net}} id="id-net">
+					<label for="id-net">bwLehrpool</label>
+				</div>
+				<div class="radio">
+					<input type="radio" name="defaultentry" value="hdd" {{active-hdd}} id="id-hdd">
+					<label for="id-hdd">{{lang_localHDD}}</label>
+				</div>
+				<div class="radio">
+					<input type="radio" name="defaultentry" value="custom" {{active-custom}} id="id-custom">
+					<label for="id-custom">{{lang_customEntry}} (&quot;custom&quot;)</label>
+				</div>
 			</div>
 
 			<div class="form-group">
diff --git a/modules-available/sysconfig/templates/cfg-start.html b/modules-available/sysconfig/templates/cfg-start.html
index 6196d475..b4628cba 100644
--- a/modules-available/sysconfig/templates/cfg-start.html
+++ b/modules-available/sysconfig/templates/cfg-start.html
@@ -15,7 +15,10 @@
 				<div class="input-group">
 					<span class="input-group-addon">
 						{{#unique}}
-						<input type="radio" name="module[{{groupid}}]" value="{{moduleid}}" id="module{{moduleid}}" {{#active}}checked{{/active}}>
+						<div class="radio">
+							<input type="radio" name="module[{{groupid}}]" value="{{moduleid}}" id="module{{moduleid}}" {{#active}}checked{{/active}}>
+							<label></label>
+						</div>
 						{{/unique}}
 						{{^unique}}
 						<div class="checkbox">
diff --git a/modules-available/vmstore/templates/page-vmstore.html b/modules-available/vmstore/templates/page-vmstore.html
index 293b8aad..4a508e74 100644
--- a/modules-available/vmstore/templates/page-vmstore.html
+++ b/modules-available/vmstore/templates/page-vmstore.html
@@ -12,8 +12,8 @@
 	<div class="panel panel-default">
 		<div class="panel-heading">
 			<div class="radio">
-				<input type="radio" name="storetype" value="internal" {{pre-internal}}>
-				<label>{{lang_intern}}</label>
+				<input type="radio" name="storetype" value="internal" {{pre-internal}} id="id-internal">
+				<label for="id-internal">{{lang_intern}}</label>
 			</div>
 		</div>
 		<div class="panel-body">
@@ -24,8 +24,8 @@
 	<div class="panel panel-default">
 		<div class="panel-heading">
 			<div class="radio radio-inline">
-				<input type="radio" name="storetype" value="nfs" {{pre-nfs}}>
-				<label>NFS</label>
+				<input type="radio" name="storetype" value="nfs" {{pre-nfs}} id="id-nfs">
+				<label for="id-nfs">NFS</label>
 			</div>
 			<a class="btn btn-default btn-sm" data-toggle="modal" data-target="#help-nfs"><span class="glyphicon glyphicon-question-sign"></span></a>
 		</div>
@@ -40,8 +40,8 @@
 	<div class="panel panel-default">
 		<div class="panel-heading">
 			<div class="radio">
-				<input type="radio" name="storetype" value="cifs" {{pre-cifs}}>
-				<label>CIFS</label>
+				<input type="radio" name="storetype" value="cifs" {{pre-cifs}} id="id-cifs">
+				<label for="id-cifs">CIFS</label>
 			</div>
 		</div>
 		<div class="panel-body">
diff --git a/modules-available/webinterface/templates/https.html b/modules-available/webinterface/templates/https.html
index 365e2fee..f0accb57 100644
--- a/modules-available/webinterface/templates/https.html
+++ b/modules-available/webinterface/templates/https.html
@@ -29,9 +29,9 @@
 			<div class="input-group" onclick="$('#moff').prop('checked', true);
 					$('#wcustom').hide()">
 				<span class="input-group-addon">
-					<div class="radio" style="margin: 0; line-height: normal; text-align: left">
+					<div class="radio">
 						<input id="moff" type="radio" name="mode" value="off">
-						<label style="padding: 0"></label>
+						<label></label>
 					</div>
 				</span>
 				<span class="form-control">
@@ -42,9 +42,9 @@
 			<div class="input-group" onclick="$('#mrandom').prop('checked', true);
 					$('#wcustom').hide()">
 				<span class="input-group-addon">
-					<div class="radio" style="margin: 0; line-height: normal; text-align: left">
+					<div class="radio">
 						<input id="mrandom" type="radio" name="mode" value="random">
-						<label style="padding: 0"></label>
+						<label></label>
 					</div>
 				</span>
 				<span class="form-control">
@@ -54,9 +54,9 @@
 			<div class="input-group" onclick="$('#mcustom').prop('checked', true);
 					$('#wcustom').show()">
 				<span class="input-group-addon">
-					<div class="radio" style="margin: 0; line-height: normal; text-align: left">
+					<div class="radio">
 						<input id="mcustom" type="radio" name="mode" value="custom">
-						<label style="padding: 0"></label>
+						<label></label>
 					</div>
 				</span>
 				<span class="form-control">
@@ -89,9 +89,9 @@ MIIFfTCCA...
 			<br>
 			<div class="input-group">
 				<span class="input-group-addon">
-					<div class="checkbox" style="margin: 0; line-height: normal; text-align: left">
+					<div class="checkbox">
 						<input id="httpsredirect" type="checkbox" name="httpsredirect" value="on" {{redirect_checked}}>
-						<label style="padding: 0"></label>
+						<label></label>
 					</div>
 				</span>
 				<span class="form-control" onclick="$('#httpsredirect').prop('checked', !$('#httpsredirect').prop('checked'))">
@@ -100,9 +100,9 @@ MIIFfTCCA...
 			</div>
 			<div class="input-group">
 				<span class="input-group-addon">
-					<div class="checkbox" style="margin: 0; line-height: normal; text-align: left">
+					<div class="checkbox">
 						<input id="usehsts" type="checkbox" name="usehsts" value="on" {{hsts_checked}}>
-						<label style="padding: 0"></label>
+						<label></label>
 					</div>
 				</span>
 				<span class="form-control" onclick="$('#usehsts').prop('checked', !$('#usehsts').prop('checked'))">
diff --git a/modules-available/webinterface/templates/passwords.html b/modules-available/webinterface/templates/passwords.html
index b9ff5550..e190bb72 100644
--- a/modules-available/webinterface/templates/passwords.html
+++ b/modules-available/webinterface/templates/passwords.html
@@ -7,9 +7,9 @@
 			<p>{{lang_passwordsDescription}}</p>
 			<div class="input-group" onclick="$('#pmshow').prop('checked', true)">
 				<span class="input-group-addon">
-					<div class="radio" style="margin: 0; line-height: normal; text-align: left">
+					<div class="radio">
 						<input id="pmshow" type="radio" name="mode" value="show" {{selected_show}}>
-						<label style="padding: 0"></label>
+						<label></label>
 					</div>
 				</span>
 				<span class="form-control">
@@ -18,9 +18,9 @@
 			</div>
 			<div class="input-group" onclick="$('#pmhide').prop('checked', true)">
 				<span class="input-group-addon">
-					<div class="radio" style="margin: 0; line-height: normal; text-align: left">
+					<div class="radio">
 						<input id="pmhide" type="radio" name="mode" value="hide" {{selected_hide}}>
-						<label style="padding: 0"></label>
+						<label></label>
 					</div>
 				</span>
 				<span class="form-control">
diff --git a/style/default.css b/style/default.css
index fc8d3af1..7273dba2 100644
--- a/style/default.css
+++ b/style/default.css
@@ -573,6 +573,18 @@ it only applies if they're in a container that has the checkbox class */
 	margin-top: 0;
 }
 
+.input-group-addon > .checkbox,
+.input-group-addon > .radio {
+	margin: 0;
+	line-height: normal;
+	text-align: left;
+}
+
+.checkbox input[type="checkbox"] + label:empty,
+.radio input[type="radio"] + label:empty {
+	padding: 0;
+}
+
 /* Hack to get ellipsis in containers without absolute width */
 /* Use: <table class="slx-ellipsis"><tr><td>my text bla bla</td></tr></table> */