Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#14850 closed defect (fixed)

Select: layout problems using Claro

Reported by: Paul Christopher Owned by: Douglas Hays
Priority: undecided Milestone: 1.8
Component: Dijit - Form Version: 1.7.2
Keywords: Cc:
Blocked By: Blocking:

Description

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.

Attachments (7)

screenshot1.png (69.7 KB) - added by Paul Christopher 7 years ago.
index.html (1.8 KB) - added by Paul Christopher 7 years ago.
14850.patch (1.5 KB) - added by Douglas Hays 7 years ago.
CSS changes
testPatch.html (2.1 KB) - added by Paul Christopher 7 years ago.
14850.2.patch (118.3 KB) - added by Douglas Hays 7 years ago.
refactor of Select template and CSS to match FilteringSelect?
missingOutline.PNG (29.4 KB) - added by Paul Christopher 7 years ago.
testPatch14850.2.html (2.0 KB) - added by Paul Christopher 7 years ago.

Download all attachments as: .zip

Change History (25)

Changed 7 years ago by Paul Christopher

Attachment: screenshot1.png added

comment:1 Changed 7 years ago by 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.

comment:2 Changed 7 years ago by bill

Summary: Layout problems with Dijit.form.Select using ClaroSelect: layout problems using Claro

comment:3 Changed 7 years ago by 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.

Changed 7 years ago by Paul Christopher

Attachment: index.html added

Changed 7 years ago by Douglas Hays

Attachment: 14850.patch added

CSS changes

comment:4 Changed 7 years ago by Douglas Hays

Milestone: tbd1.8

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

comment:5 Changed 7 years ago by 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.

Changed 7 years ago by Paul Christopher

Attachment: testPatch.html added

comment:6 Changed 7 years ago by 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.

comment:7 Changed 7 years ago by 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].

comment:8 in reply to:  7 Changed 7 years ago by 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.

Changed 7 years ago by Douglas Hays

Attachment: 14850.2.patch added

refactor of Select template and CSS to match FilteringSelect?

comment:9 Changed 7 years ago by 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.

comment:10 Changed 7 years ago by 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...

comment:11 Changed 7 years ago by 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.

comment:12 Changed 7 years ago by 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)

No image "missingOutline.png" attached to Ticket #14850

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...

Changed 7 years ago by Paul Christopher

Attachment: missingOutline.PNG added

Changed 7 years ago by Paul Christopher

Attachment: testPatch14850.2.html added

comment:13 Changed 7 years ago by Douglas Hays

Resolution: fixed
Status: newclosed

In [28770]:

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

comment:14 Changed 7 years ago by bill

Resolution: fixed
Status: closedreopened

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

comment:15 Changed 7 years ago by Douglas Hays

Resolution: fixed
Status: reopenedclosed

In [28817]:

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

comment:16 Changed 7 years ago by bill

In [28820]:

remove empty summary, refs #14850 !strict

comment:17 Changed 7 years ago by Colin Snover

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

comment:18 Changed 7 years ago by Douglas Hays

In [29223]:

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

Note: See TracTickets for help on using tickets.