Combine Resources causes CSS problems for calendar

Hello All,

We enabled the combine-resources property in dev
<property as="xs:boolean" name="oxf.xforms.combine-resources"                          value="true"/>

this is causing the combined css to have few of the classes generated with #o0orbeon-calendar-div instead of #orbeon-calendar-div, and this messes up the calendar widget.


.orbeon #o0orbeon-calendar-div .yui-calendar .calheader {
  padding-top: .3em;
}
.orbeon #o0orbeon-calendar-div .yui-calendar .calnavleft {
  top: 7px;
}
.orbeon #o0orbeon-calendar-div .yui-calendar .calyearleft {
  overflow: hidden;
  position: absolute;
  text-indent: -10000em;
  z-index: 1;
  background: transparent url(/esif-web/orbeon/o/ops/images/xforms/calendar-left-double.png) no-repeat scroll;
  bottom: 0;
  cursor: pointer;
  height: 15px;
  left: -10px;
  margin-left: 0.4em;
  top: -7px;
  width: 25px;
}
.orbeon #o0orbeon-calendar-div .yui-calendar .calnavright {
  top: 7px;
}
.orbeon #o0orbeon-calendar-div .yui-calendar .calyearright {
  overflow: hidden;
  position: absolute;
  text-indent: -10000em;
  z-index: 1;
  background: transparent url(/esif-web/orbeon/o/ops/images/xforms/calendar-right-double.png) no-repeat scroll;
  bottom: 0;
  cursor: pointer;
  height: 15px;
  right: -10px;
  margin-right: 0.4em;
  top: -7px;
  width: 25px;
}


I think it is because we are are running forms in embedded mode from our webapp.

If I load the combined css file from Form Runner then the styles are as follows

.orbeon #orbeon-calendar-div .yui-calendar .calheader {
  padding-top: .3em;
}
.orbeon #orbeon-calendar-div .yui-calendar .calnavleft {
  top: 7px;
}
...

Any pointers to fix this problem ? apart from switching of combining resources.

Hi Balvinder,

What version of Orbeon Forms do you see you this on? You are saying that you're seeing this with the combined resources enabled, which is the default, correct? How can we reproduce this (the way you're describing the issue, it should show on any form using a date field, and this out-of-the-box)?

Alex

Hi Alex,

We are using 4.8.2 version of Orbeon. Yes, with combined resources enabled, we are still in "dev" (run-mode) so by default combined resources is false, but as soon as we enable it we see this problem.

Yes, with combine resources enabled and embedding filter we see this problem in all date/calendars.

If we render the forms in form runner or form builder (i.e. not embedded in JSP) we don't see this problem with the date/calendars even with combined resources enabled.


Thanks,
Balvinder

Hi Balvinder,

Thank you for the additional details. One more thing: is this a form you created with Form Builder and that you're embedding in your application using the Java API (doc linked below)? Do you know by any chance if this is also happening with 4.10? I am just trying to see what steps I should follow to reproduce the error you're seeing.

http://doc.orbeon.com/form-runner/link-embed/java-api.html

Alex

Hi Alex,

Don't know about 4.10, will have to upgrade to try it.

Yes, the form is created using form builder, and we are using the Java embedded API from our JSP, i.e. the link you posted.

To replicate, you create a simple form with calendar, then create a JSP and used embedded API, you will observe that the combined CSS will have the calendar styles with .orbeon #o0orbeon-calendar-div, where as the HTML has controls rendered with #orbeon-calendar-div.

There is a separate problem which we have observed with embedded Java API, which is that all the controls whose styles are defined in xforms-form are rendered with "#o0xforms-form", but the xforms.css has styles with .orbeon #xforms-form. So we had to overwrite all styles in xforms.css to ".orbeon #o0xforms-form" to make it work with embedded Java API. The discussion of this problem in on stack overflow, CSS-Server side embedding 

Thanks,
Balvinder

Hi Balvinder,

Indeed, I can reproduce this. For now, I've create the following issue:

https://github.com/orbeon/orbeon-forms/issues/2423

Alex

And Balvinder, BTW this issue is now fixed.

(For those with a PE Gold subscription hitting this, feel free to get in touch with us for a hot fix.)

Alex