dhtmlXFormのFieldsetで罫線を表示しないようにする

こんにちは。beaglesoftの真鍋です。

このところDHTMLXに関するエントリーを続けています。とても素晴らしいライブラリなのですが、はまりどころもあるため少しでもお役に立てればと思ってはまったところをまとめています。

今回はdhtmlXFormの見栄えの設定についてです。

事象と対応方法について

dhtmlxFormでFieldsetを利用しているときに項目の外側に罫線が表示されます。この罫線を表示しないようにしたいと思います。

変更適用前

dhtmlx_field1

今回のように、見え方を修正したいことは結構あります。dhtmlXGridでもヘッダーやフッターを設定したりするときや、行の高さを変更したいなどなど、いろいろあります。今回の場合にはCSSを加工することで対応できました。

    form.attachEvent("onXLE", function(){
         $(".dhxform_obj_dhx_terrace fieldset.dhxform_fs").css("border", '0')
         $("legend").css("border-bottom", 0)
    });

罫線は .dhxform_obj_dhx_terrace の fieldset.dhxform_fs に設定されているものと legend に設定されているものの二種類に分かれます。そのため、それぞれの罫線に対応するCSSで線の太さを0にすることで非表示としています。

なお、ここ重要ですが、非表示とするタイミングはdhtmlXFormの描画完了時に発火するonXLEイベントで設定するようにしてください。これ以外のイベントでは描画対象の情報がロードされていないことがありうるため、削除対象のCSSが読み込まれておらず設定が反映されないことがあります。

変更適用後

dhtmlx_field2

注意事項

この対応方法は、DHTMLXのフォーラムなどに記載があったわけではないのですが、生成されるHTMLを確認して対応しました。気になる方は直接対応方法を確認してみてください。