GcMultiLineTextBoxコントロールの高さをCSSで設定するとレイアウトが崩れる – MESCIUS ナレッジベース

作成日: 2024/05/20 最終更新日: 2024/10/30

文書種別

制限事項

発生環境

対象バージョン：V4.0J以降

状況

修正済み

詳細

画面上に複数行テキスト（GcMultiLineTextBox）コントロールが配置され、その下にテキストやボタンなどが配置されているとき、GcMultiLineTextBoxの高さをCSSのheightで設定すると、コントロールの高さのみが変更されて、テキストやボタンなどが表示されなくなります。

V3.3J以前は、画面全体の高さが変更されていたため、テキストやボタンなどが表示されなくなることはありません。

例えば、下記のデモページのapp.component.htmlに、以下に記載したサンプルコードを貼り付けて実行すると、本現象を確認できます。

デモページ：

https://demo.mescius.jp/inputmanjs/demos/multiLineTextBox/furigana/angular

再現コードの例：

<style>
  ::ng-deep .multiline .gcim {
    height: 500px;
  }
</style>
<div>
    漢字入力:<br>
    <gc-multiline-textbox [className]="'multiline label'" [imeReadingStringKanaMode]="imeReadingStringKanaMode" [imeReadingStringAppend]="false"
        (onIMEReadingStringOutput)="furiganaText=$event.getIMEReadingString()" [(text)]="text"></gc-multiline-textbox><br>
    <p>ふりがな: <span id="furigana">{{furiganaText}}</span></p>
    <button (click)="clear()">クリア</button>
</div>

この現象は、V4.0Jで、コントロールの高さと幅を変更する機能（height／widthプロパティ）が追加されたことによる仕様の変更が理由で発生します。V4.0J以降では、heightプロパティをautoに設定しない場合はデフォルトの高さが優先に適用されて、CSSで設定したheightが正しく動作しなくなります。

回避方法

この問題は、InputManJS V5.0Jで修正されました。

修正版を適用しない場合の回避方法は次の通りです。

以下のいずれかの方法で回避可能です。

◆回避方法１

以下のコードのように、CSSを使用せずにGcMultiLineTextBoxのheightプロパティでコントロールの高さを設定します。

PureJS：

<script>
const gcMultiLineTextBox = new GC.InputMan.GcMultiLineTextBox(document.getElementById('gcMultiLineTextBox'), {
    IMEReadingStringAppend: false,
    height:500
});
</script>

Angular：

<div>
    漢字入力:<br>
    <gc-multiline-textbox [height]="500" [className]="'multiline label'" [imeReadingStringKanaMode]="imeReadingStringKanaMode" [imeReadingStringAppend]="false"
        (onIMEReadingStringOutput)="furiganaText=$event.getIMEReadingString()" [(text)]="text"></gc-multiline-textbox><br>
    <p>ふりがな: <span id="furigana">{{furiganaText}}</span></p>
    <button (click)="clear()">クリア</button>
</div>

React：

<div>
    <label>漢字入力: </label>
    <GcMultiLineTextBox
        height={500}
        className={'displayStyle'}
        imeReadingStringAppend={false}
        onIMEReadingStringOutput={handleIMEReadingStringOutput}
        onInitialized={(imCtrl) => { gcTextBoxRef.current = imCtrl; }}>
    </GcMultiLineTextBox>
    <p>ふりがな: <span id="furigana"></span></p>
    <button id="clearText" onClick={clearText}>クリア</button>
</div>

Vue3：

<div>
    <label>漢字入力:
        <GcMultiLineTextBoxComponent :height="500" :ime-reading-string-append="imeReadingStringAppend"
            :ime-reading-string-kana-mode="imeReadingStringKanaMode" v-model="text"
            @onimereadingstringoutput="imeReadingStringOutput" />
    </label><br>
    <p>ふりがな: <span>{{readingString}}</span></p>
    <button @click="clearText">クリア</button>
</div>

◆回避方法２

以下のコードのように、CSSの設定と合わせてGcMultiLineTextBoxのheightプロパティをautoに設定します。

PureJS：

<style>
  .gcim {
    height: 500px;
  }
</style>
<script>
const gcMultiLineTextBox = new GC.InputMan.GcMultiLineTextBox(document.getElementById('gcMultiLineTextBox'), {
    IMEReadingStringAppend: false,
    height:'auto'
});
</script>

Angular：

<style>
  ::ng-deep .gcim {
    height: 500px;
  }
</style>
<div>
    漢字入力:<br>
    <gc-multiline-textbox [height]="'auto'" [className]="'multiline label'"
[imeReadingStringKanaMode]="imeReadingStringKanaMode" [imeReadingStringAppend]="false"
        (onIMEReadingStringOutput)="furiganaText=$event.getIMEReadingString()" [(text)]="text"></gc-multiline-textbox><br>
    <p>ふりがな: <span id="furigana">{{furiganaText}}</span></p>
    <button (click)="clear()">クリア</button>
</div>

React：

<style>
  .gcim {
    height: 500px;
  }
</style>
<div>
    <label>漢字入力: </label>
    <GcMultiLineTextBox
        height={'auto'}
        className={'displayStyle'}
        imeReadingStringAppend={false}
        onIMEReadingStringOutput={handleIMEReadingStringOutput}
        onInitialized={(imCtrl) => { gcTextBoxRef.current = imCtrl; }}>
    </GcMultiLineTextBox>
    <p>ふりがな: <span id="furigana"></span></p>
    <button id="clearText" onClick={clearText}>クリア</button>
</div>

Vue3：

<style>
  .gcim {
    height: 500px;
  }
</style>
<div>
    <label>漢字入力:
    <GcMultiLineTextBoxComponent :height="'auto'" :ime-reading-string-append="imeReadingStringAppend"
        :ime-reading-string-kana-mode="imeReadingStringKanaMode" v-model="text"
        @onimereadingstringoutput="imeReadingStringOutput" />
    </label><br>
    <p>ふりがな: <span>{{readingString}}</span></p>
    <button @click="clearText">クリア</button>
</div>