söndag 27 mars 2011

Making the resize of XPage Datefields work like they should

I found when creating an application that I couldn't resize a date field. The date picker mover to a second row and that wasn't what I wanted.

And I didn't want a large field because I was only storing a short date in ISO Date format.
I started to investigate why the helper icon was moved to the second row and found that a style width was inherited down in the date field control. This made that the text field storing the date was as big as the surrounding span and that made the helper icon to pop down to the second row.

I thought that I could fix the problem in the Dojo Widget but I couldn't find any event to attach my code to that fired when the compilation of the widget was done. So my choice fell on implementing this as a Dojo onload event fix.


XSP.addOnLoad(function() {
dojo.query(".xspInputFieldDateTimePicker").forEach(function(node, index, arr){
var containerId = node.id;
if(containerId.length>=10){
if(containerId.substr(containerId.length-10)=="_Container") {
var subid="widget_"+containerId.substring(0, containerId.length-10);
if(node.style.width!=""){
var sub=XSP.getElementById(subid)
if(sub){
if(node.style.width==sub.style.width){
var width=sub.style.width.substring(0, sub.style.width.length-2);
if(width>33){
width=width-33
sub.style.width=width+"px";
}}}}}}});});

Place the code within a output script on a custom control or in a script library and add it to you xpage with the fields. It can handle one or multiple date fields. It will only manipulate fields with the width style added.

2 kommentarer:

  1. Nice solution...I had to do this a few weeks ago, but my solution wasn't quite so well defined.

    SvaraRadera
  2. Thanx, just hoping that IBM will implement this soon so my script isn't needed

    SvaraRadera