新規投稿
フォローする

kintone UI Component v1を利用時 textの幅の調整方法

textコンポーネントを利用しおります、幅を調整したいですが、教えていただきたいです。

宜しくお願い致します。

 

 

 

0

6件のコメント

Avatar
江田篤史

wuさん

お世話になっております。

textコンポーネントのstyleだけでなく、子要素のstyleも変更する必要があるので、JavaScriptだけで実現するのは難しそうですね。

JavaScript側でidかclassNameをつけておき、CSSでstyleを変更するのが容易かと思います。

JavaScript

var text = new Kuc.Text({
  id: 'kuc_text',
});
kintone.app.getHeaderMenuSpaceElement().appendChild(text);

CSS

#kuc_text {
width: 500px;
}
#kuc_text .kuc-text__group {
width: 100%;
}

.kuc-text__groupというkintone UI Componentのclass名に依存しているので、kintone UI Componentのアップデートにより機能しなくなる可能性があります。

江田篤史により編集されました
0
Avatar
wu

江田さん

いつもお世話になっております。

幅の変化の確認できました。ありがとうございました。

 

.kuc-text__groupの部分が抜きで、幅の変化ができるようですが、

この部分の意味はなんでしょうか。教えいただけないでしょうか。

 

宜しくお願い致します。

0
Avatar
江田篤史

wuさん

お世話になっております。

> .kuc-text__groupの部分が抜きで、幅の変化ができるようですが
左様でしたか。
今一度確認しましたが、私の環境ですと、.kuc-text__groupの幅も明記しないとテキストボックスの幅は変更されませんでした。
.kuc-text__groupはtextコンポーネントの子要素です。
.kuc-text__groupがinline-block要素かつ、.kuc-text__groupの子要素の幅には相対値しか指定されていないため、.kuc-text__groupの幅の明記が必要と判断しました。
https://www.itra.co.jp/webmedia/what-is-inline-block.html

wuさんと私の環境で挙動が異なる理由は正確にはわかりませんが、残しておいてデメリットはないかと思います。

0
Avatar
wu

江田さん

いつもお世話になります。

詳しいご説明ありがとうございました。

 

>.kuc-text__groupの幅も明記しないとテキストボックスの幅は変更されませんでした。

その通りです。

先の説明が不十分でした。申し訳ございません。

 

 

こちらの仕様はtextの幅を100pxにすることです。

現在は下記のcssです。

#kuc_text {
width:100px;
min-width:100px;
}
#kuc_text .kuc-text__group{
width:100%;
}


ここの環境では問題ないようです。

このままでは不具合が起きる可能性があるでしょうか。

もしあるとしたらどう直せばよろしいでしょうか。

ご教授いただければ幸いです。

 

 

wuにより編集されました
0
Avatar
江田篤史

wuさん

お世話になっております。

幅変更が動作しなくなる可能性があるのは、もともと.kuc-text__groupの設定がないと動作しなかった私の環境などだけですね。

kintone UI Componentがバージョンアップにより、.kuc-text__groupというクラス名を使用しなくなった場合に、私の環境では幅変更が動作しなくなります。

存在しない要素についてのCSS設定が残っていたとしても、他の要素への影響はないので、さほど心配は必要ないかと思います。

0
Avatar
wu

江田さん

いつもお世話になります。

ご回答ありがとうございました。

.kuc-text__group部分を入れたほうが無難だと理解致しました。

 

先の文章で私の説明が悪かったです。

混乱させてしまい申し訳ございません。

 

>>ケース0

#kuc_text {
width:500px;
}

.kuc-text__groupの設定がないと動作しないです

 

>>ケース1

#kuc_text {
width:100px;
}

.kuc-text__groupの設定に関係なく動作します

 

 

 

 

1
サインインしてコメントを残してください。