Fix Dojo-Enabled Field Sizes Part 1: Date Pickers

Dojo-enabled fields ignore some theme, custom CSS, and inline style settings. This can cause inconsistency in your form UI. This post demonstrates how to fix the field height and width for date picker fields, so they better match the rest of your form.

I refer to anything processed by dojo after the page loads as a ‘dojo-enabled’ field. Two common types that I encounter are date pickers and type-ahead fields. Their functionality is added by dojo once the form loads, so some settings that you may expect are not preserved.

Take a look at these screen shots (the same form with and without data). I took my simple Team form in my database of NFL football teams and set the Location field to be type-ahead and the Next Game field to be a date picker. Without changing anything else or adding any CSS, you can see that the dojo-enabled fields are longer horizontally and shorter vertically. Their fonts differ as well.

DojoFieldSizes_1b DojoFieldSizes_1

Field Width via the Properties Panel

If I set the field width in the properties panel, it is not respected in the dojo-enabled fields.

DojoFieldSizes_2

Field Styles with CSS

If I use CSS to set the font color and width of all fields, I still see the same effect. The color setting is picked up, but the field widths of the dojo-enabled fields are still different. Font sizes are also not respected by the dojo-enabled fields.

Reviewing the Generated Source

This is the source of the date picker that’s passed to the browser (note that it even includes the inline ‘size’ attribute):

<input class="xspInputFieldDateTimePicker" id="view:_id1:inputText1" type="text" name="view:_id1:inputText1" size="50" />

But this is what the source ends up being after dojo processes the field to activate the date picker:

<span class="xspInputFieldDateTimePicker" style="display: inline-block;">
</span>
<div class="dijit dijitReset dijitInlineTable dijitLeft xspInputFieldDateTimePicker dijitTextBox" id="widget_view:_id1:inputText1" role="presentation">
<div style="overflow: hidden;">
<div class="dijitReset dijitValidationIcon"></div>
<div class="dijitReset dijitValidationIconText">Χ</div>
<div class="dijitReset dijitInputField"><input class="dijitReset" id="view:_id1:inputText1" tabindex="0" type="text" autocomplete="off" value="" /><input style="display: none;" type="text" name="view:_id1:inputText1" /></div>
</div>
</div>
<span class="xspInputFieldDateTimePicker" id="view:_id1:inputText1_Container" style="display: inline-block;">
<span class="dijit dijitReset dijitLeft dijitInline xspInputFieldDateTimePicker dijitButton">
<span class="dijitReset dijitRight dijitInline"><span class="dijitReset dijitInline dijitButtonNode">
<button class="dijitReset dijitStretch dijitButtonContents" id="dijit_form_Button_0" style="-moz-user-select: none; background: none repeat scroll 0% 0% transparent; margin: 0px;" tabindex="0" title="" role="button" type="button" value="">
<span class="dijitReset dijitInline xspInputFieldDatePickerIcon">
<span class="dijitReset dijitToggleButtonIconChar">✓</span>
</span>
<span class="dijitReset dijitInline dijitButtonText dijitDisplayNone" id="dijit_form_Button_0_label"></span>
</button></span></span></span></span>

Fixing the field size

Since the date picker gets a class of xspInputFieldDateTimePicker, we can use few lines dojo code to fix the problem that dojo causes. Just run code like this on the onclientload event of the XPage or custom control to fix the font size and field width as needed.

dojo.query(".xspInputFieldDateTimePicker .dijitTextBox").style({
  width:"100px",
  height:"17px"
});

Note: This logic assumes that you want all of your date pickers to be the same size. I think this is a fairly safe assumption, since your date fields should all have a consistant format. However, if you need to set some at different sizes, you can add classes to the date fields and target them separately with a few additional lines of code.

Some inline styles still take precedence

I found it noteworthy that if I set the font style inline (via the properties panel or directly in the source), the setting was preserved. This isn’t ideal design, but it is an option if you’re stuck.

Up Next

In the next post, I’ll show how to fix the field size on type-ahead fields.

Advertisements

3 responses to “Fix Dojo-Enabled Field Sizes Part 1: Date Pickers”

  1. Eric Tomenga says :

    In order to get this to work with r9.01 I had to remove .xspInputFieldDateTimePicker from the query.

    I used
    dojo.query(“.dijitTextBox”).style({
    width:”100px”,
    height:”16px”
    });

    and my dojo input fields work of uniform size.

    Thank you Brad!

  2. Steve Kobb says :

    Brad — Thanks for the great post. This is exactly the problem I’ve experienced… but haven’t been able to solve.

    Your code — plus Eric’s suggestion — LOOK like they both ought to work — and I can see that they DO work for a brief moment, but then, some other rule takes over, and in the blink of an eye, the DateTimePicker reverts back to its weird little, off-standard ways.

    So, I hate to bother you, but… can you think of what might be over-riding your mod here? I’ve checked the component in FireBug, but can’t seem to pinpoint what is trumping your dojo.query.

    Cheers from Houston,

    Steve Kobb

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: