Dimensionnement en "%" de la fenêtre

**patricktoulon** · 05/02/2018, 11h51

voila un appercu du suport IE11 suivi d'un apercu du suport OCX webbrowser VBA Excel ils diffèrent un peu en terme de size mais c'est un moindre mal

suport IE
Nom : demo2.gif
Affichages : 264
Taille : 1,13 Mo

Nom : demo2.gif
Affichages : 264
Taille : 1,13 Mo

suport OCXwebbrowser VBA Excel

Nom : demo1.gif
Affichages : 247
Taille : 774,2 Ko

Invité · 05/02/2018, 13h34

Plus simple : https://codepen.io/jreaux62/pen/MQeYxL

Code JavaScript :

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

1
2
3
4
5
6
function resizepann() {
  // le margin-top de editeur = la hauteur de panne
  document.getElementById("editeur").style.marginTop = document.getElementById("panne").offsetHeight + "px";
}
window.onload = resizepann;
window.onresize = resizepann;

En reprenant le code :

Code css :

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
18
19
20
21
22
23
24
25
26
27
28
29
* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
html {
  width: 100%;
  height: 100%;
  padding:0.5%;
}
body {
  display: flex; display: -webkit-flex;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  overflow:hidden;
}
#panne {
  position:fixed;
  width:99%;
  min-height: 40px; /* A ADAPTER aux pictos */
  background: #ccc;
}
#editeur {
  flex:1 1 auto;
  background: #eee;
  margin-top:40px; /* hauteur panne*/
  overflow:auto;
}

**patricktoulon** · 05/02/2018, 13h49

ok je vais tester

puré j'avais deja tout retranscrit en ecriture dynamique pour mon suport ocX

j'ai mal au canal carpien

je vais le tester dans un html local avant de reprendre toute l'ecriture de creation dynamique ( le code vba ecrit le code du html local)
pour te donner une idée du boulot

code VBA

Code vba :

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
18
['un peu de style css necessaire a la presentation
    CSS = "<style>||HTML{|  width:100%;|  height:100%;|}|"
    CSS = CSS & "*{|  margin: 0;|  padding: 0;|}|"
    CSS = CSS & "|html{|  width: 100%;|  height: 100%;|  min-height: 100%;|}|"
    CSS = CSS & "|body{|  display: flex; display: -webkit-flex;|  flex-direction:column;|  width: 99%;|  margin: 0.5%;|  height: 99%;|  margin-top:-2px;|  border: 1px solid green;|}|"
    CSS = CSS & "|#panne {|  background: linear-gradient(to right, rgba(247,251,252,1) 0%,rgba(217,237,242,1) 40%,rgba(173,217,228,1) 100%);|  white-space:wrap;|  display:inline -block;|}|"
    CSS = CSS & "|.panlitle{|flex: 0 0 30pt; -webkit-flex: 0 0 40px;|  height: 40px;|}|"
    CSS = CSS & "|.panbig{|flex: 0 0 50pt; -webkit-flex: 0 0 70px;|  height: 70px;|}|"
    CSS = CSS & "|#editeur{| flex: 1 1 auto; -webkit-flex: 1 0 auto;| overflow:auto;| font-size:18px;| border:1px solid gray;|  overflow:auto;|}|"
    CSS = CSS & "|.fondbouton{| display:block;|  background-color:#F2F2F2;|  width:25px;| height:25px;| margin-left:5px;| margin-top:3px;| border:1px solid black;| float:left;| border-radius:7px;|  overflow:hidden;|}|"
    CSS = CSS & "|.bouton{| width:104%;| height:102%;|  margin-left:2px;|}|"
    CSS = CSS & "|.fondbouton:hover {|border:1px solid red;|}|"
    CSS = CSS & "|#palette{| background-color:gray;|  font-size=1px;| display:block;|  width:190px;|  height:170px;position:absolute;|  top:30px;|  left:5px;|  border:1px solid black;|}|"
    CSS = CSS & "|.Bcolor{|  font_size:0px;|  fload:left;|  width:15px;|  height:15px;|  margin-top:0px;|  margin-left:0px;|  border;1px solid black;|}|"
    CSS = CSS & "|#fname{|  position:absolute;|  top:30px;|  left:120px;|}|"
    CSS = CSS & "|#fsize{|  position:absolute;|  top:30px;|  left:145px;|  width:80px;|}|"
    CSS = CSS & "|p{| margin:0|}|"
    CSS = CSS & "|</style>|"

chaque caracteres compte la moindre erreur et

et c'est pareil pour le script javascript . le code des elements etant construit en DOM dans un htmldocument virtuel pour en recuperer ensuite le code html

je reviens apres test

**patricktoulon** · 05/02/2018, 13h59

resultat du test

il n'y a plus le resize en height du pann si je suis moins large que le offsetright du last child

Nom : demo1.gif
Affichages : 206
Taille : 1,09 Mo

Nom : demo1.gif
Affichages : 206
Taille : 1,09 Mo

**NoSmoking** · 05/02/2018, 14h34

Bonjour,
il y a quand même quelque chose que je ne saisie pas, pourquoi ne pas mettre le <body> en flex-direction: column ?

Code :

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
body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  overflow: hidden;
}
#panne {
  width: 99%;
  background: #ccc;
}
#editeur {
  flex: 1 1 auto;
  overflow: auto;
  background: #eee;
}

