Archive | CSS RSS for this section

Fix Dojo-Enabled Field Sizes Part 2: Type-Ahead Fields

Type-Ahead fields are activated by dojo after the page loads and the post-processing causes them ignore some theme, custom CSS, and inline settings. This can cause inconsistency in your form UI. This post demonstrates how to fix the field height and width for type ahead fields, so they better match the rest of your form.

My previous post showed how to fix these settings on date picker fields.

As I mentioned in the previous post, even field width settings in the properties panel are ignored.

This screen shot shows a form with a type-ahead field, then 3 regular fields, then a date picker. You can see that the field sizes are different for the type-ahead field and the date picker.

DojoFieldSizes_1

Reviewing the Generated Source

We can fix them with dojo code after the form loads (and the dojo-enabled activation happens), but we need to understand what is generated.

This is the source of the type-ahead field that’s passed to the browser (note that it even includes the inline ‘size’ attribute that I set while trying to size the field):

<span id="view:_id1:_id6"></span>
<input class="xspInputFieldEditBox" id="view:_id1:location1" type="text" name="view:_id1:location1" size="50" />

But this is what the source ends up being after dojo processes the field to activate the type-ahead field:

<span id="view:_id1:_id6" dojotype="ibm.xsp.widget.layout.data.TypeAheadReadStore" jsid="view__id1__id6" mode="partial"></span>
<div aria-labelledby="view:_id1:location1_label" widgetid="view:_id1:location1" role="combobox" class="dijit dijitReset dijitInlineTable dijitLeft xspInputFieldEditBox dijitTextBox" id="widget_view:_id1:location1" 
dojoattachevent="onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse" dojoattachpoint="comboNode" wairole="combobox" tabindex="-1">
<div style="overflow:hidden;">
<div role="presentation" class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton" 
dojoattachpoint="downArrowNode" wairole="presentation" dojoattachevent="onmousedown:_onArrowMouseDown,onmouseup:_onMouse,onmouseenter:_onMouse,onmouseleave:_onMouse">
<div class="dijitArrowButtonInner"> </div><div class="dijitArrowButtonChar">▼</div></div>
<div class="dijitReset dijitValidationIcon"><br></div>
<div class="dijitReset dijitValidationIconText">Χ</div>
<div class="dijitReset dijitInputField"><input aria-invalid="false" value="" tabindex="0" id="view:_id1:location1" aria-autocomplete="list" aria-haspopup="true" role="textbox" name="view:_id1:location1" autocomplete="off" class="dijitReset" dojoattachevent="onkeypress:_onKeyPress,compositionend" dojoattachpoint="textbox,focusNode" wairole="textbox" waistate="haspopup-true,autocomplete-list" type="text"></div></div></div>

Fixing the field size

The logic for this one is a bit more complicated than the date picker, because there isn’t a unique class that’s applied to the field. The unique object to locate is the span tag with the dojotype attribute of ibm.xsp.widget.layout.data.TypeAheadReadStore (line 01). We then need to set the size on the subsequent div (line 02) and the field will size itself to fill the div.

We can get a handle to that div with the CSS ‘adjacent sibling’ selector: +

dojo.query('SPAN[dojotype="ibm.xsp.widget.layout.data.TypeAheadReadStore"] + DIV').style({
  height:"17px",
  width:"200px"
});

Note: This logic assumes that you want all of your type-ahead fields to be the same size. If you need to set some at different sizes, you can add unique classes to fields and target them separately with a few additional lines of code.

Advertisements

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.