vertical_and_disabled.diff

diff --git a/templates/CRM/Core/DateRange.tpl b/templates/CRM/Core/DateRange.tpl
index b8219b7..8be0a12 100644
--- a/templates/CRM/Core/DateRange.tpl
+++ b/templates/CRM/Core/DateRange.tpl
@@ -25,8 +25,8 @@
 *}
 {*this is included inside a table row*}
 {assign var=relativeName   value=$fieldName|cat:"_relative"}
-<td>{$form.$relativeName.html}</td>
-<td>
+<td colspan=2>
+  {$form.$relativeName.html}<br />
   <span class="crm-absolute-date-range">
     <span class="crm-absolute-date-from">
       {assign var=fromName   value=$fieldName|cat:$from}
@@ -41,15 +41,30 @@
   </span>
   {literal}
     <script type="text/javascript">
+      // Disable freeform fields when a fixed date range is chosen.
       cj("#{/literal}{$relativeName}{literal}").change(function() {
-        var n = cj(this).parent().parent();
-        if (cj(this).val() == "0") {
-          cj(".crm-absolute-date-range", n).show();
+        var $absoluteInputs = cj(".crm-absolute-date-range input", cj(this).parent());
+
+        if (cj(this).val() === "0") {
+          $absoluteInputs.prop("disabled", false);
         } else {
-          cj(".crm-absolute-date-range", n).hide();
-          cj(':text', n).val('');
+          $absoluteInputs.prop("disabled", true);
+          $absoluteInputs.val("");
         }
       }).change();
+
+      // TODO: sigh, most browsers don't allow click events on disabled inputs.
+      /*
+       * Clicking on disabled range fields switches to freeform range.
+       * $absoluteInputs.parent().click(function() {
+       *   if ($absoluteInputs.prop("disabled")) {
+       *     // Set dropdown to "Choose Date Range".
+       *     $relativeSelect.val("0");
+       *     $absoluteInputs.prop("disabled", false);
+       *     cj("input", this).focus();
+       *   }
+       * });
+       */
     </script>
   {/literal}
 </td>