Discussion :

[ambi86]

Bonjour,

J'ai un souci avec mon mon div qui contient 2 div : le premier div contient un input pour mettre le titre et des images cliquables pour lancer des fonctions javascript comme fermer , sauvegarder etc ...
le deuxieme div est un div avec la propriété content editable qui me permettra d'entrer des données(note). L'objectif du tout est de former un petit bloc note. Pour l'instant j'ai bien avancer mais je bloque sur 2 3 trucs que je n'ai pas hesiter à partager sur le forum pour trouver des solutions enfin bref voila le code du div entier :

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="blocNote" post_it_id="1">
		<div class="titre"> <input class="input1" type="text" name="titre" value="Entrez votre titre">  </input>
		<a><img class="fermer" src="fermer.png" title="fermer"></img></a> 
		<a><img class="importer" src="importer.png" title="importer une sauvegarde">
		<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> 	<hr/>
 
		<div contenteditable="true" class="note" >Saisissez vos notes</div>
</div>

voila son css :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
.blocNote{padding:0 10px 0 10px;max-height:600px;max-width:600px;display:none;background:#FEFEBA;position:absolute;border:1px solid black;height:100px;width:235px;border-radius:5px;padding:5px 5px;line-height:20px;font-size:13px;margin-left:41.5%;margin-top:10%;min-width:235px;min-height:150px;}
 
.titre{display:inline-block;width:100%}
.titre input {text-align:center;height:30%;min-height:30px;max-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;}
.importer {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
.sauvegarder {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
.ajouter {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
 
.note {position:relative;color:#989E9D;border:1px solid black;border-radius:2px;background: white;width:100%;text-align:center;word-wrap:break-word;height:70%;boder:0 5px 0 5px;line-height:800%;overflow:auto;}
 
.blocNote a{cursor:pointer;}

Alors mon problème c'est que j'ai un souci au niveau de la fonction resizable() de jquery. En effet j'ai appliaquer la fonction sur mon blocNote ca fonctionne perfect mais quand je l'etends on voit vite le problème voila un petit capture d'ecran :




en fait j'ai appliqué a mon premier div avec la class="titre"

Code css :

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

 .titre{height:30%;min-height:30px;max-height:30px}

pour qu'il ne s'elargit pas plus

du coup la logique c'etait de mettre un height de 70% à mon deuxème div pour que tout fonctionne impeccablement mais non quand j'etends ma bloc la deuxieme div ne prends pas toute la hauteur qui reste.(comme sur la photo)


merci de bien vouloir maider.

[Watilin]

Salut

Tu veux me faire perdre mon autre œil ? Et si tu indentais ton code CSS ?

Ta div éditable a bien une hauteur de 70% du bloc-note. Le problème c'est que le titre, lui, a une hauteur fixe puisque tu as voulu la forcer à 30px. D'ailleurs, tu peux simplifier ton CSS :
.titre{height:30%;min-height:30px;max-height:30px} est équivalent à .titre { height: 30px; }.
Quand tu agrandis le conteneur, l'espace que tu vois en-dessous de la div, c'est la différence entre 30px et 30%.

Trois solutions s'offrent à toi :

1. passer la div en position absolue et lui donner à la fois un top et un bottom pour qu'elle s'étire automatiquement ;
2. donner une hauteur relative aux deux éléments (le titre et la div) ;
3. utiliser JavaScript pour redimensionner la div à chaque fois que la taille du conteneur change.

J'ai une préférence pour la première solution.


Un conseil, nettoie ton CSS, il y a plein de redondances et de règles qui ne servent à rien !

[NoSmoking]

Bonjour,
je rejoins Watilin concernant la solution à adopter, gérer cela en javascript me parait pour le moins incongru !

[ambi86]

je vais essayer cela et je vous tient au courant merci d'avoir porter attention à ma demande

[ambi86]

J'ai essaye ce que vous m'avez demander mais c a fonctionne pas du moins de comment je l'ai fait peut etre c'est moi merci en tout cas voila je partage la solution pour celui qui aurait le souci une autre fois :

J'ai seulement appliqué à ma div contenteditable avec la class="note" le code css suivant :

Code :

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

1
2
 
.note {height:calc( 100% - 47px); }

Merci pour vos réponses. J'espère pouvoir aider aussi pour ce petit bricolage de code

[Watilin]

La fonction CSS calc() est intéressante en effet, mais elle est assez récente. Prends garde à mettre des solutions « de repli » pour les navigateurs qui ne la gèrent pas encore.

Pour la communauté, je te donne la solution que j'avais suggérée :

Code CSS :

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

1
2
3
4
.note { position: absolute;
        bottom: 5px;
        top: 54px;
}