Kintone Portal Designを使うと「未処理」パネルが正しい位置に来ない

[Legacy_Account2193 (C.Tag（Legacy Account）)]

カスタマイズ初心者です。
Kintone Portal Designerを使ってポータル画面をカスタマイズしています。

https://maptomo.com/mt-kinportal

↑のテンプレートを流用し、ポータルにタブ切り替えをつけているのですが、「未処理」のパネルが正常な位置(右上)に表示されず、
枠外というか、画面最下部に追い出されたような形で表示されてしまいます。

■HTML
<div class=“designportal designportal-advanced”>
<div class=“advanced-container”>
<div id=“tabs” class=“advanced-tab-container”>
<button id=“tab1” role=“tab” class=“advanced-tab advanced-tab–active” type=“button” aria-expanded=“true”>お知らせ</button>
<button id=“tab2” role=“tab” class=“advanced-tab” type=“button” aria-expanded=“true”>問合せアプリ</button>
<button id=“tab3” role=“tab” class=“advanced-tab” type=“button” aria-expanded=“true”>依頼・申請アプリ</button>
<button id=“tab4” role=“tab” class=“advanced-tab” type=“button” aria-expanded=“true”>その他</button>
<!-- <button id=“tab3” role=“tab” class=“advanced-tab” type=“button” aria-expanded=“true”>Yourself</button>–>
</div>
<div class=“advanced-panel-container”>
<div class=“advanced-panel-contents mt-contents advanced-panel-contents–active”>
<div class=“st-left”></div>
<div class=“st-right”></div>
</div>
<div class=“advanced-panel-contents mt-contents”>
<div class=“gird-container” id=“gird-container”></div>
<p style=“line-height:800px;”> </p>
</div>
<div class=“advanced-panel-contents mt-contents”>
<div class=“gird-container” id=“gird-container2”></div>
<p style=“line-height:800px;”> </p>
</div>
<div class=“advanced-panel-contents mt-contents”>
<div class=“gird-container” id=“gird-container3”></div>
<p style=“line-height:800px;”> </p>
</div>
<!–<div class=“advanced-panel-contents mt-contents”>
<h3 class=“advanced-heading1”>At this opportunity, try customizing your own portal.</h3>
<p style=“line-height:800px;”> </p>
</div>
–>
</div>
</div>
</div>

■JavaScript(抜粋)
var drawStandardVeiw = function(viewType) {
var st_left = document.getElementsByClassName(‘st-left’);
var st_right = document.getElementsByClassName(‘st-right’);
var ocean_portal_assigned = document.getElementsByClassName(‘ocean-portal-assigned’);

switch(viewType){
case ‘portal.show’:
st_left[0].appendChild(document.getElementsByClassName(‘ocean-portal-body-left’)[0]);
st_right[0].appendChild(document.getElementsByClassName(‘ocean-portal-body-right’)[0]);
break;

case ‘mobile.portal.show’:
st_left[0].appendChild(document.getElementsByClassName(‘gaia-mobile-v2-portal-announcement’)[0]);
st_left[0].appendChild(document.getElementsByClassName(‘gaia-mobile-v2-portal-appwidget’)[0]);
st_left[0].appendChild(document.getElementsByClassName(‘gaia-mobile-v2-portal-spacewidget’)[0]);
break;

default:
break;
}
}

出力結果を見ると、下記のように<div class=“ocean-portal-assigned”></div>の間が抜け落ちており、
ずっと下の方に、その間に出力されるべき部分が出力されています。

■出力結果(抜粋)
<div class=“st-right”>
<div class=“ocean-portal-body-right”>
<div class=“ocean-portal-widget”>
<div class=“ocean-portal-assigned”></div>
</div>
<div class=“ocean-portal-widget”>
<div class=“ocean-portal-space”>
<div>
<div class=“gaia-argoui-widget”>
<div class=“gaia-argoui-widget-header gaia-argoui-widget-header-icon” style="background-image: url(…

