Port most of Elements to LabeledValue

8 files changed, 126 insertions, 253 deletions

diff --git a/share/html/Elements/AddLinks b/share/html/Elements/AddLinks
index 131e7f8da0..096cfb55dc 100644
--- a/share/html/Elements/AddLinks
+++ b/share/html/Elements/AddLinks
@@ -73,30 +73,29 @@ $exclude .= qq| data-autocomplete-exclude="$id"| if $Object->id;
 <i><&|/l&>Enter objects or URIs to link objects to. Separate multiple entries with spaces.</&></i><br />
 % }
 <div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Depends on').':', Relation => 'DependsOn' &></div>
-    <div class="value col-9"><input type="text" class="form-control" name="<%$id%>-DependsOn" value="<% $ARGSRef->{"$id-DependsOn"} || '' %>" <% $exclude |n%>/></div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Depended on by').':', Relation => 'DependedOnBy' &></div>
-    <div class="value col-9"><input type="text" class="form-control" name="DependsOn-<%$id%>" value="<% $ARGSRef->{"DependsOn-$id"} || '' %>" <% $exclude |n%>/></div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Parents').':', Relation => 'Parents' &></div>
-    <div class="value col-9"><input type="text" class="form-control" name="<%$id%>-MemberOf" value="<% $ARGSRef->{"$id-MemberOf"} || '' %>" <% $exclude |n%>/></div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Children').':', Relation => 'Children' &></div>
-    <div class="value col-9"> <input type="text" class="form-control" name="MemberOf-<%$id%>" value="<% $ARGSRef->{"MemberOf-$id"} || '' %>" <% $exclude |n%>/></div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Refers to').':', Relation => 'RefersTo' &></div>
-    <div class="value col-9"><input type="text" class="form-control" name="<%$id%>-RefersTo" value="<% $ARGSRef->{"$id-RefersTo"} || '' %>" <% $exclude |n%>/></div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Referred to by').':', Relation => 'ReferredToBy' &></div>
-    <div class="value col-9"><input type="text" class="form-control" name="RefersTo-<%$id%>" value="<% $ARGSRef->{"RefersTo-$id"} || '' %>" <% $exclude |n%>/></div>
-  </div>
+
+
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Depends on'), Relation => 'DependsOn') &>
+  <input type="text" class="form-control" name="<%$id%>-DependsOn" value="<% $ARGSRef->{"$id-DependsOn"} || '' %>" <% $exclude |n%>/>
+</&>
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Depended on by'), Relation => 'DependedOnBy') &>
+  <input type="text" class="form-control" name="DependsOn-<%$id%>" value="<% $ARGSRef->{"DependsOn-$id"} || '' %>" <% $exclude |n%>/>
+</&>
+
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Parents'), Relation => 'Parents') &>
+  <input type="text" class="form-control" name="<%$id%>-MemberOf" value="<% $ARGSRef->{"$id-MemberOf"} || '' %>" <% $exclude |n%>/>
+</&>
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Children'), Relation => 'Children') &>
+  <input type="text" class="form-control" name="MemberOf-<%$id%>" value="<% $ARGSRef->{"MemberOf-$id"} || '' %>" <% $exclude |n%>/>
+</&>
+
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Refers to'), Relation => 'RefersTo') &>
+  <input type="text" class="form-control" name="<%$id%>-RefersTo" value="<% $ARGSRef->{"$id-RefersTo"} || '' %>" <% $exclude |n%>/>
+</&>
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Referred to by'), Relation => 'ReferredToBy') &>
+  <input type="text" class="form-control" name="RefersTo-<%$id%>" value="<% $ARGSRef->{"RefersTo-$id"} || '' %>" <% $exclude |n%>/>
+</&>
+
   <& /Elements/EditCustomFields,
         Object          => $Object,
         Grouping        => 'Links',
diff --git a/share/html/Elements/BulkLinks b/share/html/Elements/BulkLinks
index b7eb5a161d..330934239a 100644
--- a/share/html/Elements/BulkLinks
+++ b/share/html/Elements/BulkLinks
@@ -48,145 +48,80 @@
 <div class="form-row">
   <div class="col-6">
 <h3><&|/l&>Current Links</&></h3>
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Depends on</&>:
-  </div>
-  <div class="value col-9">
-    <div class="form-row">
+<&| /Elements/LabeledValue, Label => loc('Depends on') &>
 % if ( $hash{DependsOn} ) {
 % for my $link ( values %{$hash{DependsOn}} ) {
       <& EditLink, Link => $link, Mode => 'Target' &>
 % } }
