2 pièce(s) jointe(s)
Déplacement éléments quand mon input s'elargit
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:
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 :zoubi:). Voila une capture qui en dira mieux que moi :
Pièce jointe 201055
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 :
Pièce jointe 201057
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:
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:
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.:P
ah ouais je les avait pas vue escuse moi
Oui c'est vrai lol je ne les ai pas sorti je vais faire cela merci
voila j'ai effectivement corriger mais ca fonctionne toujours pas
Code:
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 :D mais ca fonctionne toujours pas
merci encore mais j'abandonne
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 :zoubi::zoubi::zoubi::zoubi:
