dijit.InlineEditBoxを使用しようとしています。dojoドキュメントの例を使用して、次のコードをHTMLに配置しました。
<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>
ツンドラのテーマを使用しています。動作しますが、見た目はあまり良くありません。ウィジェットには独自のスタイルがあり、私のCSSには適合しません。問題の原因を突き止めるためにfirebugを使用しました。ウィジェットは多くのネストされたdiv/span要素を作成し、それぞれに独自のスタイル(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>
(関連する部分のみを表示しています...)
改行に分割されない目的のビジュアルを取得するには、dijit_form_TextBox_0 **の幅を50%に変更し、dijit__InlineEditor_0の位置を次のように表示する必要があります。inline**;
またはすべての位置を変更します(私のレイアウトのほとんどはフロートしているので、位置:絶対は適合しません)
もちろん、element.styleが優先されるため、cssでこれらのスパン要素をアドレス指定してプロパティを変更することはできません。
このシステムのロジックがわかりません...dijitが要素内で直接スタイルを生成するのはなぜですか?これらのプロパティを変更するにはどうすればよいですか?
ありがとうトム