Replaced the styling in show_trait_mapping_tools.html with CSS and changed some styling to be more simple/consistent and deal better with different screen sizes

* wqflask/wqflask/marker_regression/run_mapping.py - "manhattan_plot" is now passed as lower-case "true"/"false" to match the case of other boolean options
* wqflask/wqflask/static/new/css/show_trait.css - Added classes for the styling in show_trait_mapping_tools.html
* wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js - Changed class name "selected_covariates" to "selected-covariates" to match class naming scheme
* wqflask/wqflask/static/new/javascript/show_trait.js - Changed class name "selected_covariates" to "selected-covariates" to match class naming scheme
* wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js - Changed class names from using underscore to useing "-" to match class naming scheme
* wqflask/wqflask/templates/show_trait_mapping_tools.html - Replaced styling with class names and changed some styling to be more simple/consistent

6 files changed, 187 insertions, 162 deletions

diff --git a/wqflask/wqflask/marker_regression/run_mapping.py b/wqflask/wqflask/marker_regression/run_mapping.py
index 8a44b3fd..39820c8c 100644
--- a/wqflask/wqflask/marker_regression/run_mapping.py
+++ b/wqflask/wqflask/marker_regression/run_mapping.py
@@ -140,7 +140,7 @@ class RunMapping(object):
             mapping_results_filename = self.dataset.group.name + "_" + ''.join(random.choice(string.ascii_uppercase + string.digits) for _ in range(6))
             self.mapping_results_path = "{}{}.csv".format(webqtlConfig.GENERATED_IMAGE_DIR, mapping_results_filename)
 
-        if start_vars['manhattan_plot'] == "True":
+        if start_vars['manhattan_plot'] == "true":
             self.manhattan_plot = True
         else:
             self.manhattan_plot = False
