前回、displayCheck（@ajax-todo-form.vmのdiv内）という変数に”none”という値が入っていると、どうやらカレンダーのサイズが200pxになるという点がわかりました。このパラメターの説明を、「追加フォームの「日時」にある、「指定しない」（日付を）というボタンの有無を決定するものです。」と述べたのですが、違うようです。
displayCheckはaipo.widget.DropdownDatepickerの
<span style=\"display:${displayCheck}\”>hogehoge</span>
という値で取られていて、こちらに述べられているように、表示方法を指定するスタイルシート属性であるdisplayのパラメターに取られていました。したがって、displayCheckという変数に “none”という値が入っていると、「要素及びその子孫の要素を表示せず、要素があるスペースには余白が生じない。」ことになります。
hogehogeの部分にスペースや余白が生じなくなった結果、200pxというデフォルト(@extend.css)になってしまっているのだと考えています。一方で “none” でない場合は、JavaScriptでの操作により、元々の200pxが上書きされるようです。この上書きというのは、Chromeで ”element.style” という要素で上書きされていることから想定しています。
解決方法は今の所３パターンあります。
一つはelement.styleによる上書きがjsのどこで行われているかを特定し、上書きの部分を消すことです。できればこれが最も好ましいと思います。が、なかなか見つかりません。.styleによって特定の値を与えているわけでもなく、似た例によると、どうやらjsで制御した結果だと思うのですが、かなり難航しています。
二つ目は元のCSSを変更することです。
.dijitCalendarContainer {
...
width: 200px !important;
...
}
と変更することで、JavaScriptによる上書き無効にできます。しかし、変えなくてはならない場所で変えられないので、どこで変なことなるかわからず、かなり雑な方法となってしまうようです。
三つ目の方法は、display:noneの代わりにvisibility:hiddenを使うことです。こちらによると、display:noneが要素を完全に無視する一方で、visibility:hiddenは見えない状態にするだけです。ただ、displayCheck=”none” を”hidden”に変えると一見もとの設定のまま統一できているのですが、幅が広い方に統一されてしまいます。
この幅の統一の問題は[todo,project,gbdb][schedule, note, report, blog]周辺で割れているようです。次回こそは解決したいです！
