CSS styling attribute not picked up in WebSphere

Question

I am deploying this app in client environment WebSphere and one of my CSS attribute is not getting picked up correctly during page load. It works just fine in Tomcat during local testing. So it could be either the client environment set up, caching or whatever but it just don't seems to work.

I have a query form in the page with 2 parameters empID and reportID in the same line. Once the query is ran, some results comes back with a third parameter date which could be used for query as well. All three parameters are part of the form. During initial page load, the form width is set to 500px . After the query, if result includes the date parameter the form width is increased to 650px through CSS.

But WebSphere doesn't recognize the updated width through CSS.

CSS Code

#go-form-wrapper
{
 width: 500px;
}
#go-form-wrapper.has-date { 
 width: 650px;
}

HTML code - Initial page load

<div id="go-form-wrapper" class=" rounded-corners">

After query results

<div id="go-form-wrapper" class="has-date rounded-corners">

The div element class is appended with has-date on second page load, but the CSS changes not picked up for some reason. Clients use reverse proxy server caching and stuff. Could it be the culprit? Tried debugging with client, renamed the css file and the layout broke. Then named it correctly and the layout was fixed. So it doesn't appear to be caching issue.

Only way to fix seems to be to set width as 650px during initial page load itself.

 #go-form-wrapper
{
 width: 650px;
}

Any tips from the front end/CSS experts?

Answer 1

Turned out it was a bug in the code. When you append the has-date keyword, there wasn't any spaces after, so it ended up as has-daterounded-corners , so the css wasn't picking up correctly.