こんにちは、SharePoint サポートの森村です。
Project Online の PWA (Project Web App) 関連 Web パーツをサイトのページに追加した場合に、条件によっては追加した Web パーツの表示が崩れる現象が発生する場合があります。
今回の投稿では、その現象への対処方法についてご案内いたします。(なお、Project Server 2013 では本現象は発生しません。)

Project Online をご利用いただいている場合、PWA 関連の Web パーツを SharePoint Online 上のサイトのページに追加することが可能となります。
ここで、Project Web App ではない Web パーツ (グリッドでの編集機能を保持するもの)  が配置されている既存のページがあると仮定します。
このページを編集して、Project Web App の Web パーツを追加で配置した場合に本現象が発生します。

現時点で判明している詳細な発生条件は下記となります。

・前提条件

下記のカテゴリが [アプリ] の Web パーツがページ内に既に存在している ([アプリ] の内容を表示する Web パーツ)

・発生条件

ページの編集を実施して、下記のカテゴリが [Project Web App] の Web パーツを追加する

例えば、PWA サイト上でプロジェクトを発行時に作成されるプロジェクト サイトのページの場合、前提条件のうち [ドキュメント ライブラリ] のWebパーツが存在している状態となりますため、[詳細] 等の Project Web App の Web パーツを追加することで現象が発生します。

プロジェクト サイトのページに Project Web App の [詳細] Web パーツを追加した場合の表示

原因について

========

Web パーツをページに追加した際、必要なスタイル シート等を計算し、表示を行っておりますが、
上記の条件の場合、グリッドを表示するのに必要なスタイル シートが読み込まれないため、表示が崩れる現象が発生します。

この動作について対処方法をご案内します。

対処方法 : グリッドのスタイル シート情報を追加する 

スクリプト エディター Web パーツを使用し、ページ内に本来追加されるべきスタイル シート情報をページ内に加えることで、表示が正常に行われます。

手順

====

1. 該当のサイトを管理者権限を持つアカウントを使用し表示します。
2. 右上の歯車のアイコンをクリックし、[ページの編集] メニューを選択します。
3. Web パーツを追加したい部分にある [Web パーツの追加] をクリックします。
4. Web パーツの一覧が上部に表示されるので、ここから [カテゴリ] 内の [メディアおよびコンテンツ] を選択し、右側に表示された [スクリプト エディター] を選択し、右側に表示されている [追加] ボタンをクリックして Web パーツを追加します。
   
5. [スクリプト エディター] と表示されている Web パーツが追加されます。右側に表示されている [スニペットを編集] をクリックします。
   
6. [埋め込み] というダイアログが表示されます。「スクリプト、または埋め込みコードを以下に貼りつけます。」のテキスト ボックス内に、下記のスタイル シート情報をコピーして貼り付けを行い、[挿入] をクリックします。
   
   <link rel="stylesheet" type="text/css" href="/_layouts/15/styles/Themable/jsgrid.css"/>
   
   
7. リボン メニューの [ページ] タブ内にある [編集の終了] をクリックします。

この作業の後に、グリッドを使用する Project Web App の Web パーツ追加を行った場合は、Web パーツの表示が正常に行われます。

対処方法実施後の Web パーツの表示

いかがでしたか。

今回の投稿は以上です。