ainsi pas de dimension pour ta barre de menu.

**patricktoulon** · 05/02/2018, 15h09

bonjour Nosmoking je crois qu c'est comme ca que je l'ai gardé

le ruban "pann" doit etre a 100% de width et 30/50"pt" de height selon la dimention de la fenetre ;pour que les boutons s'alignent en dessous ;et toujours ""visible en top de document " il ne dois pas bouger
le div"editeur" doit occuper le reste de la fenetre de toute les maniere que se soit fenetre grand ou petite

dans ton exemple body overflow:hidden implique si je ne me trompe pas que au bout de X ligne tapées dans l'editeur la scroll n'apparaitra pas mais le ruban va monter et donc invisible

pour un apercu concret voila le code html complet (les boutons fonctionnent jusqu'a "unlick")

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!DOCTYPE html >
<html>
<head>
<html lang="fr">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<style>
HTML{
  width:100%;
  height:100%;
}
*{
  margin: 0;
  padding: 0;
}
html{
  width: 100%;
  height: 100%;
  min-height: 100%;
}
body{
  display: flex; display: -webkit-flex;
  flex-direction:column;
  width: 99%;
  margin: 0.5%;
  height: 99%;
  margin-top:-2px;
  border: 1px solid green;
}
#panne {
  background: linear-gradient(to right, rgba(247,251,252,1) 0%,rgba(217,237,242,1) 40%,rgba(173,217,228,1) 100%);
  white-space:wrap;
  display:inline -block;
}
.panlitle{
flex: 0 0 30pt; -webkit-flex: 0 0 40px;
  height: 40px;
}
.panbig{
flex: 0 0 50pt; -webkit-flex: 0 0 70px;
  height: 70px;
}
#editeur{
 flex: 1 1 auto; -webkit-flex: 1 0 auto;
 overflow:auto;
 font-size:18px;
 border:1px solid gray;
  overflow:auto;
}
.fondbouton{
 display:block;
  background-color:#F2F2F2;
  width:25px;
 height:25px;
 margin-left:5px;
 margin-top:3px;
 border:1px solid black;
 float:left;
 border-radius:7px;
  overflow:hidden;
}
.bouton{
 width:104%;
 height:104%;
  margin-left:2px;
}
.fondbouton:hover {
border:1px solid red;
}
#palette{
 background-color:gray;
  font-size=1px;
 display:block;
  width:190px;
  height:170px;position:absolute;
  top:30px;
  left:5px;
  border:1px solid black;
}
.Bcolor{
  font_size:0px;
  fload:left;
  width:15px;
  height:15px;
  margin-top:0px;
  margin-left:0px;
  border;1px solid black;
}
#fname{
  position:absolute;
  top:30px;
  left:120px;
}
#fsize{
  position:absolute;
  top:30px;
  left:145px;
  width:80px;
}
p{
 margin:0
}
</style>
 
<script type="text/javascript">
 
function execCom(fonction, argmt1,argmt2) {
   if(argmt1===undefined){argmt1=false;}
   if(argmt2===undefined){argmt2=null;}
   document.execCommand(fonction,argmt1,argmt2);
   var pal=document.getElementById('palette');
   pal.style.visibility="hidden";
   var L=document.getElementById('fname');
   L.style.visibility="hidden";
   var fz=document.getElementById('fsize');
   fz.style.visibility="hidden";
}
function palette(mode){
   var pal=document.getElementById("palette");
   pal.style.visibility="visible";
}
function listeF(){
   var L=document.getElementById("fname");
   L.style.visibility="visible";
}
function listeFZ(){
   var L=document.getElementById("fsize");
   L.style.visibility="visible";
}
function resizepann(){
 var w = window.outerWidth;
  var pan=document.getElementById("panne");
  if(w<650){pan.className="panbig";}
  if(w>650){pan.className="panlitle";}
}
</script>
</head>
<body onresize="resizepann()">
<DIV id=panne class=panlitle><DIV class=fondbouton><IMG onclick="execCom('bold','false','null')" id=bold title="Texte en gras" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\bold.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('italic','false','null')" id=italic title="Mettre le texte de la selection en italic" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\italic.png"></DIV>
<DIV class=fondbouton><IMG onclick="palette('ForeColor')" id=foreColor title="Afficher la palette des font color" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\foreColor.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('underline','false','null')" id=underline title="Souligner le texte" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\underline.png"></DIV>
<DIV class=fondbouton><IMG onclick="listeF('i')" id=fontName title="Afficher la liste des font name" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\fontName.png"></DIV>
<DIV class=fondbouton><IMG onclick="listeFZ('i')" id=fontSize title="Afficher la liste des font size" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\fontSize.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('justifyLeft','false','null')" id=justifyLeft title="Aligner le texte a gauche " class=bouton src="file://C:\Users\polux\Desktop\imageBouton\justifyLeft.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('justifyCenter','false','null')" id=justifyCenter title="Centrer le texte" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\justifyCenter.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('justifyRight','false','null')" id=justifyRight title="Aligner le texte a droite" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\justifyRight.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('indent','false','null')" id=indent title="indenter le texte" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\indent.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('outdent','false','null')" id=outdent title="outdenter le texte" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\outdent.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('removeFormat','false','null')" id=removeFormat title="suprimer le formatage du texte" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\removeFormat.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('copy','false','null')" id=copy title="Copier la selection " class=bouton src="file://C:\Users\polux\Desktop\imageBouton\copy.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('cut','false','null')" id=cut title="Couper la selection" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\cut.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('paste','false','true')" id=paste title=coller class=bouton src="file://C:\Users\polux\Desktop\imageBouton\paste.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('createLink','false','null')" id=createLink title="Mettre un lien sur la selection" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\createLink.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('unlink','false','null')" id=unlink title="Suprimer le lien " class=bouton src="file://C:\Users\polux\Desktop\imageBouton\unlink.png"></DIV>
<DIV class=fondbouton><IMG id=insertimage title="inserer une image " class=bouton src="file://C:\Users\polux\Desktop\imageBouton\insertimage.png"></DIV>
<DIV class=fondbouton><IMG id=nouveau title="Nouveau  document " class=bouton src="file://C:\Users\polux\Desktop\imageBouton\nouveau.png"></DIV>
<DIV class=fondbouton><IMG id=ouvrir title="Ouvrir un document " class=bouton src="file://C:\Users\polux\Desktop\imageBouton\ouvrir.png"></DIV>
<DIV class=fondbouton><IMG id=enregistrer title="Enregistrer le document  HTML" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\enregistrer.png"></DIV>
<DIV class=fondbouton><IMG id=imprimer title="Imprimer le document " class=bouton src="file://C:\Users\polux\Desktop\imageBouton\imprimer.png"></DIV></DIV>
</div>
<div id="editeur" contenteditable=true><p></p></div>
<DIV id=palette style="VISIBILITY: hidden">
<BUTTON onclick="execCom('ForeColor','false','#000000')" class=Bcolor style="BACKGROUND-COLOR: #000000">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FFFFFF')" class=Bcolor style="BACKGROUND-COLOR: #ffffff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FF0000')" class=Bcolor style="BACKGROUND-COLOR: #ff0000">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#00FF00')" class=Bcolor style="BACKGROUND-COLOR: #00ff00">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#0000FF')" class=Bcolor style="BACKGROUND-COLOR: #0000ff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FFFF00')" class=Bcolor style="BACKGROUND-COLOR: #ffff00">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FF00FF')" class=Bcolor style="BACKGROUND-COLOR: #ff00ff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#00FFFF')" class=Bcolor style="BACKGROUND-COLOR: #00ffff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#800000')" class=Bcolor style="BACKGROUND-COLOR: #800000">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#008000')" class=Bcolor style="BACKGROUND-COLOR: #008000">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#000080')" class=Bcolor style="BACKGROUND-COLOR: #000080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#808000')" class=Bcolor style="BACKGROUND-COLOR: #808000">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#800080')" class=Bcolor style="BACKGROUND-COLOR: #800080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#008080')" class=Bcolor style="BACKGROUND-COLOR: #008080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#C0C0C0')" class=Bcolor style="BACKGROUND-COLOR: #c0c0c0">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#808080')" class=Bcolor style="BACKGROUND-COLOR: #808080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#9999FF')" class=Bcolor style="BACKGROUND-COLOR: #9999ff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#993366')" class=Bcolor style="BACKGROUND-COLOR: #993366">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FFFFCC')" class=Bcolor style="BACKGROUND-COLOR: #ffffcc">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#CCFFFF')" class=Bcolor style="BACKGROUND-COLOR: #ccffff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#660066')" class=Bcolor style="BACKGROUND-COLOR: #660066">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FF8080')" class=Bcolor style="BACKGROUND-COLOR: #ff8080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#0066CC')" class=Bcolor style="BACKGROUND-COLOR: #0066cc">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#CCCCFF')" class=Bcolor style="BACKGROUND-COLOR: #ccccff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#000080')" class=Bcolor style="BACKGROUND-COLOR: #000080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FF00FF')" class=Bcolor style="BACKGROUND-COLOR: #ff00ff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FFFF00')" class=Bcolor style="BACKGROUND-COLOR: #ffff00">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#00FFFF')" class=Bcolor style="BACKGROUND-COLOR: #00ffff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#800080')" class=Bcolor style="BACKGROUND-COLOR: #800080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#800000')" class=Bcolor style="BACKGROUND-COLOR: #800000">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#008080')" class=Bcolor style="BACKGROUND-COLOR: #008080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#0000FF')" class=Bcolor style="BACKGROUND-COLOR: #0000ff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#00CCFF')" class=Bcolor style="BACKGROUND-COLOR: #00ccff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#CCFFFF')" class=Bcolor style="BACKGROUND-COLOR: #ccffff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#CCFFCC')" class=Bcolor style="BACKGROUND-COLOR: #ccffcc">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FFFF99')" class=Bcolor style="BACKGROUND-COLOR: #ffff99">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#99CCFF')" class=Bcolor style="BACKGROUND-COLOR: #99ccff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FF99CC')" class=Bcolor style="BACKGROUND-COLOR: #ff99cc">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#CC99FF')" class=Bcolor style="BACKGROUND-COLOR: #cc99ff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FFCC99')" class=Bcolor style="BACKGROUND-COLOR: #ffcc99">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#3366FF')" class=Bcolor style="BACKGROUND-COLOR: #3366ff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#33CCCC')" class=Bcolor style="BACKGROUND-COLOR: #33cccc">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#99CC00')" class=Bcolor style="BACKGROUND-COLOR: #99cc00">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FFCC00')" class=Bcolor style="BACKGROUND-COLOR: #ffcc00">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FF9900')" class=Bcolor style="BACKGROUND-COLOR: #ff9900">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FF6600')" class=Bcolor style="BACKGROUND-COLOR: #ff6600">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#666699')" class=Bcolor style="BACKGROUND-COLOR: #666699">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#969696')" class=Bcolor style="BACKGROUND-COLOR: #969696">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#003366')" class=Bcolor style="BACKGROUND-COLOR: #003366">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#339966')" class=Bcolor style="BACKGROUND-COLOR: #339966">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#003300')" class=Bcolor style="BACKGROUND-COLOR: #003300">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#333300')" class=Bcolor style="BACKGROUND-COLOR: #333300">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#993300')" class=Bcolor style="BACKGROUND-COLOR: #993300">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#993366')" class=Bcolor style="BACKGROUND-COLOR: #993366">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#333399')" class=Bcolor style="BACKGROUND-COLOR: #333399">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#333333')" class=Bcolor style="BACKGROUND-COLOR: #333333">
</BUTTON>
</DIV>
<SELECT onchange="execCom('fontName','false', this.value )" id=fname style="VISIBILITY: hidden" size=11>
<OPTION selected value=F-name>F-name</OPTION>
<OPTION value="arial">arial</OPTION>
<OPTION value="calibri">calibri</OPTION>
<OPTION value="algerian">algerian</OPTION>
<OPTION value="arialblack">arialblack</OPTION>
<OPTION value="aharoni">aharoni</OPTION>
<OPTION value="baskerville">baskerville</OPTION>
<OPTION value="comic sans ms">comic sans ms</OPTION>
<OPTION value="forte">forte</OPTION>
<OPTION value="georgia">georgia</OPTION>
<OPTION value="script">script</OPTION>
</SELECT>
<SELECT onchange="execCom('fontSize','false', this.value )" id=fsize style="VISIBILITY: hidden" size=7>
<OPTION selected value=1>1</OPTION>
<OPTION value=2>2</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=4>4</OPTION>
<OPTION value=5>5</OPTION>
<OPTION value=6>6</OPTION>
<OPTION value=7>7</OPTION>
</SELECT>
</body>
</html>

