I'm still learning the ropes when it comes to styling.
In my web app (created with GWT), I am displaying a grid of results. In one column, I want to showcase a score visualization. The idea is to have a central black line and either a green rectangle on the right for positive scores or a red rectangle on the left for negative scores. The size of the rectangle will represent the value of the score. Here's an example:
For this task, I have a div for the entire cell. My approach involves adding two sub-divs to draw the center line and then placing the corresponding rectangle in each div. However, I am struggling a bit with how to execute all these steps.
This is what I have so far:
@Override
public SafeHtml getValue(SearchResult value) {
SafeHtmlBuilder sb = new SafeHtmlBuilder();
float ratio = value.getRatio();
sb.appendHtmlConstant("<div style='width: 100%; height: 100%; position: relative;'>");
if (ratio > 0) {
sb.appendHtmlConstant("<div style='position: absolute; left: 0; top: 0; width: 100%; z-index: 1'><div style='display: inline; float: left; width: "
+ ratio
+ "%; height: 20px; background-color: #82cd80;'></div>");
}
else {
sb.appendHtmlConstant("<div style='display: inline; float: right; width: "
+ ratio
+ "%; height: 20px; background-color: #c54c4d;'></div>");
}
sb.appendHtmlConstant("</div>");
sb.appendHtmlConstant("</div>");
return sb.toSafeHtml();
}
Unfortunately, nothing seems to be appearing as expected. I could really use some guidance here.