diff --git a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less
index 9c5ec38941..e4acd76995 100644
--- a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less
+++ b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less
@@ -99,6 +99,10 @@
     text-transform: uppercase;
     transition: background-color 0.2s;
     width: 100%;
+
+    > span {
+        width: 100%;
+    }
 }
 
 .DashboardGraphs-filterDropdownText:hover {
@@ -110,6 +114,8 @@
     font-size: 12px;
     width: 20px;
     padding: 0 10px;
+    float: right;
+    margin-top: 1px;
 }
 
 .DashboardGraphs-filterDropdownItems {
diff --git a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.partial.html b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.partial.html
index 1a2281b89a..d9fac74d47 100644
--- a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.partial.html
+++ b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.partial.html
@@ -12,7 +12,10 @@
                     data-target="#"
                     href="/page.html"
                     class="DashboardGraphs-filterDropdownText">
-                        <translate>Past Month</translate> <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
+                        <span id="period-dropdown-display">
+                            <span translate>Past Month</span>
+                            <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
+                        </span>
                     </a>
                     <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
                         DashboardGraphs-filterDropdownItems--period" role="menu" aria-labelledby="period-dropdown">
@@ -34,7 +37,10 @@
 
                         <a id="type-dropdown" role="button" data-toggle="dropdown" data-target="#" class="DashboardGraphs-filterDropdownText"
                         href="/page.html">
-                            <translate>All</translate> <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
+                            <span id="type-dropdown-display">
+                                <span translate>All</span>
+                                <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
+                            </span>
                         </a>
 
                     <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
@@ -62,10 +68,10 @@
                     data-target="#"
                     href="/page.html"
                     class="DashboardGraphs-filterDropdownText">
-                        <translate>All</translate>
-                        <i class="fa fa-angle-down
-                            DashboardGraphs-filterIcon">
-                        </i>
+                        <span id="status-dropdown-display">
+                            <span translate>All</span>
+                            <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
+                        </span>
                     </a>
 
                     <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
diff --git a/awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.directive.js b/awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.directive.js
index 33fef39d80..6fd48cf8cd 100644
--- a/awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.directive.js
+++ b/awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.directive.js
@@ -126,13 +126,11 @@ function JobStatusGraph($window, adjustGraphSize, templateUrl, i18n, moment, gra
                     $('.n').off('click').on("click", function(){
                         period = this.getAttribute("id");
 
-                        $('#period-dropdown')
-                            .replaceWith(`
-                                <a id="period-dropdown" class="DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--period" role="button"
-                                   data-toggle="dropdown" data-target="#" href="/page.html">
-                                    <span>${this.text}</span>
-                                    <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
-                                </a>`);
+                        $('#period-dropdown-display')
+                            .html(`
+                                <span>${this.text}</span>
+                                <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
+                            `);
 
                         scope.$parent.isFailed = true;
                         scope.$parent.isSuccessful = true;
@@ -143,13 +141,11 @@ function JobStatusGraph($window, adjustGraphSize, templateUrl, i18n, moment, gra
                     $('.m').off('click').on("click", function(){
                         job_type = this.getAttribute("id");
 
-                        $('#type-dropdown')
-                            .replaceWith(`
-                                <a id="type-dropdown" class="DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--jobType" role="button"
-                                   data-toggle="dropdown" data-target="#" href="/page.html">
-                                    <span>${this.text}</span>
-                                    <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
-                                </a>`);
+                        $('#type-dropdown-display')
+                            .html(`
+                                <span>${this.text}</span>
+                                <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
+                            `);
 
                         scope.$parent.isFailed = true;
                         scope.$parent.isSuccessful = true;
@@ -159,13 +155,11 @@ function JobStatusGraph($window, adjustGraphSize, templateUrl, i18n, moment, gra
                     $('.o').off('click').on('click', function() {
                         var job_status = this.getAttribute('id');
 
-                        $('#status-dropdown')
-                            .replaceWith(`
-                                <a id="status-dropdown" class="DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--status" role="button"
-                                   data-toggle="dropdown" data-target="#" href="/page.html">
-                                    <span>${this.text}</span>
-                                    <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
-                                </a>`);
+                        $('#status-dropdown-display')
+                            .html(`
+                                <span>${this.text}</span>
+                                <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
+                            `);
 
                         recreateGraph(scope.period, scope.jobType, job_status);
                     });