-    </div>
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Depended on by</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc('Depended on by') &>
 % if ( $hash{DependedOnBy} ) {
 % for my $link ( values %{$hash{DependedOnBy}} ) {
       <& EditLink, Link => $link, Mode => 'Base' &>
 % } }
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Parents</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc('Parents') &>
 % if ( $hash{MemberOf} ) {
 % for my $link ( values %{$hash{MemberOf}} ) {
       <& EditLink, Link => $link, Mode => 'Target' &>
 % } }
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Children</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc('Children') &>
 % if ( $hash{Members} ) {
 % for my $link ( values %{$hash{Members}} ) {
       <& EditLink, Link => $link, Mode => 'Base' &>
 % } }
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Refers to</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc('Refers to') &>
 % if ( $hash{RefersTo} ) {
 % for my $link ( values %{$hash{RefersTo}} ) {
       <& EditLink, Link => $link, Mode => 'Target' &>
 % } }
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Referred to by</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc('Referred to by') &>
 % if ( $hash{ReferredToBy} ) {
 % for my $link ( values %{$hash{ReferredToBy}} ) {
       <& EditLink, Link => $link, Mode => 'Base' &>
 % } }
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="col-3"></div>
-  <div class="col-9">
-    <i><&|/l&>(Check box to delete)</&></i>
-  </div>
-</div>
-</div>
+<&| /Elements/LabeledValue, Label => '' &>
+  <i><&|/l&>(Check box to delete)</&></i>
+</&>
 
 <div class="col-6">
 <h3><&|/l&>New Links</&></h3>
 <em><&|/l&>Enter tickets or URIs to link to. Separate multiple entries with spaces.</&></em>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Depends on</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="<% $record_type %>-DependsOn" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ $record_type .'-DependsOn' } || '' %>" />
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Depends on') &>
+  <input class="form-control" type="text" name="<% $record_type %>-DependsOn" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ $record_type .'-DependsOn' } || '' %>" />
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Depended on by</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="DependsOn-<% $record_type %>" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ 'DependsOn-'. $record_type } || '' %>" />
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Depended on by') &>
+  <input class="form-control" type="text" name="DependsOn-<% $record_type %>" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ 'DependsOn-'. $record_type } || '' %>" />
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Parents</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="<% $record_type %>-MemberOf" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ $record_type .'-MemberOf'} || '' %>" />
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Parents') &>
+  <input class="form-control" type="text" name="<% $record_type %>-MemberOf" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ $record_type .'-MemberOf'} || '' %>" />
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Children</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="MemberOf-<% $record_type %>" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ 'MemberOf-'. $record_type } || '' %>" />
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Children') &>
+  <input class="form-control" type="text" name="MemberOf-<% $record_type %>" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ 'MemberOf-'. $record_type } || '' %>" />
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Refers to</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="<% $record_type %>-RefersTo" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ $record_type .'-RefersTo'} || '' %>" />
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Refers to') &>
+  <input class="form-control" type="text" name="<% $record_type %>-RefersTo" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ $record_type .'-RefersTo'} || '' %>" />
+</&>
+
+<&| /Elements/LabeledValue, Label => loc('Referred to by') &>
+  <input class="form-control" type="text" name="RefersTo-<% $record_type %>" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ 'RefersTo-'. $record_type } || '' %>" />
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Referred to by</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="RefersTo-<% $record_type %>" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ 'RefersTo-'. $record_type } || '' %>" />
-  </div>
-</div>
 </div>
 
 </div>
diff --git a/share/html/Elements/EditLinks b/share/html/Elements/EditLinks
index b50222560a..3092057725 100644
--- a/share/html/Elements/EditLinks
+++ b/share/html/Elements/EditLinks
@@ -47,12 +47,9 @@
 %# END BPS TAGGED BLOCK }}}
 <div class="row ticket-summary">
   <div class="boxcontainer col-md-<% $TwoColumn ? 6 : 12 %>">