**NoSmoking** · 05/02/2018, 15h15

Plutôt que de spéculer, fait des tests mais des vrais

**patricktoulon** · 05/02/2018, 15h30

re
testé le "editeur" est ok mais le resizing de pann ne s'efectue plus, l'editeur reste a top 50pt et le "panne reste a 30pt de height ; il y a donc un blanc entre les deux
Nom : demo1.gif
Affichages : 250
Taille : 654,8 Ko

Nom : demo1.gif
Affichages : 250
Taille : 654,8 Ko

Invité · 05/02/2018, 16h44

Envoyé par NoSmoking

...il y a quand même quelque chose que je ne saisie pas, pourquoi ne pas mettre....

@NoSmoking
Juste un "détail" que tu as zappé :

"...et toujours ""visible en top de document "..."

Il fallait lire TOUTE la discussion, puisque ce "détail" (!) n'est mentionné QUE dans le message.... #15 !!

...sinon c'est tout le document qui monte au bout de x ligne hors je veux garder le pann visible ...

**patricktoulon** · 05/02/2018, 17h20

re
oui jreaux62 j'aurais du mentionner ces details depuis le debut méaculpa

cela dit ta version de depart et ma fonction resizepann fonctionne tres bien sur mes deux suports
je crois que je vais pas pousser plus loin je me perds dans les fichiers exemple

