私たちは日頃、管理画面の使いやすいbaserCMSでホームページ制作をする事が多いのですが、先日、自社HPのCSSを調整していて以下の様な現象に出くわしました。
Topics
トピックス
baserCMSの管理ツールバーが隠れてしまう状態を解消する
2014/10/11
フロントサイドの上部に表示されている管理ツールバーですが、そのメニューをクリックした際、ポップアップで表示されるべき部分が、画像のように途切れてしまっていました（画像はクリックすると少し大きくなります）。
結論からいうと、CSSの「overflow: hidden;」が悪さをしていて、問題の現象（見た目）からも想像はついたのですが、自身では使った記憶が無かったので少し考えてしまいました。
問題だったのはSass（3.3.0）で利用しているCompass（1.0.0）でした。そこから書き出されるclearfixが「overflow: hidden;」を使っていました（他のバージョンは分かりません）。
@import "compass";
@import "compass/utilities/general/clearfix";
.clearfix {
@include clearfix;
}
としていた部分を修正します。要はclearfixで「overflow: hidden;」を使わなければ良いわけですので、例えば、
@import "compass";
.clearfix{
zoom:1;
}
.clearfix:after{
content:" ";
display:block;
clear:both;
}
という感じでOKです。
多くのコーディング現場で、CSSプリプロセッサを使っていると思いますので、baserCMSを使っている方の参考になればと思い、メモを残しておきます (^^