-      <h3><&|/l&>Current Links</&></h3>
-
-<div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Depends on').':', Relation => 'DependsOn' &></div>
-    <div class="value col-9">
+    <h3><&|/l&>Current Links</&></h3>
+    <div>
+    <&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Depends on'), Relation => 'DependsOn') &>
       <div class="checkboxes list-group list-group-compact">
 % while (my $link = $Object->DependsOn->Next) {
         <div class="list-group-item">
@@ -60,11 +57,9 @@
         </div>
 % }
       </div>
-    </div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Depended on by').':', Relation => 'DependedOnBy' &></div>
-    <div class="value col-9">
+    </&>
+
+    <&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Depended on by'), Relation => 'DependedOnBy') &>
       <div class="checkboxes list-group list-group-compact">
 % while (my $link = $Object->DependedOnBy->Next) {
         <div class="list-group-item">
@@ -72,11 +67,8 @@
         </div>
 % }
       </div>
-    </div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Parents').':', Relation => 'Parents' &></div>
-    <div class="value col-9">
+    </&>
+    <&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Parents'), Relation => 'Parents') &>
       <div class="checkboxes list-group list-group-compact">
 % while (my $link = $Object->MemberOf->Next) {
         <div class="list-group-item">
@@ -84,11 +76,8 @@
         </div>
 % }
       </div>
-    </div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Children').':', Relation => 'Children' &></div>
-    <div class="value col-9">
+    </&>
+    <&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Children'), Relation => 'Children') &>
       <div class="checkboxes list-group list-group-compact">
 % while (my $link = $Object->Members->Next) {
         <div class="list-group-item">
@@ -96,11 +85,8 @@
         </div>
 % }
       </div>
-    </div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Refers to').':', Relation => 'RefersTo' &></div>
-    <div class="value col-9">
+    </&>
+    <&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Refers to'), Relation => 'RefersTo') &>
       <div class="checkboxes list-group list-group-compact">
 % while (my $link = $Object->RefersTo->Next) {
         <div class="list-group-item">
@@ -108,11 +94,8 @@
         </div>
 %}
       </div>
-    </div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Referred to by').':', Relation => 'ReferredToBy' &></div>
-    <div class="value col-9">
+    </&>
+    <&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Referred to by'), Relation => 'ReferredToBy') &>
       <div class="checkboxes list-group list-group-compact">
 % while (my $link = $Object->ReferredToBy->Next) {
         <div class="list-group-item">
@@ -120,19 +103,15 @@
         </div>
 % }
       </div>
-    </div>
-  </div>
-  <div class="form-row">
-    <span class="empty"></span>
-    <div class="value col-9"><i><&|/l&>(Check box to delete)</&></i></div>
-  </div>
-</div>
-
+    </&>
+    <&| /Elements/LabeledValue, Label => '' &>
+      <i><&|/l&>(Check box to delete)</&></i>
+    </&>
   </div>
   <div class="boxcontainer col-md-<% $TwoColumn ? 6 : 12 %>">
-<h3><&|/l&>New Links</&></h3>
-<& AddLinks, %ARGS &>
-</div>
+    <h3><&|/l&>New Links</&></h3>
+      <& AddLinks, %ARGS &>
+  </div>
 </div>
 <%ARGS>
 $Object => undef
diff --git a/share/html/Elements/EditPassword b/share/html/Elements/EditPassword
index 83135d58ed..2cc92d576c 100644
--- a/share/html/Elements/EditPassword
+++ b/share/html/Elements/EditPassword
@@ -50,33 +50,17 @@
 % } else {
 
 % if ( $cond{'RequireCurrent'} ) {
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l, $session{'CurrentUser'}->Name()&>[_1]'s current password</&>:
-    </div>
-    <div class="value col-9">
-      <input type="password" class="form-control" name="<% $Name[0] %>" size="16" autocomplete="off" />
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc( "[_1]'s current password",$session{'CurrentUser'}->Name()) &>
+    <input type="password" class="form-control" name="<% $Name[0] %>" size="16" autocomplete="off" />
+  </&>
 % }
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>New password</&>:
-    </div>
-    <div class="value col-9">
-      <input type="password" class="form-control" name="<% $Name[1] %>" size="16" autocomplete="off" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Retype Password</&>:
-    </div>
-    <div class="value col-9">
-      <input type="password" class="form-control" name="<% $Name[2] %>" size="16" autocomplete="off" />
-    </div>
-  </div>
+<&| /Elements/LabeledValue, Label => loc("New password") &>
+  <input type="password" class="form-control" name="<% $Name[1] %>" size="16" autocomplete="off" />
+</&>
+<&| /Elements/LabeledValue, Label => loc("Retype Password") &>
+  <input type="password" class="form-control" name="<% $Name[2] %>" size="16" autocomplete="off" />
+</&>
 % }
 
 <%ARGS>
