Utilisation "@media print" et "overflow"

**Samuel_** · 23/07/2014, 17h17

Hello,

j'ai une page HMTL avec une DIV qui a pour définition :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style='height:250px;overflow:scroll;@media print{overflow:initial}'></div>

Quand je souhaite imprimer ma page, l'ensemble du texte dans ma DIV n'est pas affiché mais seulement le haut.

Une explication ?

Samuel_

**NoSmoking** · 23/07/2014, 18h25

Bonjour,
la règle @media ne peut se mettre dans un attribut style qui n'accepte que des propriétés/valeurs CSS.

**Samuel_** · 24/07/2014, 09h13

Ok d'accord ça explique tout.

Du coup je suis bloqué ....
Techniquement, je ne peux pas modifier mon header ... Du coup j'ai tenté d'insérer ma balise STYLE avec un bout de code JavaScript :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByTagName("head")[0].innerHTML += "<style media=\"print\" type=\"text/css\">zoneScroll{overflow:initial;}</style>"

Mais aucun changement en vue.

Quelqu'un aurait-il une autre solution ?

**NoSmoking** · 24/07/2014, 22h01

L'écriture de zoneScroll{overflow:initial;} est incorrecte il manque au moins un point précédent le zoneScroll pour que le sélecteur soit une class.

Dans ce cas il faut que ton HTML ressemble à

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="zoneScroll"></div>

Comment utiliser les classes en CSS ?

Dans ton cas la méthode qui me semble la plus propre, séparation des couches, est de passer par une feuille de style externe dans laquelle tu ajoutes ce que bon te semble.

Dans ta page tu rajoutes un script d'insertion dynamique de la feuille de style, exemple

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var oLink = document.createElement('LINK');
oLink.rel  = 'stylesheet';
oLink.type = 'text/css';
oLink.href = 'include_style.css';
document.getElementsByTagName('HEAD')[0].appendChild( oLink);

Avec le code HTML suivant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="class_div">Bonjour impression sur fond rouge!</div>

et un fichier style include_style.css contenant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
@media print{
  .class_div{
    background:#F00;
  }
}

tu devrais voir lors de l’aperçu avant impression le texte sur fond rouge, à toi ensuite d'adapter.

code de test :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Include LINK STYLE</title>
<script>
var oLink = document.createElement('LINK');
oLink.rel  = 'stylesheet';
oLink.type = 'text/css';
oLink.href = 'include_style.css';
document.getElementsByTagName('HEAD')[0].appendChild( oLink);
</script>
</head>
<body>
<div class="class_div">Bonjour impression sur fond rouge!</div>
</body>
</html>

Tu peux en profiter pour mettre tous les styles dans ce fichier pour ne plus les avoir dans les balises.
exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.class_div{
  background:#ABC;
}
 
@media print{
  .class_div{
    background:#F00;
  }
}

attention toutefois à l'ordre de déclaration, le @media en dernier.

**Samuel_** · 25/07/2014, 11h26

Envoyé par NoSmoking

L'écriture de zoneScroll{overflow:initial;} est incorrecte il manque au moins un point précédent le zoneScroll pour que le sélecteur soit une class.

C'est une faute de recopiage, j'utilise un id donc j'ai placé un # avant le zoneScroll

Envoyé par NoSmoking

Dans ton cas la méthode qui me semble la plus propre, séparation des couches, est de passer par une feuille de style externe dans laquelle tu ajoutes ce que bon te semble.

L'idée est bonne mais je ne peux pas insérer de fichier non plus ...

En mixant mon code initial et le tiens, je vais essayer le code JS suivant :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var styleNode = document.createElement('style');
styleNode.type = 'text/css';
var styleText = document.createTextNode('@media print { #scrollZone {overflow:initial;}}');
styleNode.appendChild(styleText);
document.getElementsByTagName('head')[0].appendChild(styleNode);

Cela te pense être une bonne idée ?

Je test la solution et je vous redis !

**Samuel_** · 25/07/2014, 17h04

J'ai résolu mon problème !

Voici le code JS :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
windows.onbeforeprint = function() {
(document.getElementsById('scrollZone')).setAttribute('style', 'overflow:initial;');
};

Attention la fonctionnalité onbeforeprint n'est pas utilisable pour certains navigateurs (Google Chrome en autre, je crois).

**Bovino** · 28/07/2014, 08h41

Tant mieux si ton problème est résolu, mais le code que tu montres ne risque pas de fonctionner...

L'objet windows n'existe pas en JavaScript, donc lui affecter un événement ne sera pas possible.
getElementsById() n'existe pas non plus : dans la mesure où un id doit être unique dans la page, seule la méthode getElementById() et renvoie un unique élément et non une collection.

Ensuite, utiliser setAttribute pour gérer les styles est plutôt maladroit. Si tu travailles sur un objet de type HTMLElement, alors autant utiliser les méthodes propres à la manipulation de ce type d'objet et non des méthodes affectant le HTML.
Bref, ton code deviendrait :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
window.onbeforeprint = function() {
    document.getElementById('scrollZone').style.overflow = 'initial';
};

Utilisation "@media print" et "overflow"

CSS

Discussions similaires

Partager

Partager