I'm developing a site for the corporation i work at and this time i chose to develop it with Materialize CSS as the UI framework. It looks really nice and i like its functions, though i have one major problem.
A periodic error!
Which means, that when i load the site sometimes i get a js error. For example i have a dropdown named selectDatabase (That is the object i defined).
If i reload the page a couple of times, this does not happen! The dropdown is initialized as it should be. Do you have an idea of what could possibly be wrong here?
Project Details:
Framework: Asp.net Core 2.0 MVC
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320" />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="~/lib/materialize/materialize.css" media="screen,projection" />
<link rel="stylesheet" href="~/lib/corporationtheme/css/main.css" type="text/css" media="all" />
<link rel="stylesheet" href="~/lib/corporationtheme/css/style_guide.css" type="text/css" media="all" />
<link rel="stylesheet" href="~/lib/corporationtheme/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="~/css/font-awesome-animation.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="~/css/bundle.css" type="text/css" media="all" />
<title>AutoTest Validation</title>
</head>
<body>
<div class="visible-print print-logo"><i class="icon-logo"></i></div>
<div class="content-wrapper">
<div class="mega-menu">
<div class="container nav-top">
<div class="row">
<div class="col s12">
<a class="logo" href="/">
<i class="icon-logo"></i>
</a>
<span class="logo-text">
<i class="icon-logo-text"></i>
<i class="icon-logo-text-oneline"></i>
</span>
<a href="#" class="mobile-btn menu-btn">
<i class="icon-mobile-menu"></i>
</a>
<div class="logo-title">
<div class="userDropdownWrapper">
<a class="dropdown-trigger" id="userDropdown" href="#!" data-target="dropdown">
<img id="userpicture" src="~/images/profile.svg" class="avatar">
<span id="userfirstname"></span>
<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
</a>
</div>
<ul id="dropdown" class="dropdown-content">
<li><a><i class="material-icons dropdown-icon">border_color</i>Edit Profile</a></li>
<li><a><i class="material-icons dropdown-icon">vpn_key</i>Sign Out</a></li>
<li class="divider"></li>
</ul>
<div id="databaseSelectInputField" class="input-field">
<select id="databaseSelect">
<option value="1" selected>AutoTest</option>
<option value="2">AutoTest2</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="main-nav">
<div class="container">
<div class="row">
<div class="col s12">
<ul>
<li>DashBoard</li>
</ul>
</div>
</div>
</div>
</div>
<div class="sub-nav">
<div class="container">
<div class="row">
<div class="col s12">
</div>
</div>
<div class="row">
<div class="col s12 sub-nav-items">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="container maincontainer" id="followMe">
#RenderBody()
</div>
</div>
<div class="footer-links">
<ul>
<li>corporation.com</li>
<li>Portal</li>
</ul>
</div>
</div>
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/lib/corporationtheme/js/app/main.js';
document.body.appendChild(script);
</script>
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/lib/materialize/materialize.js"></script>
<script type="text/javascript" src="~/js/errorHandler/bundle.js"></script>
<script type="text/javascript" src="~/js/shared/layout/bundle.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
JS Code:
let selectDatabase = null;
let selectUser = null;
let dropdownUser = null;
let currentUser = {};
$(document).ready(function () {
selectDatabase = $('#databaseSelect');
selectUser = $('#userSelect');
dropdownUser = $("#userDropdown");
getUserProfile();
selectDatabase.formSelect();
selectUser.formSelect();
dropdownUser.dropdown();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
It is hard to answer this question without being able to test a few things, but I'll try anyway :)
It looks like sometimes Materialize js does not load properly, or (what I think is the most probable) it loads after you use your function.
So the solution is this
Make sure that you use your code after the Materialize js is loaded. You can do it on couple of ways. The easiest would be to add defer attribute to script tag in html which loads js in the order of tags in html.
Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js" defer></script>
<script src="your_js.js" defer></script>
Okay. So it looks like i did find the problem.
Main.Js was interfering with Materalize and caused the error. I found a more simple main.js for our theme. Now the errors are gone and the website works like a charm. Thank you for your help guys.
Related
I am using EJS to render HTML. But the same HTML thing gets loaded for one route and when tried with another route chrome shows the status of CSS files as cancelled and js files with status code 404. I am unable to get what is going wrong. It works for the '/' route but does not work for the '/admin/students' route. Please help. In the table, I am printing the data sent through route.
In '/' route I am just sending a text as a data and everything else is the same as giving the code below.
app.get('/',(req,res)=>{
res.render('layout',{data:"IT is working"});
});
app.get('/admin/students',(req,res)=>{
Student.find({},function(err,result){
if(err)
console.log(err);
else
res.render('student',{st:result});
})
})
<!DOCTYPE HTML>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Favicon -->
<link rel="shortcut icon" href="img/fav.png" />
<!-- Author Meta -->
<meta name="author" content="colorlib" />
<!-- Meta Description -->
<meta name="description" content="" />
<!-- Meta Keyword -->
<meta name="keywords" content="" />
<!-- meta character set -->
<meta charset="UTF-8" />
<!-- Site Title -->
<title>Blog Home</title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto:400,400i,500,700"
rel="stylesheet" />
<!--
CSS
=============================================
-->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<!-- ================ Start Header Area ================= -->
<header class="default-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img/logo.png" alt="" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="lnr lnr-menu"></span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-items-center"
id="navbarSupportedContent">
<ul class="navbar-nav">
<li>Home</li>
<li>Admin</li>
<li>User</li>
</ul>
</div>
</div>
</nav>
</header>
<section class="banner-area" style="background: url('img/home.png')" >
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-12 banner-right">
<h1 class="text-white">
Blog Home
</h1>
<p class="mx-auto text-white mt-20 mb-40">
In the history of modern astronomy, there is probably no one greater leap forward than the
building.
</p>
<div class="link-nav">
<span class="box">
Home
<i class="lnr lnr-arrow-right"></i>
Blog Home
</span>
</div>
</div>
</div>
</div>
</section>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Reg.No.</th>
<th scope="col">Name</th>
<th scope="col">Branch</th>
<th scope="col">Handle</th>
</tr>
</thead>
<body>
<% st.map(rec=>{ %>
<tr style="color:black">
<th scope="row"><%=rec._id%></th>
<td><%=rec.sname%></td>
<td><%=rec.branch%></td>
<td><form action="/students/<%=rec._id%>/edit}"></form></td>
</tr>
<% }) %>
</tbody>
</table>
<footer class="footer-area section-gap">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved |
This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</footer>
<!-- ================ End footer Area ================= -->
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/hexagons.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You should use absolute paths of static files instead of relative ones. Example:
<script src="js/main.js"></script>
should be:
<script src="/js/main.js"></script>
Similarly, you should fix the paths for all static files (css, js, etc.) in your EJS files.
You can read more about absolute and relative paths here.
I can not get the values from an HTML page using document.getElementById ("ID"),is returning Null, in all the rest of the code everything works perfectly
Something so simple is driving me crazy, because in other parts of the code identically everything works perfectly
HTML:
<div id="childTemplateNotice" class="col-md-12">
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
JavaScript:
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
HTML INDEX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="notice.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/coments/coments.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/header/header.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/footer/footer.css" media="screen" />
<!-- Bootstrap e Jquery -->
<link rel="stylesheet" type="text/css" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" media="screen" />
</head>
<body>
<div class="col-md-12">
<?php include "../../components/header/header.html"; ?>
<div id="noticeFather"class=" col-md-12">
<div class="ads col-md-12 top">
</div>
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
</div>
<div class="row">
<div class="right col-md-3"></div>
<div class="midle col-md-6">
<p class="body"></p>
<span class="linkTitle"></span>
<a class="linkUrl"></a>
<!-- Coments -->
<div class="comentsDiv col-md-12">
</div>
</div>
<div class="left col-md-3"></div>
</div>
</div>
</div>
<div class="col-md-12">
<?php include "../../components/coments/coments.html" ?>
</div>
<?php include "../../components/footer/footer.html"; ?>
</div>
<!-- Scripts js -->
<script type="text/javascript" src="../../node_modules/moment/min/moment.min.js"></script>
<script type="text/javascript" src="../../node_modules/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../components/header/header.js"> </script>
<script type="text/javascript" src="../../service/esmiucado-service.js"></script>
<script type="text/javascript" src="../../repositorio/repositorio.js"> </script>
<!-- Requisição DataBase -->
<script>
postNotice()
getComents(noticeCod)
</script>
</body>
</html>
I already try:
$(document).ready(function() {
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
});
and:
window.onload = function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
and they did not work
OBS: the files javascript and html are in different directories
UPDATE:
When I call the function of another page everything works fine, so the problem is when I call this specific page, but I have not yet identified which problem
in document.ready function either remove the function inside it or call the function. First one is also working fine you just have to call the function. window.onload is working perfectly
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
postNotice();
$(document).ready(function() {
console.log(document.getElementById('childTemplateNotice'))
});
window.onload = function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="childTemplateNotice" class="col-md-12">
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
The problem was happening simply because I was not calling the html element on the main page.
have a problem and I hope somebody helps me.
Have website 3gtrans.sk in bootstrap. It works fine but mobile navigation doesn't work on 2 pages
https://www.3gtrans.sk/nase-trasy
https://www.3gtrans.sk/galeria
As you can see on that pages are some photos (prettyPhoto). Can anybody show me what is bad please? Thank you so much.
i.e. galeria.php
<?php include "xxx.php"; ?>
<!DOCTYPE html>
<html lang="sk">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Galéria | 3G Trans Slovakia" />
<meta name="author" content="RoyalWEB.sk" />
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css?<?php echo date('h:i:s'); ?>">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato%7CRaleway">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet"/>
<script src="assets/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<title>Galéria | 3G Trans Slovakia</title>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
show_title: false,
social_tools: false
});
});
</script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse mynavbar" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li>o nás</li>
<li>naše trasy</li>
<li>referencie</li>
<li>objednať prepravu</li>
<li><a class="active" href="galeria">galéria</a></li>
<li>kontakt</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container wrapper">
<div class="row">
<div class="col-md-12">
<h1>Galéria</h1>
<p>
<img class="img-responsive" src="images/gallery/thumb_peugeot01.jpg" alt="Peugeot Travel" /> <a href="images/gallery/peugeot02.jpg" rel="prettyPhoto[pp_gal]"><img class="img-responsive" src="images/gallery/thumb_peugeot02.jpg" alt="Peugeot Travel" />
</p>
</div>
</div>
</div>
<footer>
<div class="container copyright">
<div class="row">
<div class="col-md-12">
Copyright © <?php echo date("Y"); ?> | 3G Trans Slovakia<br />Vytvorila firma RoyalWEB.sk
</div>
</div>
</div>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-101095120-1', 'auto');
ga('send', 'pageview');
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.9/cookieconsent.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.cookieconsent_options = {"message":"Táto stránka využíva súbory cookies, ktoré pomáhajú k jeho správnemu fungovaniu. Využívaním našich služieb s ich používaním súhlasíte.","dismiss":"Rozumiem","learnMore":"Viac informácií","link":"https://sk.wikipedia.org/wiki/HTTP_cookie","theme":"light-bottom"};
</script>
</body>
</html>
fixed with replacing prettyphoto for another plugin.
The HTML file is generated using Markdown.
I have included a JavaScript file in HTML. It is visible that it is loaded in the browser (tried on Mozilla firefox).
See the proof below.
I tested if JS is enabled or not from https://www.whatismybrowser.com/detect/is-javascript-enabled
But somehow, it is not being executed.
Below is my generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-16"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="generator" content="Bootply-JBake-Custom"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-16"/>
<title>Title</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/asciidoctor.css" rel="stylesheet">
<link href="/css/base.css" rel="stylesheet">
<link href="/css/prettify.css" rel="stylesheet">
<link href="/css/styles.css" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico">
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<div id="wrap">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
LOGO
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>Projects</li>
<li>About</li>
<li>Categories</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="page-header" id="banner">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-6">
<h1>Projects</h1>
</div>
</div>
</div>
<!-- This script is loading but not executing -->
<script type="text /javascript" src="projects.js"></script>
<p>Here is the list of projects</p>
</div>
</div>
<div id="push"></div>
<div id="footer">
<div class="container">
</div>
</div>
</body>
</html>
projects.js
$(document).ready(function(){
console.log("ready")
alert("hi");
});
console.log("loaded")
<script type="text /javascript" src="projects.js"></script>
Remove the space in type="text /javascript with the result:
<script type="text/javascript" src="projects.js"></script>
This should allow the browser to parse the HTML correctly and load the script.
EDIT: Or remove the type attribute from the <script> tag entirely, as suggested by the comment below.
Im currently creating an app using cordova and ChartJS - I'm rendering a doughnut chart and it works perfectly fine in the emulator, but when I come to test the app on a ipad/ipod/iphone the chart does not render.
function renderMainClock(hourId) {
var clockData = gVMainClockData[hourId - 1];
var ctx = document.getElementById("main-clock").getContext("2d");
window.mainClock = new Chart(ctx).Doughnut(clockData, {responsive:true});
alert(ctx);
}
The alert gets called within the emulator, but is never called when its ran on a iOS device.
Does anyone know what the problem is?
Here is my index.html too:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<title>NUH Nursing Activity</title>
</head>
<body>
<!-- Top Bar -->
<div id="top-bar"></div>
<!-- Navigation -->
<div class="">
<nav>
<div class="nav-wrapper blue darken-4">
NUH Nursing Activity
<ul class="right">
<li><i class="mdi-action-info"></i></li>
</ul>
</div>
</nav>
</div>
<div class="container-custom">
<div class="center small-circle-padding">
<div id="small-circles"></div>
</div>
<div id="canvas-holder" class="center">
<canvas id="main-clock"></canvas>
</div>
<div class="card red darken-1">
<div class="card-content white-text">
<p>Current Shift Hour: 1</p>
</div>
</div>
<div class="row">
<div class="col s5">
<a class="btn blue darken-2">Add</a>
</div>
<div class="col s7 right">
<a class="btn blue darken-4 right disabled">Finish</a>
</div>
</div>
</div>
<!-- Include Relevant JavaScript -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/globalVariables.js"></script>
<script tyoe="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/chart.min.js"></script>
<script type="text/javascript" src="js/appStart.js"></script>
<script type="text/javascript" src="js/mainClock.js"></script>
</body>
</html>
Have you tried commenting the following code under Chart.js ?
helpers.retinaScale(this.chart);
That tends to fix the issue.
It's so silly, but removing the []'s from my backgroundColor and borderColor options fixed the rending issue I was having.