Discussion :

[ambi86]

Bonjour, tout d'abord je dois remercier SpaceFrog un modérateur au forum js de m'avoir eclairer sur mon evenement onkey up sur mon input voila le code :

Code :

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

1
2
3
4
5
6
7
 
	//Gestion agrandissement input
	$('body').on('keyup','.input1', function(){
	$this=$(this);
 
	$this.css({width:$this.val().length*10 +"px"});
	});

En effet j'avais un problème quand à la saisie je voulais que mon input s'ajuste automatiquement, le problème est résolu mais voila un autre qui apparait (je suis habitué ca fait quelques semaines que je m'y mets au developpement ). Voila une capture qui en dira mieux que moi :


Comme vous pouvez le voir mon input s'elargit automatiquement mais il fait decaller les autres elements dans un mauvais sens alors que je voudrais que tout reste à sa place comme dans cette capture :


je crois que le problème vient effectivement de mon css. Pour faire simple, j'ai 3 div, un div principale que j'ai appelé blocNote, dans celui ci j'ai mis 2 autres, le premier que j'ai appelée titre j'ai mis un input et des images clickables et finalement le second un div pour saisir mes notes que j'ai nommé note.

Voila le HTML:

Code :

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

1
2
3
4
5
6
7
8
9
 
<div class="blocNote">
                <div class="titre"> <input class="input1" type="text" name="titre" value="Entrez votre titre"  />  
                <a class="fermer"><img src="fermer.png" title="fermer" /></a>
                <a><img class="sauvegarder" src="sauvegarder.png" title="sauvegarder" ></img></a>
                <a><img class="ajouter" src="ajouter.png" title="ouvrir un nouveau bloc note"> </a>   </div>
 
                <div contenteditable="true" class="note" > </div>
            </div>

Voila 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
15
16
17
18
19
20
21
22
 
.blocNote{padding:0 10px 0 10px;display:none;background:#FEFEBA;position:absolute !important;border:1px solid black;height:100px;width:235px;border-radius:5px;padding:5px 5px;line-height:20px;font-size:13px;min-width:235px;min-height:150px;}
 
.titre{display:inline-block;width:100%; cursor: move}
.titre input {text-align:center;height:30px;max-width:400px;width:60%;color:#989E9D;border:1px solid black;border-radius:2px;}
.fermer {float:right;line-height:11.5px;text-decoration:none;width:10px;}
.fermer img {width: 100%}
.fermer:hover {width: 25px;}
 
.sauvegarder {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
.sauvegarder img {width: 100%}
.sauvegarder:hover {width: 25px;}
 
.ajouter {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
.ajouter img {width: 100%}
.ajouter:hover {width: 25px;}
 
 
.blocNote a{cursor:pointer;}
 
 
.note {border:1px solid;height:calc( 100% - 47px);background:white;word-wrap:break-word;word-wrap: break-word;}

Comme vous pouvez le voir j'ai definit seulement un min-width à ma div principale pour que mon contenu puisse bien s'ajuster sans problème mais rien y fait. Je ne sais pas ou est le problème. Merci de bien vouloir m'eclairer.

[Invité]

Bonjour,

et ça, c'est quoi ?

Code :

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

.blocNote{ ..........height:100px;width:235px;..........}

Je t'ai déjà dis de ne pas écrire toutes les propriétés sur une seule ligne : on ne voit rien...

De plus, je t'avais déjà montré des modif. à faire... que tu n'as pas faites.

[ambi86]

Oui c'est vrai lol je ne les ai pas sorti je vais faire cela merci

[ambi86]

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
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
 
body{
position:relative;
margin:0;
padding:0;
background:#E0E4E5;
}
 
#apparaitre {
position:absolute;
color: red;
top:0;
left:0;
}
#disparaitre{
position:absolute;
top:0;
right:0;
display:none;
color:red;
}
#fond{width:1871px;
height:953px;
margin:0;
padding:0;
position:absolute;
background-color:none;
background-position:0px;
background-repeat:repeat-x;
display:none;
}
 
.blocNote{
display:none;
background:#FEFEBA;
position:absolute !important;
border:1px solid black;
border-radius:5px;
padding:5px 5px;
line-height:20px;
font-size:13px;
min-width:235px;
min-height:150px;
float:center;
}
 
.titre{
display:inline-block;
width:100%;
 cursor: move;
box-sizing: border-box;
}
 
.titre input {
text-align:left;
height:30px;
min-width:60px;
width:60%;
color:#989E9D;
border:1px solid black;
border-radius:2px;
text-align:center;
left:50%;}
 
.fermer {
float:right;
line-height:11.5px;
text-decoration:none;
width:10px;
}
.fermer img {width: 100%;}
.fermer:hover {width: 25px;}
 
.sauvegarder {
float:right;line-height:11.5px;
text-decoration:none;
width:10px;
padding-right:5px;
}
.sauvegarder img {width: 100%}
.sauvegarder:hover {width: 25px;}
 
.ajouter {
float:right;
line-height:11.5px;
text-decoration:none;
width:10px;
padding-right:5px;
}
.ajouter img {width: 100%}
.ajouter:hover {width: 25px;}
 
 
.blocNote a{cursor:pointer;}
 
 
.note {
border:1px solid;
height:calc( 100% - 47px);
background:white;
word-wrap: break-word; 
min-height: 100px;
overflow: auto;
}

Tu m'escusera si j'ai garder l'ancien habitude c'est vrai que pour lire après c'est pas terrible mais c'est que mon tuteur de stage l'année dernière m'avait en quelque sorte conseiller de garder plutot cette manière de faire mais perso je trouve que c'est plus lisible de le faire comme ca. Revenons a notre problème la je l'ai bien supprimer comme tu peux le voir cette fois mais ca fonctionne toujours pas

[Invité]

Bonjour,

pourtant, ça fonctionne : http://codepen.io/jreaux62/pen/wMOQXL

Peut-être mieux en ajoutant $(function() {...}); ?

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
	$(function() {
 
	  //Gestion agrandissement input
	  $('body').on('keyup', '.input1', function() {
	    $this = $(this);
 
	    $this.css({
	      width: $this.val().length * 10 + "px"
	    });
	  });
	});

+ pour l'esthétique, ajouter :

Code css :

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

1
2
3
 .note {
   margin-top:5px;  /* A JOUTER (esthétique)*/
 }

[ambi86]

Je crois que je vais laisser à l'utilisateur du bloc note gerer la taille avec le resizable() en jquery ui bref merci encore de m'avoir soutenu jusqu'a j abandonne mais ca fonctionne pas sur mon truc alors que ca fonctionne bien sur le lien que tu m'a donner je vais prendre un peu de vacance et peut etre revenir a près merci merci merci