merci en tout cas pour m'avoir fait decouvrir flex

**psychadelic** · 05/02/2018, 18h06

ma solution sans flex marchait très bien et laissait déjà ton panneau supérieur toujours visible
il manquait juste du média Query pour l’agrandir en fct de la largeur, et ajouter un overflow :auto sur la partie en saisie....

**patricktoulon** · 05/02/2018, 18h24

j'ai tellement eu de proposition et etant un nouveau né dans ce language j'ai certainement du en raté oui c'est sur

alors toi tu dis sans flex on peut doncafficher :

le ruban 30/50 pt selon si la fenetre est assez large pour afficher tout les boutons horizontalement
l'editeur occupant tout le reste avec scroll verticale auto

Invité · 05/02/2018, 18h43

Comme je t'ai dit : il faut être rigoureux :

écriture des balises/attributs,.... *
mais aussi dans l'énoncé de tes problématiques

* Attention à la compatibilité cross-browser : un code VALIDE (HTMl, CSS,...) passe toujours mieux !

**psychadelic** · 05/02/2018, 18h45

Envoyé par patricktoulon

j'ai tellement eu de proposition et etant un nouveau né dans ce language j'ai certainement du en raté oui c'est sur

alors toi tu dis sans flex on peut doncafficher :

le ruban 30/50 pt selon si la fenetre est assez large pour afficher tout les boutons horizontalement
l'editeur occupant tout le reste avec scroll verticale auto

