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