shinydashboard(AdminLTE)でスクロールバーが2つできちゃう問題を直す

ウルトラ小ネタです。

スクロールバーが2つできちゃう

shinydashboard を使って開発中、ブラウザの右端のスクロールバーが2つできてしまってレイアウトが崩れるのに気が付きました。

f:id:ksmzn:20180203185140p:plain

どうも原因は、SidebarとBodyの両方がブラウザの縦幅を超えるほど長い場合に起こるようです。 僕が開発中のアプリの場合、サイドバーのメニューを開いたときにブラウザの縦幅を超えるため、メニューを開閉するたびにレイアウトがズレてしまい、なんとかする必要がありました。

CSS を上書きする

解決方法は、以下に書かれていました。

Two scroll bars! #1418

shinydashboardは AdminLTE という管理画面用Bootstrapテーマを使用しており、そちらのCSSのバグのようです。 つまり、cssを上書きすればOKなので、shinyアプリに使っているcssファイルに、

.wrapper {
    overflow-y: hidden;
}

と書けばOKです。

以上です。