diff --git a/share/html/Elements/Lifecycle/Graph b/share/html/Elements/Lifecycle/Graph
index dd88a6b1ea..3635e7242a 100644
--- a/share/html/Elements/Lifecycle/Graph
+++ b/share/html/Elements/Lifecycle/Graph
@@ -49,27 +49,17 @@
   <div id="lifeycycle-ui-edit-node" class="lifeycycle-ui-edit-node collapse card card-body">
     <input type="hidden" name="id" />
     <div class="alert alert-warning invalid-name hidden"><&|/l&>Invalid name</&></div>
-    <div class="form-row">
-      <div class="col-3 label">
-        <label for="name"><&|/l&>Name</&>:</label>
-      </div>
-      <div class="col-9 value">
-        <input class="form-control" type="text" id="name" name="name" value="" />
-      </div>
-    </div>
+    <&| /Elements/LabeledValue, Label => loc('Name') &>
+      <input class="form-control" type="text" id="name" name="name" value="" />
+    </&>
 
-    <div class="form-row">
-      <div class="col-3 label">
-        <label for="type"><&|/l&>Type</&>:</label>
-      </div>
-      <div class="col-9 value">
+    <&| /Elements/LabeledValue, Label => loc('Type') &>
         <select class="selectpicker form-control" id="type" name="type">
           <option value="initial"><&|/l&>Initial</&></option>
           <option value="active"><&|/l&>Active</&></option>
           <option value="inactive"><&|/l&>Inactive</&></option>
         </select>
-      </div>
-    </div>
+    </&>
     <div class="form-row">
       <div class="col-12 text-right">
         <button class="btn btn-light" id="CancelNode"><&|/l&>Cancel</&></button>