(中略)

<div class=“gaia-argoui-widget”>
<div class=“gaia-argoui-widget-header gaia-argoui-widget-header-icon” style=“background-image: url("https://static.cybozu.com/contents/k/image/argo/uiparts/widget/assignedToMe_56.png&quot;); background-position: left top; background-repeat: no-repeat;”><h3 class=“gaia-argoui-widget-title”>未処理</h3></div><div class=“gaia-argoui-widget-menu” style=“display: none;”> (以下略)

どうすれば、元の位置に表示するように出力できるでしょうか

[Legacy_Account980 (juridon（Legacy Account）)]

こんにちは！

> ポータルにタブ切り替えをつけているのですが、「未処理」のパネルが正常な位置(右上)に表示されず、
枠外というか、画面最下部に追い出されたような形で表示されてしまいます。

スクリーンショットを貼っていただいたり、
コード（HTMLとJavaScript）内に「未処理」パネルの部分が見当たらないようなので、
「未処理」の部分を書いた部分のコードを添付いただけると回答も付きやすいかと思います。

[Legacy_Account2193 (C.Tag（Legacy Account）)]

スミマセン。自己解決しておりました。。

◆HTML

<divclass=“advanced-panel-container”>

   <divclass=“advanced-panel-contents mt-contents advanced-panel-contents–active”>

    <divclass=“st-main”></div>

</div>

◆JavaScript

var drawStandardVeiw =function(viewType){

var st_main = document.getElementsByClassName(‘st-main’);

 

switch(viewType){

case’portal.show’:

st_main[0].appendChild(document.getElementsByClassName(‘ocean-portal-body’)[0]);

とすることで解決しました!

 

[Legacy_Account297 (青山昌司（Legacy Account）)]

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

同じ箇所でつまづいています。

未処理が枠から外れ、すべてのタグの下部（枠外）に表示されます。

上記参照に修正しましたが st_leftとst_rightが消えてしまうだけで解決できませんでした。

アドバイスが御座いましたらご教示いただけないでしょうか？

よろしくお願いいたします。

 

HTML

<div class="advanced-panel-contents mt-contents advanced-panel-contents--active">

<div class="st-left"></div>

<div class="st-right"></div>

<div class="st-main"></div>

JS

var drawStandardVeiw = function(viewType) {

var st_main = document.getElementsByClassName('st-main');

var st_left = document.getElementsByClassName('st-left');

var st_right = document.getElementsByClassName('st-right');

switch(viewType){

case'portal.show':

st_main[0].appendChild(document.getElementsByClassName('ocean-portal-body')[0]);

//st_left[0].appendChild(document.getElementsByClassName('ocean-portal-body-left')[0]);

//st_right[0].appendChild(document.getElementsByClassName('ocean-portal-body-right')[0]);

break;

 

[Legacy_Account2193 (C.Tag（Legacy Account）)]

私のコードとほぼ同じですが、しいて言えば、HTMLからもJavaScriptからも、st_left,st_right関連の箇所をすべて削除してしまったらどうでしょうか。

[Legacy_Account297 (青山昌司（Legacy Account）)]

C.Tagさま

 

お世話になっております。ご連絡ありがとうございます。

JavaScriptからは削除したんですがうまくいきませんでした。

html側はモバイル側で利用していたので残していました。。。

一度すべて削除してみたいと思います。

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

[yuzawa]

大変今更ですが、青山様の状況と同様で、st_leftとst_rightが消えてしまうだけでしたが、解決できたので書いておきます。

GitHub - maptomo/mt-kinportal

GitHub上の「クイックスタートパート1」の手順を行ってから、 C.Tag様が書いて下さっている修正をすることで、未処理が正常な位置に表示され解決しました。

ただなぜか、画面上部にだけあるはずのタブが、画面下部にも表示されるようにはなりました…
けどそのことは使用上は問題ないのでスルーしようと思っております…。