oui, c'est dans le post no12

faut juste ajouter un média query pour ajuster les tailles quand la fenêtre est réduite...

sinin ça peut se faire aussi dynamiquement en JS sur l'event onSize...

Invité · 05/02/2018, 18h51

@psychadelic

Oui, il existe souvent plusieurs solutions.
Certaines meilleurs - ou plus "modernes" - que d'autres, chacune ayant ses "pour" et ses "contre".

Et confronter ces différentes solutions ouvrent parfois d'autres perspectives.

**psychadelic** · 05/02/2018, 18h59

Envoyé par jreaux62

@psychadelic

Oui, il existe souvent plusieurs solutions.
Certaines meilleurs - ou plus "modernes" - que d'autres, chacune ayant ses "pour" et ses "contre".

Et confronter ces différentes solutions ouvrent parfois d'autres perspectives.

Nannn ??? !!!!
c'est dingue!!

sinon voila le même code avec juste le média Query dedans... (se déclenche à partir de 700 pixels)

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Dimensionnement en "%" de la fenêtre</title>
 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
	<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
 
<style>
        /* reset CSS minimal */
        * {
                box-sizing: border-box; 
                margin: 0; padding: 0; outline: 0; }
 
        html { height: 100%; background-color: red; min-width: 460px; }
         
        body {
        width:99%;
        height:99%;
        margin-top:1px;
        margin-left:1px;
        border:1px solid green;
        background-color: grey;
                        
        }
        #panne {
        width:99%;
        height: 46px;
        background: linear-gradient(to right, rgba(247,251,252,1) 0%,rgba(217,237,242,1) 40%,rgba(173,217,228,1) 100%); 
        border: 1px solid black;
        display:block;
                  padding:2px 5px;
        }
        #panne button {
                width : 48px;
                height: 36px;
                margin : 2px 0 3px 0;
        }
        #editeur {
        width:99%;
        height: calc(100% - 30pt); 
        font-size:18px;
        float:left;
        border:1px solid gray;
        background-color: pink;
                  overflow : auto;
        }
 
        @media screen and (max-width: 1230px) {
                #panne   { height: 92px; }
                #editeur { height: calc(100% - 92px); }
        }
 
        @media screen and (max-width: 647px) {
                #panne   { height: 135px; }
                #editeur { height: calc(100% - 135px); }
        }
 
</style>
 
</head>
<body>
	<div id="panne"> 
		<button><i class="fas fa-font fa-lg "></i></button>
		<button><i class="fas fa-bold fa-lg "></i></button>
		<button><i class="fas fa-italic fa-lg "></i></button>
		<button><i class="fas fa-text-height fa-lg "></i></button>
		<button><i class="fas fa-underline fa-lg "></i></button>
		<button><i class="fas fa-strikethrough fa-lg "></i></button>
		<button><i class="fas fa-align-left fa-lg "></i></button>
		<button><i class="fas fa-align-right fa-lg "></i></button>
		<button><i class="fas fa-align-center fa-lg "></i></button>
		<button><i class="fas fa-align-justify fa-lg "></i></button>
		<button><i class="fas fa-indent fa-lg "></i></button>
		<button><i class="fas fa-outdent fa-lg "></i></button>
		<button><i class="fas fa-paragraph fa-lg "></i></button>
		<button><i class="fas fa-list-ol fa-lg "></i></button>
		<button><i class="fas fa-list-ul fa-lg "></i></button>
		<button><i class="fas fa-copy fa-lg "></i></button>
		<button><i class="fas fa-paste fa-lg "></i></button>
		<button><i class="fas fa-cut fa-lg "></i></button>
		<button><i class="fas fa-eraser fa-lg "></i></button>
		<button><i class="fas fa-clipboard fa-lg "></i></button>
		<button><i class="fas fa-redo fa-lg "></i></button>
		<button><i class="fas fa-undo fa-lg "></i></button>
		<button><i class="fas fa-link fa-lg "></i></button>
 </div>
	<div id="editeur" contenteditable="true">editeur</div>