diff --git a/share/html/Elements/Login b/share/html/Elements/Login
index 583b1851f6..e2fe6cfdc6 100644
--- a/share/html/Elements/Login
+++ b/share/html/Elements/Login
@@ -68,23 +68,13 @@
 % unless (RT->Config->Get('WebRemoteUserAuth') and !RT->Config->Get('WebFallbackToRTLogin')) {
 <form id="login" name="login" method="post" action="<% RT->Config->Get('WebPath') %>/NoAuth/Login.html">
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Username</&>:
-    </div>
-    <div class="value col-9">
-      <input class="form-control" type="text" name="user" value="<%$user%>" id="user" autocapitalize="off" />
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc("Username") &>
+    <input class="form-control" type="text" name="user" value="<%$user%>" id="user" autocapitalize="off" />
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Password</&>:
-    </div>
-    <div class="value col-9">
-      <input class="form-control" type="password" name="pass" />
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc("Password") &>
+    <input class="form-control" type="password" name="pass" />
+  </&>
 
 <input type="hidden" name="next" value="<% $next %>" />
 
diff --git a/share/html/Elements/QuickCreate b/share/html/Elements/QuickCreate
index 00ee3bd593..00808c1e57 100644
--- a/share/html/Elements/QuickCreate
+++ b/share/html/Elements/QuickCreate
@@ -54,34 +54,25 @@
 >
 <input type="hidden" class="hidden" name="QuickCreate" value="1" />
 <div>
-  <div class="form-row input-row">
-    <div class="label col-3"><&|/l&>Subject</&>:</div>
-    <div class="value col-9"><input type="text" size="50" class="form-control" name="Subject" value="<% $args->{Subject} || '' %>" /></div>
-  </div>
-  <div class="form-row input-row">
-    <div class="label col-3"><&|/l&>Queue</&>:</div>
-    <div class="value col-9">
-      <& /Elements/SelectNewTicketQueue, Name => 'Queue', Default => $args->{Queue} &>
-    </div>
-  </div>
-  <div class="form-row input-row">
-      <div class="label col-3"><&|/l&>Owner</&>:</div>
-      <div class="value col-9">
-        <select type="select" name="Owner" class="selectpicker form-control">
+  <&| /Elements/LabeledValue, Label => loc("Subject"), Class => 'input-row' &>
+    <input type="text" size="50" class="form-control" name="Subject" value="<% $args->{Subject} || '' %>" />
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Queue"), Class => 'input-row' &>
+    <& /Elements/SelectNewTicketQueue, Name => 'Queue', Default => $args->{Queue} &>
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Owner"), Class => 'input-row' &>
+      <select type="select" name="Owner" class="selectpicker form-control">
 % my $default_owner = $args->{Owner} || $session{'CurrentUser'}->id;
-          <option value="<%$session{'CurrentUser'}->id%>" <% $default_owner == $session{'CurrentUser'}->id ? 'selected="selected"' : '' |n %>><&|/l&>Me</&></option>
-          <option value="<%RT->Nobody->id%>" <% $default_owner == RT->Nobody->id ? 'selected="selected"' : '' |n %>><%loc('Nobody')%></option>
-        </select>
-      </div>
-  </div>
-  <div class="form-row input-row">
-    <div class="label col-3"><&|/l&>Requestors</&>:</div>
-    <div class="value col-9"><& /Elements/EmailInput, Name => 'Requestors', AutocompleteType => 'Principals', Size => '40', Default => $args->{Requestors} || $session{CurrentUser}->EmailAddress, AutocompleteMultiple => 1 &></div>
-  </div>
-  <div class="form-row input-row">
-    <div class="label col-3"><&|/l&>Content</&>:</div>
-    <div class="value col-9"><textarea class="form-control" name="Content" cols="50" rows="3"><% $args->{Content} || ''%></textarea></div>
-  </div>
+        <option value="<%$session{'CurrentUser'}->id%>" <% $default_owner == $session{'CurrentUser'}->id ? 'selected="selected"' : '' |n %>><&|/l&>Me</&></option>
+        <option value="<%RT->Nobody->id%>" <% $default_owner == RT->Nobody->id ? 'selected="selected"' : '' |n %>><%loc('Nobody')%></option>
+      </select>
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Requestors"), Class => 'input-row' &>
+    <& /Elements/EmailInput, Name => 'Requestors', AutocompleteType => 'Principals', Size => '40', Default => $args->{Requestors} || $session{CurrentUser}->EmailAddress, AutocompleteMultiple => 1 &>
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Content"), Class => 'input-row' &>
+    <textarea class="form-control" name="Content" cols="50" rows="3"><% $args->{Content} || ''%></textarea>
+  </&>
 </div>
 
 <div class="form-row">
diff --git a/share/html/Elements/ShowRecord b/share/html/Elements/ShowRecord
index 2ed27c88eb..594367226c 100644
--- a/share/html/Elements/ShowRecord
+++ b/share/html/Elements/ShowRecord
@@ -79,8 +79,12 @@ for my $column (@columns) {
         $title = $fetch_columnmap->($attr,'title',[$attr]);
     }
 </%perl>
-<div class="record-field form-row <% $Class ? CSSClass("$Class-field") : "" %> <% CSSClass($fetch_columnmap->($attr,'attribute',[$attr],'no_escape')) %>">
-<div class="label col-3"><% loc($title) |n %></div>
+<&| /Elements/LabeledValue,
+    RawLabel => loc($title),
+    Class => 'record-field '.
+        ( $Class ? CSSClass("$Class-field")." " : "" ) .
+        CSSClass($fetch_columnmap->($attr,'attribute',[$attr],'no_escape'))
+     &>
 <%perl>
     my @out;
     foreach my $subcol ( @{ $column->{output} } ) {
@@ -92,9 +96,10 @@ for my $column (@columns) {
         push @out, $fetch_columnmap->($col, 'value', [$Object]);
     }
     @out = grep { defined $_ and length $_ } @out;
+    $m->out(join("", @out));
+    $m->callback(CallbackName => 'AfterValue', Object => $Object, attribute => $attr, column => $column );
+
 </%perl>
-<div class="value col-9"><span class="current-value"><% join('',@out) |n %></span></div>
-% $m->callback(CallbackName => 'AfterValue', Object => $Object, attribute => $attr, column => $column );
-</div>
+</&>
 % }
 </div>