Select: layout problems using Claro

[Paul Christopher]

Description

The size of dijit.form.Select sightly differs from the size of other controls such as FilteringSelect, DateTextBox, TimeTextBox. This is quite a pain for form layout if you use these form widgets next to each other. It needs manual fixing. Is it possible to make it work "out of the box"?

Steps to reproduce the issue

Put a dijit.form.DateTextBox and a dijit.form.Select next to each other in a page. Open Firebug and closely oberseve the "box model" / "layout". DateTextBox and other controls do not have an overall margin. Select has a margin of 2px. The default size of all DateTextBox is 166px * 19px. The size of Select (when using the style attribute on creation with style="width:166px; height:19px") is 166px * 20 px. What ever I do, I cannot make it smaller than 20px. But most form controls have the default height of 19px. Now use the keyboard to navigate the controls. Only Select has a dotted focus outline. All other controlls have a nice blue outline.

Discussion

Three things I wanted to report thus:

• Select has a default margin of 2px, other controls don't have a margin at all
• I cannot make Select smaller than 20px although 19px is the default size of most other controls.
• The focus for keyboard navigation differs from other controlls: Select has a dotted outline, other controls a solid blueish outline.

[Paul Christopher]

2 more things to mention:

The position of the arrow of a dijit.form.Select seems to differ from other controls (such as DateTextBox, FilteringSelect):

Moreover the default text color seems to be slighlty different: DateTextBox has color black (#000000)[like FilteringSelect, TimeTextBox], Select has #444444.

[Paul Christopher]

I have added a test case which helps to narrow down the problems:

• If you change the default color of the body, dijit.Select uses the default body color and not .dijitInputInner as the DateTextBox widget does

• Select has a default margin of 2px for some reason. Other controls don't have a margin at all.

• dijit.Select is by default 1px bigger than DateTextBox

• The arrow is mispositioned

• Don't know how I did this: In my current project, the default size of the DateTextBox is 19px. I could not make the !dijit.Select smaller than 20px. I had to make the other controls grow to 20px.

[Douglas Hays]

CSS changes

[Douglas Hays]

Oliver, can you test with the CSS patch that I attached to see if these problems are fixed?

[Paul Christopher]

It fixes some of the problem but not all:

• With the patch, the dijit.Select was by default 1px smaller than e.g. other select like controls like FilteringSelect. I think bottom padding needs to be still 2px (see test case testPatch.html).

• Margin problem is fixed!

• Text color problem is fixed!

• Keyboard navigation problem still unfixed: If you navigate with the keyboard to the select, it gets a dotted outline. FilteringSelect doesn't have this. I have removed this outline (see testPatch.html).

• Hovered items in the select have a dotted outline, too. I have removed this(see testPatch.html).

• Could not fix this: A hovered item in a FilteringSelect has blue top and bottom border. This is missing in dijit.Select. There you have only the blue bar with the gradient without a top and bottom border. I tried to add this border - but it does not work for some reason (see testPatch.html).

• Not fixed: In contrast to the FilteringSelect, the down arrow of the button node is mispositioned by 1px (see screenshot comment 1). Don't know how to fix this.

[Paul Christopher]

Concerning the missing border problem of the hovered menu items: The items seem to already have the necessary border styles (see menu.css, class ".claro .dijitMenuPassive .dijitMenuItemHover", ".claro .dijitMenuPassive .dijitMenuItemSelected"), however they are not displayed.

[bill]

About the focus outline on Select, it's there on purpose to indicate that the Select has focus. Notice that this is standard behavior for browsers when focusing native <select> elements, and also native <button>'s. FilteringSelect indicates focus in a different way, the same way as native <input>'s.

However, I don't think we need a focus outline on the drop down list except in high contrast mode, and I fixed that just now in [28533].

[Paul Christopher]

Replying to bill:

About the focus outline on Select, it's there on purpose to indicate that the Select has focus. Notice that this is standard behavior for browsers when focusing native <select> elements, and also native <button>'s. FilteringSelect indicates focus in a different way, the same way as native <input>'s.

Wow, yes Bill, you are perfectly right! Haven't noticed this, yet. Of course we should keep that outline for the whole select then.

[Douglas Hays]

refactor of Select template and CSS to match FilteringSelect?

[Douglas Hays]

Paul Christopher/bill, I just appended a new patch that needs careful testing, with special attention to Select and FilteringSelect? theme/rendering regressions. dijit/tests/form/TextBox_sizes.js now passes in strict and quirks mode when before there were numerous failures but it would be easy to miss some visual problems.

[Paul Christopher]

I would like to test, however I don't know 1) how to apply the patch, 2) which dojo version to use.

I have downloaded the above patch and the latest dojo version from the nightly builds site. Then I have created a new Mercurial repository. However the patch files seem not to be compatible. I cannot apply the patch with "hg import" for some reason. The import fails/ is rejected and gives me only a Select.js.rej file without applying any changes. "hg status" also show: Nothing is changed...

[Douglas Hays]

Paul Christopher, the patch is against trunk. I've never used a Mercurial repository. With an svn client (e.g. TortoiseSVN on Windows), you can do the checkout and apply patch.

[Paul Christopher]

I have finally managed to install TortoiseSVN, check out the code and apply the patch. Doug, it's a great patch and I really like it. Here are my test results (tested claro, nihilo, tundra, soria on IE9, FF13, Chrome19, Safari5.1.7. and Opera11.61):

• In all themes, the mouse cursor is of type 'arrow' for the options field, type 'text' for the drop down button. This used to be type 'pointer' for both the options field and the drop down button.

• If the field is marked as invalid and if you focus it, the red marks are all removed. Only the tooltip remains open. In contrast, using an invalid FilteringSelect, the red marks are not removed there if the invalid control is focused (see picture below and testPatch14850.2.html).

• Claro specific problem (as already mentioned in #comment6): The select bar has an outline in FilteringSelects. It doesn't have an outline in the select widget although the css styles are already there. No idea why... (see picture below and testPatch14850.2.html)

Further thoughts beyond this ticket: The select does not support a placeholder text as FilteringSelect does (see testPatch14850.2.html). I know, it is not part of this ticket (there is even no ticket at all for this I guess). But could support for the placeholder attribute be added so that you can display a text "Please choose a value" if the select is empty? That would make it perfect and there will be no difference to other select like widgets anymore...

[Douglas Hays]

In [28770]:

Fixes #14850. Refactor Select template/CSS to better align with FilteringSelect?. Added automated tests to TextBox_sizes.html for Select.

[bill]

Starting with [28770], test_Select.html?mode=test is failing on IE8.

Failure in required() test:

_AssertFailure: assertEqual() failed:
	expected
		Incomplete
	but got
		

 with hint: 
		incomplete because required but no value

[Douglas Hays]

In [28817]:

Fixes #14850. Don't set state until startup runs to avoid multiple validate() calls.

[bill]

In [28820]:

remove empty summary, refs #14850 !strict

[Colin Snover]

The changeset [28770] causes a regression in user stylesheets by removing the .dijitButtonNode classes.

[Douglas Hays]

In [29223]:

Refs #14850. Re-add dijitButtonNode to the Select template arrow button for compatibility and add additional border CSS to compensate.