</body>
</html>

**patricktoulon** · 05/02/2018, 19h01

re
j'ai adopté la tienne jreaux62 avec ma fonction js comme je la comprends

n'empeche que je revisiterais tout les propositions au clair juste pour l'apprentissage quand j'aurais virer toutes les fichiers d'essai ,a un moment je m'y retrouvais plus

avant que l'on me le dise je dis fichier parce que il faut que je teste sur 3 support (IE, HTA, EXCEL VBA OXC WEBBROWSER DANS FORM)
et pour les deux derniers il faut tester en condition reelle (fichier html ) comme pour une iframe
sinon je me contenterais de js bin ou code pen bien sur
en tout cas merci a tous j'en ai mal au crane mais ca fait rien ,j'ai avancé

des que j'aurais fini cette partie je mettrais resolu je garde une reserve au cas ou j'aurais une surprise

**NoSmoking** · 05/02/2018, 19h23

Envoyé par jreaux62

@NoSmoking
Juste un "détail" que tu as zappé :

pas du tout ce que j'ai zappé, en fait je ne lis plus les sources, désastreuses sur le plan optique, que fournies patrick, ce que j'ai zappé donc c'est que la <div id="editeur"> est enfant direct du <body> et que donc elle va effectivement s'étendre, l'utilisation d'un overflow sur un élément « flex » n'étant pas fait pour servir cette mise en forme.

Pour moi la structure devrait donc être la suivante :

Code html :

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

1
2
3
4
5
<div id="cadre-cde">
</div>
<div id="cadre-editeur">
  <div id="editeur" contenteditable=true><p></p></div>
</div>

en affectant le CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#cadre-editeur {
  position: relative;
  flex: 1 0 auto;
  border: 1px solid gray;
  font-size: 18px;
}
#editeur {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

On a déjà rencontré ce problème, il y a peu, sur le comportement de flex-direction: column me semble t-il.

**NoSmoking** · 05/02/2018, 19h36

Pour me faire pardonner je vous mets la trame

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html >
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Editeur</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
html{
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin:0;
  padding:0;
}
body {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 99%;
  height: 98%;
  margin: 0.5%;
  padding: 0;
  border: 1px solid green;
  overflow: hidden;
}
#cadre-cde {
  background: #ABC;
}
#cadre-editeur {
  position: relative;
  flex: 1 0 auto;
  border: 1px solid #888;
  font-size: 18px;
  background: #EFEFEF;
}
#editeur {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}
#cadre-cde > div {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-top: 3px;
  margin-left: 5px;
  border: 1px solid black;
  border-radius: 7px;
  background-color: #F2F2F2;
}
p {
  margin: 0;
}
</style>
</head>
<body>
<div id="cadre-cde">
 <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
</div>
<div id="cadre-editeur">
  <div id="editeur" contenteditable=true><p></p></div>
</div>  
</body>
</html>

**patricktoulon** · 05/02/2018, 19h50

ah!! la je dis respect, Monsieur

le redim du cadre-cde est parfait il passe a 3 rangée horizontale j'en avais meme pas espoir

RESPECT

j'imagine que l'editeur ca n'est pas pour rien qu'il est lui meme dans un div je percois un peu la lumiere avec le box-sizing: border-box;

je supose que ca veut dire ce que ca veut dire c'est a dire jusqu' a tout les bord du parent c'est ca

Dimensionnement en "%" de la fenêtre

Dimensionnement en CSS

Partager

Partager