新規投稿
フォローする

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

カスタマイズ初心者です。
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;">&nbsp;</p>
</div>
<div class="advanced-panel-contents mt-contents">
<div class="gird-container" id="gird-container2"></div>
<p style="line-height:800px;">&nbsp;</p>
</div>
<div class="advanced-panel-contents mt-contents">
<div class="gird-container" id="gird-container3"></div>
<p style="line-height:800px;">&nbsp;</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;">&nbsp;</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(&quot;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;"> (以下略)

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

0

5件のコメント

Avatar
juridon

こんにちは!

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

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


0
Avatar
C.Tag

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

◆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]);

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

 

C.Tagにより編集されました
1
Avatar
青山昌司

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

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

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

上記参照に修正しましたが 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;


 

青山昌司により編集されました
0
Avatar
C.Tag

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

0
Avatar
青山昌司

C.Tagさま

 

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

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

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

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

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

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