advanced css calc() failback

2 files changed, 13 insertions, 10 deletions

diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 5b24ab731..9dbe92a1d 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1395,14 +1395,6 @@ div.jGrowl div.jGrowl-notification {
 	border-top: none;
 }
 
-#search-text-ac .autocomplete {
-	margin-top: 2px;
-	margin-left: $radiuspx;
-	border: 1px solid #ccc;
-	border-top: none;
-	width: calc(197px - $radiuspx * 2) !important;
-}
-
 #recip-ac .autocomplete,
 #poke-recip-ac .autocomplete,
 #id-name-ac .autocomplete,
@@ -1560,6 +1552,7 @@ header {
 }
 
 .acl-list-item {
+	width: 48%; /* fallback if browser does not support calc() */
 	width: calc(50% - 10px);
 	border: 1px solid $acl_bordercolour;
 	margin: 0px 0px 10px 10px;
@@ -2353,6 +2346,7 @@ aside .nav > li > a:hover, aside .nav > li > a:focus {
 	}
 
 	.acl-list-item {
+		width: 98%; /* fallback if browser does not support calc() */
 		width: calc(100% - 10px);
 	}
 
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 53ee45648..3db67dc87 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -1,9 +1,18 @@
 
 $(document).ready(function() {
 
-if($(window).width() < 767) {
-	$('main').css('width', $(window).width() + 231 );
+// CSS3 calc() fallback (for unsupported browsers)
+$('body').append('<div id="css3-calc" style="width: 10px; width: calc(10px + 10px); display: none;"></div>');
+if( $('#css3-calc').width() == 10) {
+	$(window).resize(function() {
+		if($(window).width() < 767) {
+			$('main').css('width', $(window).width() + 231 );
+		} else {
+			$('main').css('width', '100%' );
+		}
+	});
 }
+$('#css3-calc').remove(); // Remove the test element
 
 $('#expand-aside').click(function() {
 	$('#expand-aside-icon').toggleClass('icon-circle-arrow-right').toggleClass('icon-circle-arrow-left');