understanding logic of dijit css and styles
- by Tom
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
