diff --git a/views/includes/scripts/commentReplyScript.html b/views/includes/scripts/commentReplyScript.html
index 6a17ccaa6..d45fe7e63 100644
--- a/views/includes/scripts/commentReplyScript.html
+++ b/views/includes/scripts/commentReplyScript.html
@@ -1,4 +1,17 @@
<script type="text/javascript">
+ // Show spacer div
+ $('#reply-control').on('shown.bs.collapse', function () {
+ $('#show-reply-form-when-visible').css({
+ height: '200px'
+ });
+ });
+
+ // Hide spacer div
+ $('#reply-control').on('hidden.bs.collapse', function () {
+ $('#show-reply-form-when-visible').css({
+ height: '0'
+ });
+ });
$('.btn-comment-reply').click(function (aE) {
$('#reply-control').collapse('show');
@@ -20,7 +33,7 @@
});
function isElementInViewport(aEl) {
- //special bonus for those using jQuery
+ // special bonus for those using jQuery
if (aEl instanceof jQuery) {
aEl = aEl[0];
}
@@ -53,7 +66,7 @@
var handler = fireIfElementVisible ($('#show-reply-form-when-visible'), callback);
- //jQuery
+ // jQuery
$(window).on('DOMContentLoaded load resize scroll', handler);
</script>
diff --git a/views/pages/discussionPage.html b/views/pages/discussionPage.html
index 68c9221ea..8a9f79348 100644
--- a/views/pages/discussionPage.html
+++ b/views/pages/discussionPage.html
@@ -5,7 +5,13 @@
{{> includes/head.html }}
<link rel="stylesheet" type="text/css" media="all" href="/redist/npm/bootstrap-markdown/css/bootstrap-markdown.min.css">
<style>
- #show-reply-form-when-visible { height: 200px; }
+ #show-reply-form-when-visible {
+ -moz-transition: height 1s ease;
+ -ms-transition: height 1s ease;
+ -o-transition: height 1s ease;
+ -webkit-transition: height 1s ease;
+ transition: height 1s ease;
+ }
</style>
</head>
<body>
diff --git a/views/pages/scriptIssuePage.html b/views/pages/scriptIssuePage.html
index 67463026b..ffb64e90b 100644
--- a/views/pages/scriptIssuePage.html
+++ b/views/pages/scriptIssuePage.html
@@ -6,7 +6,13 @@
<link rel="stylesheet" type="text/css" media="all" href="/redist/npm/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet" type="text/css" media="all" href="/css/scriptPage.css">
<style>
- #show-reply-form-when-visible { height: 200px; }
+ #show-reply-form-when-visible {
+ -moz-transition: height 1s ease;
+ -ms-transition: height 1s ease;
+ -o-transition: height 1s ease;
+ -webkit-transition: height 1s ease;
+ transition: height 1s ease;
+ }
</style>
</head>
<body>