Tizen SDK CSS ID Not Being Rendered - css

Question

I am using the Tizen 2.3.1 SDK for wearables and have run into an issue where no matter what I do to the style.css file, adding any new ids simply refuses to work.
* {
margin: 0;
padding: 0
}
html, body {
width: 100%;
height: 100%;
background-color: black;
}
#str_day {
position: absolute;
display: -webkit-flex;
width: 50%;
height: 50%;
background: yellow;
color: yellow;
z-index: 4;
opacity: 1;
}
h1 {
font-size: 1.4em;
margin: 10px 0 20px 10px;
color: #6587ac;
}
#box {
display: -webkit-flex;
-webkit-align-items: center;
width: 100%;
height: 100%
}
.canvas {
background: #000;
width: 320px;
height: 320px;
margin: auto;
}
This is my code. I am trying to add the str_day id however it doesn't show up when I run the package through the emulator. The rest of the css (the canvas element, mainly) works fine, but str_day just doesn't show up. I tried specifying the z-index and opacity in case some weird issue was occuring but that doesn't seem to be the problem.
This is my full code on github.
https://github.com/JoyfulOwl/RadialWatch/commit/86d096710c7187b6b3679e02416548e18a3e986e

Answer 1

Probably because of improper CSS layout str_day is rendered/painted outside the viewport of your watchface because of which its not visible.
I think better would be to use canvas fillText command to print the date on canvas.
Try below example.
var canvas = document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.font="30px Comic Sans MS";
context.fillStyle = "red";
context.textAlign = "center";
context.fillText(str_Day, mCenterX, mCenterY); // mCenterX & mCenterY are the position where text has to be shown.