DropdownDatepickerのカレンダーの幅の変更(2)

kisyaman 31views 更新:2016年11月9日

前回、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” という要素で上書きされていることから想定しています。

解決方法は今の所3パターンあります。

一つは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]周辺で割れているようです。次回こそは解決したいです!

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません