編集
最初にこの質問を投稿して以来、問題を解決するためにさらにいくつかの道をたどりました。まだ解決されていませんが、私の質問は異なります。元の質問は以下にあり、その下にセクションを追加して更新します。
元の質問
私は Rails 4 アプリケーションに取り組んでおり、JavaScript と Chartkick gem に問題があります。
ユーザーがアイコンをクリックすると、要素がアイコンの下にドロップダウン/ページに表示され、アイコンが右向き矢印から下向き矢印に切り替わるようにする 2 つの JavaScript 関数があります。コードは次のとおりです。
function ReverseDisplay(d)
{
if(document.getElementById(d).style.display == "none")
{
document.getElementById(d).style.display = "block";
}
else
{
document.getElementById(d).style.display = "none";
}
}
$(function() {
$('.toggle-icon').click(function() {
$(this).find('i').toggleClass('fa-arrow-circle-o-right fa-arrow-circle-o-down');
});
});
そしてハムル：
%a{href: "javascript:ReverseDisplay('toggle-stats#{item.id}')", class: 'toggle-icon'}
%i.fa.fa-arrow-circle-o-right
%div{id: "toggle-stats#{item.id}", style: "display: none;"}
= the items to be displayed
できます。ただし、次のように、ドロップダウンするアイテムがページの全幅を占めることを期待しています。
しかし、トグル アイコンを最初にクリックすると、次のように押しつぶされて表示されます。
次に、ブラウザのサイズを少し変更すると、グラフが全幅に飛び出し、そこから何をしてもそのままになります。このチャートは Chartkick から gem として提供されているため、生成されたマークアップを取得する方法がわかりません。ブラウザで生成された html には次の行があります。
<div dir="ltr" style="position: relative; width: 300px; height: 300px;">
ブラウザのサイズを変更したときに変更width: 300pxされるのはどこですか。width: 1000pxブラウザのサイズを永続的または大幅に変更する必要はありません。最初にその幅が 1000px に変更されると、ページを更新してアイコンをクリックしてグラフを再度切り替えると、300px に戻ります。この div にフックする方法がわかりません。この div は gem によって生成されたものであり、それにクラスを追加する方法がわからないからです。親要素のすべての子が であることを保証する親要素にスタイリングを追加しようとしましたがwidth: 100%、それは何もしません。
とにかく、クラスを追加することがここでの解決策だとは思いません。私はJavaScriptが信じられないほど上手ではありません. 私は、すべてのフロントエンド作業全体にまったく慣れていません。ここで何が起こっているのですか? また、これらのチャートを切り替えたときに常にページの全幅になるようにするにはどうすればよいですか?
注: Chrome でこれをテストしています。Firefoxでテストしましたが、同じことを行います。
OK、これは動的なアイテム ID を取得するために JavaScript 関数を使用しているという事実と関係があるのではないかと考え始めています。 IDが何であるかがわからないため、各IDに対するjQuery関数は不可能に思えます。
ただし、jQuery 呼び出しを削除しましたが、問題は解決しません。
スタック オーバーフローの質問ボックスをラバーダッキングしても、まだ私の質問に答えられていないときの 1 つです。だから私は提出し、ここで外部の助けを期待すると思います. :/
調整された質問
Chartkick の Github の問題にあるこの質問は、私を別の道に導きました。解決策は、必ずしもグラフのスタイルを変更しようとすることではありません。代わりに、ブラウザー ウィンドウのサイズが変更されるとグラフが自動的に再生成されるため、サイズ変更イベントをトリガーしようとしています。これが問題の原因であり、解決策がどこにあると思われるかの両方です。
私のコード:
.row
.col-sm-12
%h3.title-block.second-child
Stats by Video
.panel-groupd#faqList
- @claim.presenter.videos.each_with_index do |video, index|
.panel.panel-default
.panel-heading
%h4.panel-title
%a.chart{data: { toggle: "collapse", parent: "#faqList" }, href: "#video#{index}" }
= "'#{video.title}' at #{video.event.display_name} on #{display_date(video.recorded_at)}"
%div.panel-collapse.collapse{id: "#video#{index}"}
.panel-body
- if video.impressions.count > 0
%h4
Impressions by Hours (24 hours)
= line_chart video.impressions.group_by_day(:created_at, range: 1.day.ago...Time.now).count
...a couple more charts
:javascript
$(".chart").click(function() {
window.dispatchEvent(new Event('resize'));
});
したがって、ここでの意図は、 をクリックすると、グラフが表示された が.panel-headingドロップダウンされ.panel-body、ウィンドウのサイズが変更されることです。
トリガーを最初にクリックすると.panel-heading、グラフのサイズが変更されませんが、もう一度クリックすると、グラフが一瞬完全にサイズ変更されます...再びビューから非表示になる直前に。:(
次のように、javascript にタイムアウトを追加しようとしました。
:javascript
$(".chart").click(function() {
setTimeout(1000);
window.dispatchEvent(new Event('resize'));
});
しかし、それはまったく何もしていないようです。
ここで私が疑問に思っているのはresize、ドロップダウンが出たらこのイベントを機能.panel-bodyさせて、グラフが独自に適切にサイズ変更されるようにする方法です。
十分に明確に説明していない場合に備えて、現在の問題のスクリーン キャストを次に示します。