Discussion :

[moimp]

Bonjour à tous,

Dans le code suivant, je n'ai aucun souci avec FF ou Chrome, mais IE11 ne réduit pas la largeur (lignes 41 et 42):

Code javascript :

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
 
function Options(values, textes) {
	this.options = [];
	textes = typeof textes === 'undefined' ? values: textes;
 
	for (let i=0, max=values.length; i<max; i++) {
		this.options[i] = document.createElement('option');
		this.options[i].value = values[i];
		this.options[i].appendChild(document.createTextNode(textes[i]));
	}
	return this.options;
}
function DataSet(elemId, badgeLineRange, contentRange) {
	let dataType 	= elemId.substr(0, elemId.indexOf('[')),
		fields		= [],
		params		= [],
		separators	= ['\u00A0', '-', '\u00A0-\u00A0', '.', '\u00A0.\u00A0', '+', '\u00A0+\u00A0', ', '], // Séparateurs de champs
		//separators	= ['a', 'b', 'c'],
		listOptions	=  new Options(separators);
		contentCell	= document.getElementById('main['+badgeLineRange+']');
 
	if (dataType != 'db' && dataType != 'txt') return false;
 
	switch (dataType) {
		case 'db':
			params	= ['select',{id:createId('item',badgeLineRange,contentRange)}, ''];
			fields[0] = new CellContent(params);
 
			// Ajouter les options
 
			break;
		case 'txt':
			params = ['input',{id:createId('item', badgeLineRange, contentRange)}, ''];
			fields[0] = new CellContent(params);
			break;
	}
	contentCell.appendChild(fields[0]);
	// Ajout du séparateur --> Gérer la largeur
	params = ['select', {id:createId('sep',badgeLineRange,contentRange)}, ''];
	fields[1] = new CellContent(params);
	fields[1].style.minWidth = 'initial';
	fields[1].style.maxWidth = '3em';
	contentCell.appendChild(fields[1]);
 
	// Ajout des options du séparateur
	for (let i=0, max=separators.length; i<max; i++) {
		fields[1].appendChild(listOptions[i]);
	}
 
	// Ajout de l'image del2
	params = ['img', {id:createId('del2',badgeLineRange), src:'_images/del.png', alt:'del.png', title:fromPHPtoJS.delItem}, ''];
	fields[2] = new CellContent(params);
	contentCell.appendChild(fields[2]);
}

J'ai pensé que le problème était du à la ligne 17 de mon code et le l'ai remplacée par la ligne 18 mais le problème persiste.

[ProgElecT]

Salut

Nouveau dans ce langage, il me semble que .style doit être écrit:
max-height
max-width
min-height
min-width
qui sont compatible Chrome, IE, FF, Safari et Opera.

[badaze]

Pas sûr d'avoir bien compris ton problème, mais sur ce coup là j'ai l'impression que c'est IE qui fonctionne bien (et oui c'est bizarre)

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
<script>
function toto(field)
{
 field.style.minWidth = 'initial';
 field.style.width    = '30px';
} 
</script><style type="text/css">
div {
  min-width : 100px;
  width: 700px;
  border: solid 2px blue;  
}
</style>
 
<div id="h" style="border: solid 1px red"> Lorem ipsum tralala sit amet, consectetur adipisicing</div>
<input type="button" onclick="toto(h)" value="Clique"/>

Situation initiale :


Après le clic sur le bouton :


IE 11 tient compte de "initial" dans le redimensionnement, FF 55.0.3 n'en tient pas compte.

[NoSmoking]

Bonjour,
Concernant l'utilisation de min-width, je n'en vois pas trop l'utilité dans le cas présent. Difficile ici de dire d'autant que nous n'avons pas le contexte global de son utilisation.

Nouveau dans ce langage, il me semble que .style doit être écrit:
max-height
...

l'écriture est bonne, voir Comment passer d'une propriété de style CSS à celle qui correspond en JavaScript ?.

[ProgElecT]

l'écriture est bonne, voir Comment passer d'une propriété de style CSS à celle qui correspond en JavaScript ?.

Comme précisé, nouveau dans ce langage,
J'ai voulu me mettre un moins 1, mais pas possible.
Merci pour le lien.

[moimp]

Bonjour,
Concernant l'utilisation de min-width, je n'en vois pas trop l'utilité dans le cas présent. Difficile ici de dire d'autant que nous n'avons pas le contexte global de son utilisation.

J'ai une feuille de style générale dans laquelle, j'ai:

Code css :

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

1
2
3
4
5
6
7
select {
	margin-left:-4px;
	min-width:115px; /* pour Chrome */
}
option {
	min-width:115px; /* pour Firefox */
}

Constatant que j'avais oublié de tenir compte du sélecteur option, j'ai corrigé mon code en ajoutant ceci après la ligne 47:

Code javascript :

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

1
2
		listOptions[i].style.minWidth = 'initial';
		listOptions[i].style.maxWidth = '3em';

Je ne constate malheureusement aucun changement. Ceci s'explique d'autant moins que, pour chacun des sélecteurs select et option, j'ai au plus haut niveau de la fenêtre de styles du débogueur de IE11: Style inline {3em;}

[NoSmoking]

@ProgElecT :

J'ai voulu me mettre un moins 1, mais pas possible.

Pas de soucis si tu y tiens vraiment

Pour en revenir à l'écriture si tu écris oElem.style.min-width, cela sera interprété comme une soustraction oElem.style.min - width, donc cela plantera.
Néanmoins si tu souhaites à tout pris utiliser cette écriture il te suffit de la mettre entre quotte et en l'utilisant comme suit :

Code :

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

oElem.style["min-width"] = "5em";

ou encore

Code :

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

oElem.style.setProperty("min-width", "5em", null);

@badaze :

j'ai l'impression que c'est IE qui fonctionne bien (et oui c'est bizarre)

en fait non IE11 ne reconnaît pas la valeur « initial » comme valeur ce qui fait qu'il ne l'affecte pas à la propriété, essaie avec Edge.

@moimp :Je ne vois toujours pas la finalité de ce que tu essaies de faire, compte tenu que tu affectes cette valeur à la création de l'élément, n'aurais tu pas intérêt à passer par une classe.

[badaze]

@NoSmoking


Pour Edge je ne peux pas dire. Il ne m'affiche aucune page web (Désolé, nous ne pouvons pas atteindre cette page) alors que les autres navigateurs fonctionnent bien !

[moimp]

@moimp :Je ne vois toujours pas la finalité de ce que tu essaies de faire, compte tenu que tu affectes cette valeur à la création de l'élément, n'aurais tu pas intérêt à passer par une classe.

Tu as raison, c'est beaucoup plus simple. Par manque d'expérience, je n'ai pas eu l'idée de gérer les classes avec Javascript. J'ai donc créé une classe dans ma feuille css et je l'ai appliquée avec classList.add. Merci. Je mets +1 et sujet résolu.