Opened 11 years ago
Closed 8 years ago
#11303 closed defect (fixed)
dojox/form has some wrong CSS images path for Claro theme
Reported by: | florentvaldelievre | Owned by: | dante |
---|---|---|---|
Priority: | high | Milestone: | 1.9 |
Component: | DojoX Form | Version: | 1.5.0rc1 |
Keywords: | CSS path claro image button_back_full.png textBox_back.png | Cc: | bill |
Blocked By: | Blocking: |
Description (last modified by )
Hi, i found a bug when trying to apply Claro theme to our multiple file uploader widget :
dojo-release-1.5.0rc1-src/dojox/form/resources/FileInput.css
/* Claro */ .claro .dijitProgressOverlay { border:1px solid #769dc0; background-color:#769dc0; } .claro .dijitFakeInput input { border: 1px solid #bcc8dd; background-color: #fff; background-repeat: repeat-x; background-position: top left; background-image:url("../../../dijit/themes/claro/images/textBox_back.png"); line-height:normal; padding:0.2em 0.3em; } .claro .dijitFileInputButton, .claro .dijitFileInputText { background-image: url("../../../dijit/themes/claro/form/images/button_back_full.png"); background-position: center top; background-repeat: repeat-x; background-color: #cde3f6; border: 1px solid #799ab7; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow:0px 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.2); }
../../../dijit/themes/claro/images/textBox_back.png It should be : ../../../dijit/themes/claro/form/images/textBox_back.png
And
../../../dijit/themes/claro/form/images/button_back_full.png
This file does not exist in any folder: I had to download it manually and add it in dojo release
Cheers
Change History (18)
comment:1 Changed 11 years ago by
Component: | General → Dijit - LnF |
---|---|
Owner: | changed from anonymous to Julie Santilli |
comment:2 Changed 11 years ago by
Owner: | changed from Julie Santilli to dante |
---|---|
Status: | new → assigned |
comment:3 Changed 11 years ago by
Milestone: | 1.5 → 1.6 |
---|
comment:4 Changed 11 years ago by
Component: | Dijit - LnF → DojoX Form |
---|
comment:5 Changed 11 years ago by
comment:6 Changed 10 years ago by
It seems the whole claro CSS for FileInput? is inconsistent.
If you compare:
http://svn.dojotoolkit.org/src/dojox/trunk/form/resources/FileInput.css
with:
http://svn.dojotoolkit.org/src/dijit/trunk/themes/claro/form/Button.css
you will see some differences in the button style:
background-color: #cde3f6; border: 1px solid #799ab7;
Also, the http://svn.dojotoolkit.org/src/dojox/trunk/form/resources/FileInput.html template uses Buttons and TextInputs? that are different from the real buttons and inputs specified in http://svn.dojotoolkit.org/src/dijit/trunk/form/templates/Button.html for instance.
So the button include <span class="dijitReset dijitInline dijitButtonText" id="${id}_label" dojoAttachPoint="containerNode"></span> that is not present in the FileInput?, and this causes alignment and spacing issues.
Also there is a similar issue with the input that shows the filename the user selected. The rendered widget is much different from the other TextInput?.
I am wondering why does this claro CSS button styling should be specified again on the FileInput? and why don't the components inside the FileInput? don't use the original CSS styles defined already?
comment:7 Changed 10 years ago by
Milestone: | 1.6 → 1.7 |
---|
comment:8 Changed 9 years ago by
Cc: | mikeb added |
---|
Also dijit/themes/soria/buttonDisabled.png is referenced but it should be dijit/themes/soria/images/buttonDisabled.png
dojox/form/resources/TriStateCheckBox.css: background-image: url('../images/checkmarkNoBorder.png');
dojox/form/resources/TriStateCheckBox.css: background-image: url('../images/checkmarkNoBorder.gif');
seem to reference nonexistent files but they do exist in dijit/themes/claro/images/
comment:9 Changed 9 years ago by
Summary: | FileInput.css has some wrong CSS images path for Claro theme → dojox/form has some wrong CSS images path for Claro theme |
---|
comment:11 Changed 8 years ago by
Milestone: | 1.8 → 2.0 |
---|
1.8 has been tagged; moving all outstanding tickets to next major release milestone.
comment:12 Changed 8 years ago by
Cc: | mikeb removed |
---|
dojox/form/resources/CheckedMultiSelect.css also contains a non-existent file reference:
background-image: url('../../../dijit/themes/claro/form/images/textBox_back.png');
comment:13 Changed 8 years ago by
Hover rules referencing textBox_back.png could possibly be changed to:
background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
based on a similar change to claro/form/Common.css between 1.7 and 1.8.
comment:14 Changed 8 years ago by
Cc: | bill added |
---|
bill, [27469] removed textBox_back.png but replacement gradients weren't added to dojox/form CSS files as part of the change.
comment:15 Changed 8 years ago by
The change you suggested above looks good to me. (Opera rules are questionable since they are in the process of changing their engine to webkit, but I'm fine with either way.)
comment:17 Changed 8 years ago by
Description: | modified (diff) |
---|---|
Milestone: | 2.0 → 1.9 |
By the way, when I converted dijit to use linear-gradient instead of a background image, I thought the gradient (from the original textBox_back.png) was almost imperceptible. That's why I didn't leave a backup image file for older versions of IE.
1.5 is released, moving remaining tickets to 1.6