diff --git a/wqflask/wqflask/static/new/css/show_trait.css b/wqflask/wqflask/static/new/css/show_trait.css
index f9c3dcd9..2ac8ae5a 100644
--- a/wqflask/wqflask/static/new/css/show_trait.css
+++ b/wqflask/wqflask/static/new/css/show_trait.css
@@ -151,4 +151,61 @@ div.block-by-attribute-div {
 
 div.normalize-div {
   margin-top:10px;
+}
+
+div.mapping-main {
+  min-width: 1200px;
+}
+div.mapping-options {
+  min-width: 500px;
+}
+
+div.covar-options {
+  padding-top: 7px;
+}
+
+.control-label {
+  text-align: right;
+}
+
+.chr-select, .maf-select, .scale-select, .reaper-ver-select {
+  width: 80px;
+}
+
+span.covar-text {
+  font-size: 13px;
+  font-weight: 400;
+}
+
+div.select-covar-div {
+  margin-bottom: 10px;
+}
+
+.select-covar-button {
+  width: 80px;
+  padding-right: 10px;
+}
+
+.selected-covariates {
+  overflow-y: scroll;
+  resize: none;
+  width: 200px;
+}
+
+.cofactor-input {
+  width: 160px;
+  display: inline-block;
+}
+
+.no-control-radio {
+  margin-left: 10px;
+}
+
+.map-method-text {
+  margin-top: 20px;
+}
+
+.rqtl-description {
+  padding-top: 40px;
+  display: none;
 }
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js b/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js
index a8a3041d..3e414034 100644
--- a/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js
+++ b/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js
@@ -104,7 +104,7 @@ submit_click = function() {
   //covariates_display_string = covariates_display_string.substring(0, covariates_display_string.length - 2)
 
   $("input[name=covariates]").val(covariates_string)
-  $(".selected_covariates").val(covariates_display_string)
+  $(".selected-covariates").val(covariates_display_string)
 
   return $.colorbox.close();
 };
@@ -114,7 +114,7 @@ trait_click = function() {
   trait = $(this).parent().find('.trait').text();
   dataset = $(this).parent().find('.dataset').data("dataset");
   $("input[name=covariates]").val(trait + ":" + dataset)
-  $(".selected_covariates").text(trait)
+  $(".selected-covariates").text(trait)
   return $.colorbox.close();
 };
 
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index c0784073..18c9b8cf 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -107,14 +107,14 @@ d3.select("#select_covariates").on("click", (function(_this) {
 })(this));
 $("#remove_covariates").click(function () {
     $("input[name=covariates]").val("")
-    $(".selected_covariates").val("")
+    $(".selected-covariates").val("")
 });
 $(".select_covariates").click(function () {
   open_covariate_selection();
 });
 $(".remove_covariates").click(function () {
   $("input[name=covariates]").val("")
-  $(".selected_covariates").val("")
+  $(".selected-covariates").val("")
 });
 d3.select("#clear_compare_trait").on("click", (function(_this) {
   return function() {
diff --git a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js
index 4dce0705..49d72193 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js
@@ -154,7 +154,7 @@
                             'pair_scan', 'startMb', 'endMb', 'graphWidth', 'lrsMax', 'additiveCheck', 'showSNP', 'showGenes', 'viewLegend', 'haplotypeAnalystCheck', 
                             'mapmethod_rqtl_geno', 'mapmodel_rqtl_geno', 'temp_trait', 'group', 'species', 'reaper_version', 'primary_samples']
 
-  $(".rqtl_tab, #rqtl_geno_compute").on("click", (function(_this) {
+  $(".rqtl-tab, #rqtl_geno_compute").on("click", (function(_this) {
     return function() {
       if ($(this).hasClass('active') || $(this).attr('id') == "rqtl_geno_compute"){
         var form_data, url;
@@ -178,7 +178,7 @@
     };
   })(this));
   
-  $(".gemma_tab, #gemma_compute").on("click", (function(_this) {
+  $(".gemma-tab, #gemma_compute").on("click", (function(_this) {
     return function() {
       if ($(this).hasClass('active') || $(this).attr('id') == "gemma_compute"){
         var form_data, url;
@@ -199,7 +199,7 @@
     };
   })(this));
 
-  $(".reaper_tab, #interval_mapping_compute").on("click", (function(_this) {
+  $(".reaper-tab, #interval_mapping_compute").on("click", (function(_this) {
     return function() {
       if ($(this).hasClass('active') || $(this).attr('id') == "interval_mapping_compute"){
         var form_data, url;
@@ -267,11 +267,11 @@
     }
   });
 
-  $("li.mapping_tab").click(function() {
-    if ($(this).hasClass("rqtl")){
-      $(".rqtl_description").css("display", "block");
+  $("li.mapping-tab").click(function() {
+    if ($(this).hasClass("rqtl-geno-tab")){
+      $(".rqtl-description").css("display", "block");
     } else {
-      $(".rqtl_description").css("display", "none");
+      $(".rqtl-description").css("display", "none");
     }
   });
 
diff --git a/wqflask/wqflask/templates/show_trait_mapping_tools.html b/wqflask/wqflask/templates/show_trait_mapping_tools.html
index 3311095c..a9e040be 100755
--- a/wqflask/wqflask/templates/show_trait_mapping_tools.html
+++ b/wqflask/wqflask/templates/show_trait_mapping_tools.html
@@ -1,38 +1,35 @@
-<div>
+<div class="row mapping-main">
     {% if dataset.group.mapping_names|length > 0 %}
-    <div class="col-xs-3" style="min-width: 400px;">
+    <div class="col-xs-2 mapping-options">
         <div class="tabbable"> <!-- Only required for left/right tabs -->
 
             <ul class="nav nav-pills">
                 {% for mapping_method in dataset.group.mapping_names %}
                 {% if mapping_method == "GEMMA" %}
-                <li class="gemma_tab mapping_tab {% if dataset.group.mapping_id == '1' or dataset.group.mapping_id == '2' %}active{% endif %}">
+                <li class="gemma-tab mapping-tab {% if dataset.group.mapping_id == '1' or dataset.group.mapping_id == '2' %}active{% endif %}">
                     <a href="#gemma" data-toggle="tab">GEMMA</a>
                 </li>
                 {% elif mapping_method == "R/qtl" %}
-                <li class="rqtl_geno_tab mapping_tab {% if dataset.group.mapping_id == '3' %}active{% endif %}">
+                <li class="rqtl-geno-tab mapping-tab {% if dataset.group.mapping_id == '3' %}active{% endif %}">
                     <a href="#rqtl_geno" data-toggle="tab">R/qtl</a>
                 </li>
                 {% elif mapping_method == "QTLReaper" %}
-                <li class="reaper_tab mapping_tab">
+                <li class="reaper-tab mapping-tab">
                     <a href="#interval_mapping" data-toggle="tab">Haley-Knott Regression</a>
                 </li>
                 {% endif %}
                 {% endfor %}
-                <!--<li>
-                    <a href="#pair_scan" data-toggle="tab">Pair Scan</a>
-                </li>-->
             </ul>
 
             <div class="tab-content">
                 {% for mapping_method in dataset.group.mapping_names %}
                 {% if mapping_method == "GEMMA" %}
                 <div class="tab-pane {% if dataset.group.mapping_id == '1' or dataset.group.mapping_id == '2' %}active{% endif %}" id="gemma">
-                    <div style="padding-top: 20px;" class="form-horizontal">
+                    <div class="form-horizontal section-form-div">
                         <div class="mapping_method_fields form-group">
-                            <label for="chr_select" style="text-align: right;" class="col-xs-3 control-label">Chromosome</label>
-                            <div style="margin-left:20px;" class="col-xs-2 controls">
-                                <select id="chr_gemma" class="form-control" style="width: 80px;">
+                            <label for="chr_select" class="col-xs-3 control-label">Chromosome</label>
+                            <div class="col-xs-2 controls">
+                                <select id="chr_gemma" class="form-control chr-select">
                                     {% for item in chr_list %}
                                     <option value="{{ item[1] }}">{{ item[0] }}</option>
                                     {% endfor %}
@@ -41,8 +38,8 @@
                         </div>
                         {% if genofiles and genofiles|length>0 %}
                         <div class="mapping_method_fields form-group">
-                            <label for="genofiles" style="text-align: right;" class="col-xs-3 control-label">Genotypes</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
+                            <label for="genofiles" class="col-xs-3 control-label">Genotypes</label>
+                            <div class="col-xs-8 controls">
                                 <select id="genofile_gemma" class="form-control">
                                     {% for item in genofiles %}
                                     <option value="{{item['location']}}:{{item['title']}}">{{item['title']}}</option>
@@ -52,14 +49,14 @@
                         </div>
                         {% endif %}
                         <div class="mapping_method_fields form-group">
-                            <label for="maf_gemma" style="text-align: right;" class="col-xs-3 control-label">MAF >=</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
-                                <input name="maf_gemma" value="{{ maf }}" type="text" class="form-control" style="width: 80px;">
+                            <label for="maf_gemma" class="col-xs-3 control-label">MAF >=</label>
+                            <div class="col-xs-4 controls">
+                                <input name="maf_gemma" value="{{ maf }}" type="text" class="form-control maf-select">
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align: right;" class="col-xs-3 control-label">Use LOCO</label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
+                            <label class="col-xs-3 control-label">Use LOCO</label>
+                            <div class="col-xs-6 controls">
                                 <label class="radio-inline">
                                     <input type="radio" name="use_loco" value="True" checked="">
                                     Yes
@@ -71,25 +68,22 @@
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <div class="col-xs-3" style="text-align: right;">
-                            <label class="control-label">Covariates</label>
-                            <font size="2">Select covariate(s) from a collection</font>
-                            </div>
-                            <div style="margin-left:20px;" class="col-xs-7">
+                            <label class="col-xs-3 control-label">Covariates<br><span class="covar-text">Select covariate(s) from a collection</span></label>
+                            <div class="col-xs-8 covar-options">
                               {% if g.user_session.num_collections < 1 %}
                               No collections available. Please add traits to a collection to use them as covariates.
                               {% else %}
-                              <div style="margin-bottom: 10px;">
-                                <button type="button" id="select_covariates" class="btn btn-default" style="width: 80px; padding-right: 10px;">Select</button>
-                                <button type="button" id="remove_covariates" class="btn btn-default" style="width: 80px;">Remove</button>
+                              <div class="select-covar-div">
+                                <button type="button" id="select_covariates" class="btn btn-default select-covar-button">Select</button>
+                                <button type="button" id="remove_covariates" class="btn btn-default select-covar-button">Remove</button>
                               </div>
-                              <textarea rows="3" cols="50" readonly placeholder="No covariates selected" style="overflow-y: scroll; resize: none; width: 200px;" class="selected_covariates"></textarea>
+                              <textarea rows="3" cols="50" readonly placeholder="No covariates selected" class="selected-covariates"></textarea>
                               {% endif %}
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
                           <label class="col-xs-3 control-label"></label>
-                          <div style="margin-left:20px;" class="col-xs-6">
+                          <div class="col-xs-6">
                             <button id="gemma_compute" class="btn submit_special btn-success" data-url="/marker_regression" title="Compute Marker Regression" value="Compute">Compute</button>
                           </div>
                         </div>
@@ -97,20 +91,20 @@
                 </div>
                 {% elif mapping_method == "QTLReaper" %}
                 <div class="tab-pane" id="interval_mapping">
-                    <div style="margin-top: 20px" class="form-horizontal">
+                    <div class="form-horizontal section-form-div">
                         <div class="mapping_method_fields form-group">
-                            <label for="reaper_version" style="text-align: right;" class="col-xs-3 control-label">Version<sup><a href="https://github.com/chfi/rust-qtlreaper" target="_blank" title="'New' is the new qtlreaper implementation written in RUST by Christian Fischer. 'Original' corresponds to the original version written in C.">?</a></sup></label>
-                            <div style="margin-left:20px;" class="col-xs-3 controls">
-                                <select name="reaper_version" class="form-control" style="width: 80px;">
+                            <label for="reaper_version" class="col-xs-3 control-label">Version<sup><a href="https://github.com/chfi/rust-qtlreaper" target="_blank" title="'New' is the new qtlreaper implementation written in RUST by Christian Fischer. 'Original' corresponds to the original version written in C.">?</a></sup></label>
+                            <div class="col-xs-3 controls">
+                                <select name="reaper_version" class="form-control reaper-ver-select">
                                     <option value="new">New</option>
                                     <option value="original">Original</option>
                                 </select>
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <label for="chr_select" style="text-align: right;" class="col-xs-3 control-label">Chromosome</label>
-                            <div style="margin-left:20px;" class="col-xs-2 controls">
-                                    <select id="chr_reaper" class="form-control" style="width: 80px;">
+                            <label for="chr_select" class="col-xs-3 control-label">Chromosome</label>
+                            <div class="col-xs-2 controls">
+                                    <select id="chr_reaper" class="form-control chr-select">
                                     {% for item in chr_list %}
                                     <option value="{{ item[1] }}">{{ item[0] }}</option>
                                     {% endfor %}
@@ -119,9 +113,9 @@
                         </div>
                         {% if genofiles and genofiles|length>0 %}
                         <div class="mapping_method_fields form-group">
-                            <label for="scale_select" style="text-align: right;" class="col-xs-3 control-label">Map Scale</label>
-                            <div style="margin-left:20px;" class="col-xs-2 controls">
-                                <select id="scale_reaper" class="form-control" style="width: 80px;">
+                            <label for="scale_select" class="col-xs-3 control-label">Map Scale</label>
+                            <div class="col-xs-2 controls">
+                                <select id="scale_reaper" class="form-control scale-select">
                                     {% for item in scales_in_geno[genofiles[0]['location']] %}
                                     <option value="{{ item[0] }}">{{ item[1] }}</option>
                                     {% endfor %}
@@ -129,8 +123,8 @@
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align: right;" for="genofiles" class="col-xs-3 control-label">Genotypes</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
+                            <label for="genofiles" class="col-xs-3 control-label">Genotypes</label>
+                            <div class="col-xs-4 controls">
                                 <select id="genofile_reaper" class="form-control">
                                     {% for item in genofiles %}
                                     <option value="{{item['location']}}:{{item['title']}}">{{item['title']}}</option>
@@ -140,9 +134,9 @@
                         </div>
                         {% else %}
                         <div class="mapping_method_fields form-group">
-                            <label for="scale_select" style="text-align: right;" class="col-xs-3 control-label">Map Scale</label>
-                            <div style="margin-left:20px;" class="col-xs-2 controls">
-                                <select id="scale_reaper" class="form-control" style="width: 80px;">
+                            <label for="scale_select" class="col-xs-3 control-label">Map Scale</label>
+                            <div class="col-xs-2 controls">
+                                <select id="scale_reaper" class="form-control scale-select">
                                     {% for item in scales_in_geno[dataset.group.name + ".geno"] %}
                                     <option value="{{ item[0] }}">{{ item[1] }}</option>
                                     {% endfor %}
@@ -151,69 +145,48 @@
                         </div>
                         {% endif %}
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align: right;" for="mapping_permutations" class="col-xs-3 control-label">Permutations</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
+                            <label for="mapping_permutations" class="col-xs-3 control-label">Permutations</label>
+                            <div class="col-xs-4 controls">
                                 <input name="num_perm_reaper" value="2000" type="text" class="form-control">
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align: right;" for="mapping_bootstraps" class="col-xs-3 control-label">Bootstraps</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
-                                <input name="num_bootstrap" value="2000" type="text" class="form-control">
-                            </div>
-                        </div>
-                        <div class="mapping_method_fields form-group">
-                            <label style="text-align: right;" for="control_for" class="col-xs-3 control-label">Control&nbsp;for<br>Cofactors</label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
-                                {% if dataset.type == 'ProbeSet' and this_trait.locus_chr != "" %}
-                                <input name="control_reaper" value="{{ nearest_marker }}" type="text" style="width: 160px; display: inline-block;" class="form-control" />
-                                {% else %}
-                                <input name="control_reaper" value="" type="text" style="display: inline-block; padding-right: 10px;" class="form-control" />
-                                {% endif %}
-                                <input type="radio" name="do_control_reaper" value="true"> Yes&nbsp;&nbsp;<input type="radio" name="do_control_reaper" value="false" checked="" style="margin-left: 10px;"> No</span>
-                            </div>
-                        </div>
-
-<!--
-                        <div class="mapping_method_fields form-group">
-                            <label for="mapping_bootstraps" class="col-xs-3 control-label" title="Bootstrapping Resamples">Bootstrap Test (n=2000)</label>
+                            <label for="mapping_bootstraps" class="col-xs-3 control-label">Bootstraps</label>
                             <div class="col-xs-4 controls">
-                                <label>
-                                    <input type="checkbox" name="bootCheck" id="bootCheck"> Bootstrap Test (n=2000)
-                                </label>
+                                <input name="num_bootstrap" value="2000" type="text" class="form-control">
                             </div>
                         </div>
-
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:left;" class="col-xs-12 control-label">Display Additive Effect</label>
-                            <div class="col-xs-12 controls" id="display_additive_effect">
+                            <label for="control_for" class="col-xs-3 control-label">Control&nbsp;for<br>Cofactors</label>
+                            <div class="col-xs-6 controls">
+                                <input name="control_reaper" value="{% if dataset.type == 'ProbeSet' and this_trait.locus_chr != '' %}{{ nearest_marker }}{% endif %}" type="text" class="form-control cofactor-input" />
+                                <br>
                                 <label class="radio-inline">
-                                    <input type="radio" name="display_additive" id="display_additive" value="yes" checked="">
-                                    Yes
+                                  <input type="radio" name="do_control_reaper" value="true" checked="">
+                                  Yes
                                 </label>
                                 <label class="radio-inline">
-                                    <input type="radio" name="display_additive" id="display_additive" value="no">
-                                    No
+                                  <input type="radio" name="do_control_reaper" value="false">
+                                  No
                                 </label>
                             </div>
                         </div>
--->
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align: right;" class="col-xs-3 control-label">Interval Map</label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
+                            <label class="col-xs-3 control-label">Interval Map</label>
+                            <div class="col-xs-6 controls">
                                 <label class="radio-inline">
-                                    <input type="radio" name="manhattan_plot_reaper" value="False" checked="">
+                                    <input type="radio" name="manhattan_plot_reaper" value="true" checked="">
                                     Yes
                                 </label>
                                 <label class="radio-inline">
-                                    <input type="radio" name="manhattan_plot_reaper" value="True">
+                                    <input type="radio" name="manhattan_plot_reaper" value="false">
                                     No
                                </label>
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
                             <label class="col-xs-3 control-label"></label>
-                            <div style="margin-left:20px;" class="col-xs-6">
+                            <div class="col-xs-6">
                               <button id="interval_mapping_compute" class="btn submit_special btn-success" data-url="/marker_regression" title="Compute Interval Mapping" value="Compute">Compute</button>
                             </div>
                         </div>
@@ -221,11 +194,11 @@
                 </div>
                 {% elif mapping_method == "R/qtl" %}
                 <div class="tab-pane {% if dataset.group.mapping_id == '3' %}active{% endif %}" id="rqtl_geno">
-                    <div style="margin-top: 20px" class="form-horizontal">
+                    <div class="form-horizontal section-form-div">
                         <div class="mapping_method_fields form-group">
-                            <label for="chr_select" style="text-align: right;" class="col-xs-3 control-label">Chromosome</label>
-                            <div style="margin-left:20px;" class="col-xs-2 controls">
-                                    <select id="chr_rqtl_geno" class="form-control" style="width: 80px;">
+                            <label for="chr_select" class="col-xs-3 control-label">Chromosome</label>
+                            <div class="col-xs-2 controls">
+                                    <select id="chr_rqtl_geno" class="form-control chr-select">
                                     {% for item in chr_list %}
                                     <option value="{{ item[1] }}">{{ item[0] }}</option>
                                     {% endfor %}
@@ -234,9 +207,9 @@
                         </div>
                         {% if genofiles and genofiles|length > 0 %}
                         <div class="mapping_method_fields form-group">
-                            <label for="scale_select" style="text-align: right;" class="col-xs-3 control-label">Map Scale</label>
-                            <div style="margin-left:20px;" class="col-xs-2 controls">
-                                <select id="scale_rqtl_geno" class="form-control" style="width: 80px;">
+                            <label for="scale_select" class="col-xs-3 control-label">Map Scale</label>
+                            <div class="col-xs-2 controls">
+                                <select id="scale_rqtl_geno" class="form-control scale-select">
                                     {% for item in scales_in_geno[genofiles[0]['location']] %}
                                     <option value="{{ item[0] }}">{{ item[1] }}</option>
                                     {% endfor %}
@@ -244,8 +217,8 @@
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:right;" for="genofiles" class="col-xs-3 control-label">Genotypes</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
+                            <label for="genofiles" class="col-xs-3 control-label">Genotypes</label>
+                            <div class="col-xs-4 controls">
                                 <select id="genofile_rqtl_geno" class="form-control">
                                     {% for item in genofiles %}
                                     <option value="{{item['location']}}:{{item['title']}}">{{item['title']}}</option>
@@ -255,15 +228,15 @@
                         </div>
                         {% endif %}
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:right;" for="mapping_permutations" class="col-xs-3 control-label">Permutations</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
+                            <label for="mapping_permutations" class="col-xs-3 control-label">Permutations</label>
+                            <div class="col-xs-4 controls">
                                 <input name="num_perm_rqtl_geno" value="200" type="text" class="form-control">
                             </div>
                         </div>
                         {% if sample_groups[0].attributes|length > 0 %}
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:right;" class="col-xs-3 control-label">Stratified</label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
+                            <label class="col-xs-3 control-label">Stratified</label>
+                            <div class="col-xs-6 controls">
                                 <label class="radio-inline">
                                     <input type="radio" name="perm_strata" value="True" checked=""> 
                                     Yes
@@ -276,27 +249,23 @@
                         </div>
                         {% endif %}
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:right;" for="control_for" class="col-xs-3 control-label">Control&nbsp;for</label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
-                                {% if dataset.type == 'ProbeSet' and this_trait.locus_chr != "" %}
-                                <input name="control_rqtl_geno" value="{{ nearest_marker }}" type="text" style="width: 160px;" class="form-control" />
-                                {% else %}
-                                <input name="control_rqtl_geno" value="" type="text" class="form-control" />
-                                {% endif %}
-                                <label class="radio-inline">
-                                    <input type="radio" name="do_control_rqtl" value="true">
-                                    Yes
-                                </label>
-                                <label class="radio-inline">
-                                    <input type="radio" name="do_control_rqtl" value="false" checked="">
-                                    No
-                                </label>
+                            <label for="control_for" class="col-xs-3 control-label">Control&nbsp;for</label>
+                            <div class="col-xs-6 controls">
+                              <input name="control_rqtl_geno" value="{% if dataset.type == 'ProbeSet' and this_trait.locus_chr != '' %}{{ nearest_marker }}{% endif %}" type="text" class="form-control cofactor-input" />
+                              <label class="radio-inline">
+                                  <input type="radio" name="do_control_rqtl" value="true">
+                                  Yes
+                              </label>
+                              <label class="radio-inline">
+                                  <input type="radio" name="do_control_rqtl" value="false" checked="">
+                                  No
+                              </label>
                             </div>
                         </div>
 
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:right;" for="mapmodel_rqtl_geno" class="col-xs-3 control-label">Model</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
+                            <label for="mapmodel_rqtl_geno" class="col-xs-3 control-label">Model</label>
+                            <div class="col-xs-4 controls">
                               <select id="mapmodel_rqtl_geno" name="mapmodel_rqtl_geno" class="form-control">
                                 <option value="normal">Normal</option>
                                 {% if binary == "true" %}<option value="binary">Binary</option>{% endif %}
@@ -307,8 +276,8 @@
                         </div>
 
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:right;" for="mapmethod_rqtl_geno" class="col-xs-3 control-label">Method</label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
+                            <label for="mapmethod_rqtl_geno" class="col-xs-3 control-label">Method</label>
+                            <div class="col-xs-6 controls">
                               <select id="mapmethod_rqtl_geno" name="mapmethod_rqtl_geno" class="form-control">
                                 <option value="hk" selected>Haley-Knott</option>
                                 <option value="ehk">Extended Haley-Knott</option>
@@ -319,8 +288,8 @@
                             </div>
                         </div>
                         <div id="missing_geno_div" class="mapping_method_fields form-group" style="display: none;">
-                            <label style="text-align:right;" for="missing_genotypes" class="col-xs-3 control-label"></label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
+                            <label for="missing_genotypes" class="col-xs-3 control-label"></label>
+                            <div class="col-xs-6 controls">
                               <select id="missing_genotype" name="missing_genotypes" class="form-control">
                                 <option value="mr">Remove Samples w/o Genotypes</option>
                                 <option value="mr-imp">Single Imputation</option>
@@ -329,8 +298,8 @@
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:right;" class="col-xs-3 control-label">Manhattan<br>Plot</label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
+                            <label class="col-xs-3 control-label">Manhattan<br>Plot</label>
+                            <div class="col-xs-6 controls">
                                 <label class="radio-inline">
                                     <input type="radio" name="manhattan_plot_rqtl" value="True">
                                     Yes
@@ -342,25 +311,22 @@
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <div class="col-xs-3" style="text-align: right;">
-                            <label class="control-label">Covariates</label>
-                            <font size="2">Select covariate(s) from a collection</font>
-                            </div>
-                            <div style="margin-left:20px;" class="col-xs-7">
-                              {% if g.user_session.num_collections < 1 %}
-                              No collections available. Please add traits to a collection to use them as covariates.
-                              {% else %}
-                              <div style="margin-bottom: 10px;">
-                                <button type="button" class="btn btn-default select_covariates" style="width: 80px; padding-right: 10px;">Select</button>
-                                <button type="button" class="btn btn-default remove_covariates" style="width: 80px;">Remove</button>
-                              </div>
-                              <textarea rows="3" cols="50" readonly placeholder="No covariates selected" style="overflow-y: scroll; resize: none; width: 200px;" class="selected_covariates"></textarea>
-                              {% endif %}
+                          <label class="col-xs-3 control-label">Covariates<br><span class="covar-text">Select covariate(s) from a collection</span></label>
+                          <div class="col-xs-8 covar-options">
+                            {% if g.user_session.num_collections < 1 %}
+                            No collections available. Please add traits to a collection to use them as covariates.
+                            {% else %}
+                            <div class="select-covar-div">
+                              <button type="button" id="select_covariates" class="btn btn-default select-covar-button">Select</button>
+                              <button type="button" id="remove_covariates" class="btn btn-default select-covar-button">Remove</button>
                             </div>
+                            <textarea rows="3" cols="50" readonly placeholder="No covariates selected" class="selected-covariates"></textarea>
+                            {% endif %}
+                          </div>
                         </div>
                         <div class="mapping_method_fields form-group">
                             <label class="col-xs-3 control-label"></label>
-                            <div style="margin-left:20px;" class="col-xs-6">
+                            <div class="col-xs-6 controls">
                               <button id="rqtl_geno_compute" class="btn submit_special btn-success" data-url="/marker_regression" title="Compute Marker Regression" value="Compute">Compute</button>
                             </div>
                         </div>
@@ -371,23 +337,25 @@
             </div>
         </div>
     </div>
-    <div>
-        <dl>
-             {% for mapping_method in dataset.group.mapping_names %}
-             {% if mapping_method == "GEMMA" %}
-             <dt style="padding-top: 20px;">GEMMA</dt>
-             <dd>Maps traits with correction for kinship among samples using a linear mixed model method, and also allows users to fit multiple covariates such as sex, age, treatment, and genetic markers (<a href="https://www.ncbi.nlm.nih.gov/pubmed/24531419">PMID: 2453419</a>, and <a href="https://github.com/genetics-statistics/GEMMA"> GitHub code</a>). GEMMA incorporates the Leave One Chromosome Out (LOCO) method to ensure that the correction for kinship does not remove useful genetic variance near each marker. Markers can be filtered to include only those with minor allele frequencies (MAF) above a threshold. The default MAF is 0.05.</dd>
-             {% elif mapping_method == "R/qtl" %}
-             <dt style="margin-top: 20px;">R/qtl (version 1.44.9</dt>
-             <dd>The original R/qtl mapping package that supports classic experimental crosses including 4-parent F2 intercrosses (e.g., NIA ITP UM-HET3). R/qtl is ideal for populations that do not have complex kinship or admixture (<a href="https://www.ncbi.nlm.nih.gov/pubmed/12724300">PMID: 12724300</a>). Both R/qtl as implemented here, and R/qtl2 (<a href="https://www.ncbi.nlm.nih.gov/pubmed/30591514">PMID: 30591514</a>) are available as <a href="https://kbroman.org/pages/software.html">R suites</a>.</dd>
-             {% elif mapping_method == "QTLReaper" %}
-             <dt style="margin-top: 20px;">Haley-Knott Regression</dt>
-             <dd>Fast linear mapping method (<a href="https://www.ncbi.nlm.nih.gov/pubmed/16718932">PMID 16718932</a>) works well with F2 intercrosses and backcrosses, but that is not recommended for complex or admixed populations (e.g., GWAS or heterogeneous stock studies) or for advanced intercrosses, recombinant inbred families, or diallel crosses. Interactive plots in GeneNetwork have relied on the fast HK mapping for two decades and we still use this method for mapping omics data sets and computing genome-wide permutation threshold (<a href="https://github.com/pjotrp/QTLReaper">QTL Reaper code</a>).</dd>
-             {% endif %}
-             {% endfor %}
-        </dl>
-        <div class="rqtl_description" style="padding-top: 40px; display: none;">
-        More information on R/qtl mapping models and methods can be found <a href="http://www.rqtl.org/tutorials/rqtltour.pdf">here</a>.
+    <div class="col-xs-6">
+        <div class="section-form-div">
+            <dl>
+                {% for mapping_method in dataset.group.mapping_names %}
+                {% if mapping_method == "GEMMA" %}
+                <dt>GEMMA</dt>
+                <dd>Maps traits with correction for kinship among samples using a linear mixed model method, and also allows users to fit multiple covariates such as sex, age, treatment, and genetic markers (<a href="https://www.ncbi.nlm.nih.gov/pubmed/24531419">PMID: 2453419</a>, and <a href="https://github.com/genetics-statistics/GEMMA"> GitHub code</a>). GEMMA incorporates the Leave One Chromosome Out (LOCO) method to ensure that the correction for kinship does not remove useful genetic variance near each marker. Markers can be filtered to include only those with minor allele frequencies (MAF) above a threshold. The default MAF is 0.05.</dd>
+                {% elif mapping_method == "R/qtl" %}
+                <dt class="map-method-text">R/qtl (version 1.44.9</dt>
+                <dd>The original R/qtl mapping package that supports classic experimental crosses including 4-parent F2 intercrosses (e.g., NIA ITP UM-HET3). R/qtl is ideal for populations that do not have complex kinship or admixture (<a href="https://www.ncbi.nlm.nih.gov/pubmed/12724300">PMID: 12724300</a>). Both R/qtl as implemented here, and R/qtl2 (<a href="https://www.ncbi.nlm.nih.gov/pubmed/30591514">PMID: 30591514</a>) are available as <a href="https://kbroman.org/pages/software.html">R suites</a>.</dd>
+                {% elif mapping_method == "QTLReaper" %}
+                <dt class="map-method-text">Haley-Knott Regression</dt>
+                <dd>Fast linear mapping method (<a href="https://www.ncbi.nlm.nih.gov/pubmed/16718932">PMID 16718932</a>) works well with F2 intercrosses and backcrosses, but that is not recommended for complex or admixed populations (e.g., GWAS or heterogeneous stock studies) or for advanced intercrosses, recombinant inbred families, or diallel crosses. Interactive plots in GeneNetwork have relied on the fast HK mapping for two decades and we still use this method for mapping omics data sets and computing genome-wide permutation threshold (<a href="https://github.com/pjotrp/QTLReaper">QTL Reaper code</a>).</dd>
+                {% endif %}
+                {% endfor %}
+            </dl>
+            <div class="rqtl-description">
+            More information on R/qtl mapping models and methods can be found <a href="http://www.rqtl.org/tutorials/rqtltour.pdf">here</a>.
+            </div>
         </div>
     </div>
     <div id="mapping_result_holder_wrapper" style="display:none;">