Tag Archives: css

jsp tomahawk HtmlInputCalendar

I had an ongoing issue recently with pop-up javascript calendars in the tomahawk jsp library.  Hopefully this will save some trouble for someone.  The problems I was having were:

  1. sometimes the calendar pop-up was not selectable, and
  2. when it was selectable, the pop-up would show up at a distorted location on the page and the tables would be messed up.

Being new to debugging this, my first assumption was that there would be protections built into this packaged code so that my CSS and whatever else would not affect it.  So, to keep this post short and to the point, here is how I fixed it:

  1. An eventual look at the W3C HTML 4.1 Reference showed that this element was difficult to put directly inside a label, inside a fieldset.  The problem is that the label element only supports one input inside, so the additional calendar pop-up button is unusable and simply ignores any click on it and instead puts focus on the input element.  I ended up fixing this one by simulating a label element using a DIV and CSS.  (Note: at B6 Systems, we have developed an in-house jsp framework that we call PureFaces that allows writing JSP pages completely in Java code.  So I wrote my own components for the fieldsets and labels.  It is intended to be open source eventually and will be on the B6 website)
  2. The second problem took a little longer, and eventually I fixed it without really knowing why what I did worked.  I used a lot of the same techniques for debugging CSS that are shown in many places.  Eventually I found that I had a position: relative; style on my content wrapper that was totally throwing off the built-in CSS for the pop-up.  The reason I don’t know why that fixed it was that I could not find anything in the built-in CSS that seemed to care about position.  But, results speak loudly.  I was able remove and work around that style.  The second part of this one (the bad formatting of the pop-up) was related to having the table element way too globally defined in the CSS.  Adding more specific selectors quickly solved that one.
Advertisements