textコンポーネントを利用しおります、幅を調整したいですが、教えていただきたいです。
宜しくお願い致します。
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のアップデートにより機能しなくなる可能性があります。
江田さん
いつもお世話になっております。
幅の変化の確認できました。ありがとうございました。
.kuc-text__groupの部分が抜きで、幅の変化ができるようですが、
この部分の意味はなんでしょうか。教えいただけないでしょうか。
宜しくお願い致します。
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さんと私の環境で挙動が異なる理由は正確にはわかりませんが、残しておいてデメリットはないかと思います。
江田さん
いつもお世話になります。
詳しいご説明ありがとうございました。
＞.kuc-text__groupの幅も明記しないとテキストボックスの幅は変更されませんでした。
その通りです。
先の説明が不十分でした。申し訳ございません。
こちらの仕様はtextの幅を100pxにすることです。
現在は下記のｃｓｓです。
#kuc_text {
width:100px;
min-width:100px;
}
#kuc_text.kuc-text\_\_group{
width:100%;
}
ここの環境では問題ないようです。
このままでは不具合が起きる可能性があるでしょうか。
もしあるとしたらどう直せばよろしいでしょうか。
ご教授いただければ幸いです。
wuさん
お世話になっております。
幅変更が動作しなくなる可能性があるのは、もともと.kuc-text__groupの設定がないと動作しなかった私の環境などだけですね。
kintone UI Componentがバージョンアップにより、.kuc-text__groupというクラス名を使用しなくなった場合に、私の環境では幅変更が動作しなくなります。
存在しない要素についてのCSS設定が残っていたとしても、他の要素への影響はないので、さほど心配は必要ないかと思います。
江田さん
いつもお世話になります。
ご回答ありがとうございました。
.kuc-text__group部分を入れたほうが無難だと理解致しました。
先の文章で私の説明が悪かったです。
混乱させてしまい申し訳ございません。
＞＞ケース0
#kuc_text {
width:500px;
}
.kuc-text__groupの設定がないと動作しないです
＞＞ケース１
#kuc_text {
width:100px;
}
.kuc-text__groupの設定に関係なく動作します
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。