understanding logic of dijit css and styles

Question

Hi,

I am trying to use dijit.InlineEditBox. I have put the following code in my HTML, using the example in the dojo docs:

<script type="text/javascript">
    dojo.require("dijit.InlineEditBox");
    dojo.require("dojo.parser");
    dojo.require("dijit.form.TextBox");

    function editableHeaderOnChange(id, arg){
        alert("details changed with id " + id + " and arguments "+arg);
    }
</script>

...
<span id="myText" dojoType="dijit.InlineEditBox" onChange="editableHeaderOnChange(this.id,arguments[0])"
autoSave="true" title="My Text">click to edit me</span>

I am using tundra theme. It works, however it doesn't look so good. The widget has its own style, which doesn't fit my CSS. I used firebug to locate the source of the problem. The widget creates many nested div/span elements, each has it's own style (element style in firebug):

<span
id="dijit__InlineEditor_0"
class="dijitReset dijitInline"
style="margin: 0px; position: absolute; visibility: hidden; display: block; opacity: 0;" ...>

<input type="text" autocomplete="off" 
class="dijit dijitReset dijitLeft dijitTextBox"
id="dijit_form_TextBox_0"
style="line-height: 20px; font-weight: 400; font-family: Trebuchet MS,Helvetica,Arial,Verdana; font-size: 14.5167px; font-style: normal; width: 100%;">
...>
</span></span>

(showing only the relevant parts...)

to get the visual that I want, which will not break to a newline, I need to change the width of dijit_form_TextBox_0** to 50%, and the positioning of dijit__InlineEditor_0 to display: inline**;

or to change the positioning of everything (most of my layout is floated, so position: absolute doesn't fit)

I cannot address those span elements in my css to change the properties, because the element.style has priority, of course.

I don't understand the logic in this system... why is dijit generating the style directly inside the element? how can I change these properties?

Thanks Tom

Answer 1

This will give you everything you need to create your own theme, just like Tundra.

http://docs.dojocampus.org/dijit-themes

Added:

Dijit will try to use your inline styles like width and height to determine the proper settings for its own internal elements. So you can write

 <span style="width:200px" id="myText" dojoType="dijit.InlineEditBox" onChange="editableHeaderOnChange(this.id,arguments[0])" autoSave="true" title="My Text">click to edit me</span> 

and see if it works. Not sure about stuff like fonts and line-heights, that sounds like it should be up to the theme. Maybe it copies those into inline styles, for whatever reason. Just try changing it and see what happens.

I'm not an expert on the logic of things either. I've dabbles a couple of times with it with some success. All I can tell you is it's not impossible. Sorry for the poor help.