カスタマイズ初心者です。
初歩的な質問になるかと思いますが、ご教示お願いいたします。
Kintone Portal Designerの「advanced-3tabs」を利用してポータル画面をカスタマイズしたいと考えています。
埋め込み用タグをHTMLに記述しましたが、下記のような事象が起こっています。
<iframe～ を追加したのみで、他のコードは触っていません。
Tab1・・・グラフ表示される
Tab2・・・「グラフを表示できません。表示領域が小さすぎます。」のメッセージ
<div class=“designportal designportal-advanced”>
<div class=“advanced-container”>
<div id=“tabs” class=“advanced-tab-container”>
<button role=“tab” class=“advanced-tab advanced-tab–active” type=“button” aria-expanded=“true”>Tab1</button>
<button role=“tab” class=“advanced-tab” type=“button” aria-expanded=“false”>Tab2</button>
<button role=“tab” class=“advanced-tab” type=“button” aria-expanded=“false”>Tab3</button>
</div>
<div class=“advanced-panel-container”>
<div class=“advanced-panel-contents advanced-panel-contents–active”>
<div class=“advanced-panel-contents-group”>
<section class=“advanced-panel-contents-unit”>
<h3 class=“advanced-heading1”>Heading1</h3>
<h4 class=“advanced-heading2”>Heading2</h4>
<p class=“advanced-text”>This is an advanced template of the portal design project. This is an advanced template of the portal design project. This is an advanced template of the portal design project. This is an advanced template of
the portal design project.
</p>
<iframe width=“800” height=“600” frameborder=“0” src="https://xxxxxxx.cybozu.com/k/42/report/portlet?report=2023&chartType=column&stackType=clustered"></iframe>
</section>
------ 中略 -------
<div class=“advanced-panel-contents”>
<h3 class=“advanced-heading1”>Heading1</h3>
<h4 class=“advanced-heading2”>Heading2</h4>
<iframe width=“800” height=“600” frameborder=“0” src="https://xxxxxxx.cybozu.com/k/42/report/portlet?report=2023&chartType=column&stackType=clustered"></iframe>
<p class=“advanced-text”>Tab2 is under construction.</p>
<p style=“line-height:500px;”> </p>
</div>
------ 中略 -------
</div>
こんにちは。
Tab2の場合、
iframeを埋め込んだ <div class=“advanced-panel-contents”>のcssを確認したところ、
display: none 指定されていて、iframe自体が非表示になっているので、
それがグラフが表示されない原因だと思います。
自分の環境でdisplay: none 指定を外したらグラフが表示されたので、是非試してみてください。
ご回答ありがとうございます。
早速試してみたところ、確かにTab2でもグラフ表示されました。
ただ、すべてのTabに、Tab1～Tab3の情報が出力されてしまいました。
下記css以外にもどこか修正が必要でしょうか。勉強不足で申し訳ありません。。
.designportal-advanced .advanced-panel-contents {
padding:40px;
clear:both;
overflow:hidden;
color: #333333;
}
いえいえ、自分の確認が足りなかったです…
クラスadvanced-panel-contents–activeの方にdisplay: block;の指定があったので、
下記cssは元のまま変更せず、
.designportal-advanced .advanced-panel-contents {
display: none;
padding:40px;
clear:both;
overflow:hidden;
color: #333333;
}
tab2のiframeを埋め込んだ<div class=“advanced-panel-contents”>に
tab1と同じようにadvanced-panel-contents–activeクラスを追加すれば表示できました↓
<div class=“advanced-panel-contents advanced-panel-contents–active”>
おはようございます。
教えていただいたようにtab2のクラスに追加してみました。
<div class=“advanced-panel-contents advanced-panel-contents–active”>
・初期表示されるtab1に、グラフを含むtab1とtab2の情報が出力される
・tab2はグラフを含むtab2だけの情報
・tab1に戻ると、tab1だけの情報
このような状況です。
再度確認したところ、tab1以外のtabでグラフが表示されない原因が分かりました。
おそらく、最初のページ読み込みで、
tab1以外のタブは css が display: noneになっている状態でiframeが読み込まれたのが原因です。
※tab1にはadvanced-panel-contents–activeクラスを当てているのでtab1のみグラフ表示されます。
解決策の一例ですが、
tab1以外のタブでiframeを表示させたい場合、
最初のページ読み込みではなく、そのtabをクリックしてからiframeを差し込む処理にすれば、
表示されるようになると思います。
変更例
ーーーーーーーーーーーーーーーーーーーーーー
・html:
tab1以外にグラフを表示させたいタブの<div class=“advanced-panel-contents”>にidを追加
例えば<div id=“tab2” class=“advanced-panel-contents”>
・js:
下記のようにjsを変更：
//tab2がクリックされたときにiframeを差し込む処理を追加
**var addIframe = function(tabNumber) {**
**if (tabNumber === 1) {** //tab2がクリックされた場合
**var iframe ='\<iframe width="800" height="600" frameborder="0" src="https://〇〇〇〇.cybozu.com/k/63/report/portlet?report=5520204&chartType=line"\>\</iframe\>';**
**document.getElementById("tab2").innerHTML = iframe;**
**}**
**}**
var handleClick = function (evt) {
removeAllButtonActive();
evt.target.classList.add('advanced-tab--active');
removeAllButtonExpanded();
evt.target.setAttribute('aria-expanded', 'true');
var tabNumber = getTabNumber(evt.target);
** addIframe(tabNumber); //一行追加**
....
}
wenxit1218様、ありがとうございます！
今回ご提示くださった例を参考に変更してみましたところ、tab2にグラフが表示されました！
ただ、これだとHTMLに記述している文字は消えてしまうのですね。
文字列を入れたり複数のグラフをtab2に表示させる方法が分からず、JavaScript側で書いてみようかと色々試してみましたが、私のHTML,CSS,JSの知識では解決できませんでした。
もっと自分でも勉強してみるつもりですが、引き続きご教授いただけましたら幸いです。
確かに、innerHTML使うと上書きになるので、文字は消えてしまいますね…
上書きではなく、htmlを挿入するメソッドinsertAdjacentHTML を使えば、
既存要素を残したままiframeを挿入できます。イメージとしてはこんな感じです↓
document.getElementById("tab2").insertAdjacentHTML('afterbegin',iframe);
htmlを挿入する箇所を指定する方法は、詳しくはこちらご参照ください：
https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML
wenxit1218様
返信が大変遅くなり申し訳ありません。
insertAdjacentHTMLでは、タブをクリックするたびにグラフがinsertされてしまうのですね。
一旦グラフはタブ１のみに表示させるようにし、他のタブにも反映できるよう引き続き勉強したいと思います。
色々ご教示くださりありがとうございました。