[jQuery UI] Resizableのgridがうまくいかないときは

 なんかこうResizableのgridで指定した数値と、実際にリサイズされた時の大きさって異なることがあるんですね。いやあったんです。例えば128pxのdivのgridを32にしてるのに、大きさが32の倍数にならない、なんてことが。よく見るとたまに28pxとか30pxとかで動いてて、特に初回に動かした時におかしなサイズにリサイズされてしまうようです。

 結果から言うと、cssで「box-sizing」が「border-box」になってるとダメみたいです。しょうがないのでボーダーやパディング分のサイズを自分で計算して「box-sizing」は「content-box」にしたらうまく動きました。

 ということで、jQuery UIのResizableのgridを利用するときは注意したほうがいいかもしれませんね。まぁググってもヒットしなかったのできっとそういうシチュエーションはあんまりないんでしょうけど。

 そんな感じのメモ。

1 件のコメント :

  1. ありがとうございます。僕も同じことで悩んでいました。でも計算するの大変ですよね。僕が今作成中のものでは、Resizingだけでなく、Draggableも使うので 何だか計算してもうまくいきません

    返信削除