Is there a way to use the dijit.form.DateTextBox with a particular style (e.g. soria or tundra) without setting a class value on the body tag? Doing this is overriding some of our basic styles. When I leave it off, the calendar is transparent, which is no good.
Also, can form elements be marked as dojo (give a value for dojoType in the markup) but still have their "default" look and feel? Or better, if I were to use a dijit.form.DateTextBox, is there a way to not get the textbox to be styled differently than the default?
One last, but slightly related question: if needed, how can I use the dojoType="dijit.form.DateTextBox", but have the calendar shown via a click on an image, instead of/in addition to focus being given to the text box?
Thanks in advance for the help.
Add the class to the immediate parent instead.
...and make sure you've included the stylesheet for the theme, i.e.:
That didn't quite work the
That didn't quite work the way I was hoping ... The text box was styled, but the calendar was not, meaning it had the transparent background. I tried putting the class definition on the surrounding the dateTextBox, the containing it, and finally, the containing everything, but the calendar still did not render properly. However, the textboxes look like they should with the selected theme in all cases. I looked at the css and what I was doing seems like it should work, however, I can only see the properly styled calendar when I have the class set on the body tag.
Any other suggestions?
i've not looked recently,
i've not looked recently, but I'm willing to bet the _Calendar puts itself somewhere as an immediate descendant of the body, which is why the body tag needs the class. I'm curious as to how class="tundra" on the body tag affects anything else on your page?
No, I don't.
...but it points at something that is an issue with Dijit overall in terms of anything defined as either a popup or a dialog, and I'll start the discussion in the right direction regarding that (as dante mentions, those elements are appended directly to the body, outside of the original element, and style info needs to be kept intact).
Here is an interesting fact...
This is probably related to my post (http://www.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/datetextb...).
What is interesting is that the test page (/dijit/tests/form/test_DateTextBox.html) does NOT have the class explicitly given in the body tag and yet it works fine. This page includes _testCommon.js which has the following line in it:
if(!dojo.hasClass(dojo.body(),theme)){ dojo.addClass(dojo.body(),theme); }
I'm going to try this to see if it solves my problem w/o messing up my look and feel.
Wahooo! This worked for me!
I placed a little script in the body of my page and the calendar works. I didn't have to modify the body tag in my page template and I don't see any problems with my look and feel. Here is my code.
if(!dojo.hasClass(dojo.body(),theme))
{
dojo.addClass(dojo.body(),theme);
}
not a fix
all this does is programmatically sets body class=theme ; it's just like you specifically said
<body class="tundra">- it will still destroy look & feel if you have another class your body needs to be._testCommon
Yup, _testCommon has some complicated code for letting us switch themes on the fly, and that's why we don't have the class="tundra" in the body tag... I feel awkward about _testCommon because it sets a bad example for users, but OTOH it is convenient: all our tests can have ?theme=soria added to the URL and the theme switches.
known issue
We know about this issue (see #3300) but unfortunately I don't have a solution. I guess this is where our CSS-only approach to theming widgets breaks down.
Thanks for the information.
Thanks for the information. I will stick to adding the class to the body for now.
somewhat of a fix
I came up with the following when trying to deal with having a TooltipDialog (from Editor plugins) preserve the css theme of the Editor without having to set
<body class="theme">as my application requires the body class to be set to something else (releated to the look and feel of the site as a whole).Copying and pasting this from a thread I made... it might be useful for whomever to fixing the bug (although it doesn't deal with the major issue - that the Dialog is not a child of whatever creates it). BTW, how does one get an account for the dojo trac? I've done quite a few bug fixes and feature add-ons but have no way to add them to the Dojo source...
from another thread...
i managed to figure something out - although it doesn't solve the primary issue re the bug ticket (that the dialog won't be a child of the - for example - toolbar that creates it) it does solve the css theme issue.
add the following lines to the following files
dijit/Dialog.js:
... onOpen: function(/*Object*/ pos){ // summary: called when dialog is displayed // add the following: if (this.theme){ var greatNode = this.containerNode.parentNode.parentNode.parentNode; greatNode.innerHTML = '' + greatNode.innerHTML + ' ';
}
...dijit/_editor/Plugins/LinkDialog.js (or whatever plugin that uses a TooltipDialog)
... constructor: function(){ var _this = this; var messages = dojo.i18n.getLocalization("dijit._editor", "LinkDialog", this.lang); this.dropDown = new dijit.TooltipDialog({ title: messages.title, execute: dojo.hitch(this, "setValue"), onOpen: function(){ _this._onOpenDialog(); this.theme = _this._getEditorTheme(); // ADD THIS dijit.TooltipDialog.prototype.onOpen.apply(this, arguments); }, ... _getEditorTheme: function(){ return this.editor.class; }, ...Then so long as you define the editor with class="theme" (or programmatically with class: 'theme') any TooltipDialogs created by plugins will get wrapped in a
<div class="theme"> ... </div>block. Again, this doesn't deal with the major issue in the bug ticket, but it is at least a fix for the css class problem arising in my app (or any app where the body needs to be a different class than the dojo theme).No special trac account is
No special trac account is needed to open a new Ticket, describe the fix you are proposing, and, after Ticket submission, see the button to permit attaching diff files (against the SVN head source files) for modules for which you have a proposed fix or enhancement. Just use login/pw of guest/guest at http://trac.dojotoolkit.org/timeline.