Smart GWT controls does not pick up CSS styles

Smart GWT Technical Q&A
1

I have the following client side issue with Smart GWT 2.4.
The following code extracts come from the user interface and CSS stylesheet:

Java:
label= new Label(“My Text”);
label.setStyleName(“timerNormal”);

xxx.css:

.timerNormal {
size: 10;
text-align: right;
}

.timerExpired {
size: 10;
color: red;
}

File xxx.css resides in the src\war direcory with themain html page_ See main html code:

<html>
<head>
<meta http-equiv=“content-type” content=“text/html; charset=UTF-8”>
<title>Book A Service</title>
<script> var isomorphicDir = “bookaservice/sc/”; </script>
<script type=“text/javascript” language=“javascript” src=“bookaservice/bookaservice.nocache.js”></script>
<link rel=“stylesheet” href=“BookAService.css”>
</head>
<body>
<iframe src=“javascript:‘’” id=“__gwt_historyFrame” tabIndex=‘-1’ style=“position:absolute;width:0;height:0;border:0”></iframe>
</body>
</html>

Please help me.

Henkie

2

have you tried loading your “BookAService.css” in the browser - ie just type in the URL. maybe your web.xml permissions are not correct.

3

I tried that just now - URL: http://127.0.0.1:8888/BookAService.css
It’s working fine.

I was wondering if the CSS file is maybe in the wrong path?
Currently it is in the same directory as BookAService.html.

Or, must I define it somewhere else other than in BookAService.html?

4

Is this something that is supposed to be simple?

Please help. I tried many things to resolve this before posting.

5

I solved this - it seems best to just put the user defined styles directly in the html and not in a css file:

<style type=“text/css”>

.manyAvailCell {
background-color: green;
}

</style>
</head>

This worked fine.

6

Try to clear the browser cache and see if that helps next time.