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.