Fieldsetで表題と罫線がアンバランスなのを修正する

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

弊社ではDHTMLXというJavaScriptのライブラリをTypeScriptを利用してWebアプリケーションを作成しています。そんな中で出てきた技術情報を少しずつ公開できればと思っています。

dhtmlxFormのFieldsetを利用する

dhtmlxにはさまざまなライブラリがありますが、特によく利用するものとしてdhtmlxFormがあります。これは入力フォームを作成するときには欠かせないライブラリになっています。

このdhtmlxFormですが、入力フォームを作成するためにいろいろな部品が提供されています。そんな中でも今回はFieldsetを利用したときにタイトルの罫線がずれることがあるので其の対応方法についてまとめました。

事象

入力フォームを作成するときには、データのまとまり毎にカテゴライズを行います。そのようなときにFieldsetを利用します。具体的には次のような入力画面です。

dhtmlxField1.png (7.7 kB)

ごくごく普通の入力画面です。しかし、赤枠で囲った部分を見てみると罫線の表示に違和感があります。特に、右の端は線が重なっているものの若干ずれていたりします。

まぁ、些細なことなので気にしなければいいという話もあるのですが、もう少しなんとかならないかとも思います。

対応してみた

そこで、とりあえずいろいろと試してみたのですがこのようになりました。

dhtmlxField2.png (8.2 kB)

線の重なりがずれたりすることなくそれらしく見えていると思います。

変更前

dhtmlxField1_n.png (6.9 kB)

変更後

dhtmlxField2_n.png (6.5 kB)

対応方法

対応方法ですが、CSSを修正することになります。といっても、本体のCSSを修正するのではなく画面描画後にCSSを修正するのでたいしたことではありません。

// windowの作成
const dhxWins = new dhtmlXWindows();
const window = dhxWins.createWindow("facility", 20, 30, 650, 700);

// formのアタッチ
const form = window.attachForm();

// データのロード
form.loadStruct(this.getFormJson(isEdit), () => {
    $(".fs_legend").css("width", 75);
});

loadStructメソッドの第2引数には完了時の処理を定義できるので、その中でCSSを変更しています。対象となるクラスはfs_legendでこの幅を文字数に合わせて調整すると表示が変更されます。