スポンサードリンク

「display: flex;」を使ったエリア内にカードリストを20個位配置した画面を印刷しようとしたら、

「IE / Edge / Firefox」で表示が崩れた。

 

Chrome / Safariでは2ページ(1ページ10個)になるのに、「IE / Edge / Firefox」は1ページ分しか表示しない。

高さが取れないのか??

flexをやめるとちゃんと20個分表示された。

 

色々やってダメだったので、「IE / Edge / Firefox」はプリント用cssで「display: block;」にして「float: left;」で対応した。

 

他にいい方法があるのかもしれないですが、とりあえず暫定対応です。

印刷用cssは難しいですね…


Flash Builder4でFlex3のプロジェクトを開いたらエラーで動かない。
backgroundImageが表示されない??

色々探してみたら、どうやら Spark コンポーネントで背景画像を設定できるコンテナは
BorderContainer コンポーネントだけのようでした。

他にも結構変更がありそう・・・


 FLEX3で使用可能なcssリストをまとめてくれているサイト。
いつも忘れてしまうので、メモ

Flex 3.0 CSS Properties List

しかし普通のcssとはかなり違うな・・・
 WindowsのFirefoxでFlashの動きがおかしくなった。
デバッグの時点ではちゃんと動いていたのに・・・。
HSliderの「thumbRelease」が返ってこなくて、ずっと「thumbDrag」の状態に・・・。
マウスを動かすだけで、ボリュームが大きくなったり、小さくなったり・・・。

調べてみると、「wmode」とゆうのが悪さをしているらしい。
htmlファイルをみてみると、「wmode='transparent'」と書いてありました。
外してみたら、正常な動作に!
こちらのサイトによると、
wmodeは、「どうしても設定したい」という場合を除いては、設定しないほうがいいみたい。
YouTubeの埋め込み用タグにはこれが含まれているので注意が必要とのことです。

・wmodeについてこちらのサイトによると、
 設定は以下3つ
 ・Window(デフォルト)
  Flash アプリケーションと HTML レイヤーは相互に影響し合うことはなく、
  Flash アプリケーションが常に最前面のアイテムになります。

 ・Opaque
  ページ上でアプリケーションの背後にあるものはすべて非表示になります。

 ・Transparent
  HTML ページの背景がアプリケーションの透明な部分を通して透けて見えます。
  ただし、アニメーションの再生スピードが遅くなることがあります。

初心者には難しいですね・・・
もっと勉強しないと。

参考サイト:
FlashやWebにまつわるいろいろなこと さん
BlurBlue-Note さん


h:1/f:1
 ボタンクリック時にボタン画像の変更方法メモ
引数がクラスとなるので、画像ファイル名を渡すのではなくてイメージをバインドしてるみたい。

■.asファイル
//ボタンフラグ
private btnFlag:Boolean = false;

//ボタン画像1
[Embed(source="../assets/btn1.png")]
[Bindable] public var btn1:Class;

//ボタン画像2
[Embed(source="../assets/btn2.png")]
[Bindable] public var btn2:Class;


/* ボタンクリックイベント */
private function btnClick():void {
    if ( btnFlag == false ) {
        btnFlag = true;
        imgBtn.setStyle("icon", btn1);
        } else {
        btnFlag = false;
        imgBtn.setStyle("icon", btn2);
        }
}

■mxmlファイル
<mx:Button id="imgBtn" click="btnClick()" />

一応動いたけどあってるのかな?
難しいっす。わけわからん・・・

h:2/f:1
1

スポンサードリンク