28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je viens de crée un écran type tableau de bord à taille fixe.
Il contient des SVG (Graphes Kendo UI).

Sous chrome, après pas mal d'efforts, j'ai réussi à obtenir un résultat qui a satisfait mon client :
http://nsa38.casimages.com/img/2017/01/19/mini_170119040730227108.png
Mon souci est que dans Internet Eplorer (Edge) et dans Firefox et bien que j'ai mis les éléments suivants que j'ai trouvé sur Internet.


@media print {
    @page {
        size: A4 landscape;
        margin: 1cm;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
}


- Je n'arrive pas à obtenir l'orientation paysage.

- Je n'arrive pas à redessiner correctement les SVG au bon endroit dans l'évènnement before print codé comme suit :


(function () {
    var beforePrint = function () {
        redrawGauges(false);
    };
    var afterPrint = function () {
        redrawGauges(false);
    };

    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function (mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
}());


Alors que l'événement est bien exécuté lorsque je demande l'impression.
http://nsa37.casimages.com/img/2017/01/19/mini_170119041406834467.png

Vous pourriez m'aider ?

Merci
Modifié par Laurent Jordi (19 Jan 2017 - 15:58)