Discussion :

[ambi86]

Bonjour,

J'ai un soucie concernant l'ajustement de ma div principale. En effet , j'ai une div principale que j'ai appelé blocNote(vous avez deviner l'objectif) qui contient 2 autres div, la premiere que j'ai appelé titre qui contient un input et la deuxième note avec la propriété contenteditable pour permettre de saisir des données.

Alors le souci c'est que quand je saisie mes données sur la div note et que quand je dépasse la hauteur du div note j'aimerais que ma div principale s'ajuste automatiqument.

voila un capture d'ecran de mon problème :

Voila le code 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>

Et 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
23
 
 
.blocNote{padding:0 10px 0 10px;display:none;background:#FEFEBA;position:absolute !important;border:1px solid black;height:100px;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;}

Alors on m'a suggere d'enlever la hauteur de ma div principale ce qui est fait mais ca ne change rien


Et je tiens à m'escuser car j'avais deja publier le même problème sur le forum javascript c'est parceque j'imaginer plus une solution qui utilisera l'evenement onkeyup pour que quand on saisie un truc ca agrandit automatiquement la hauteur du div principale mais si il y a une solution beaucoup plus simple en css j'aimerais bien que vous m'eclaicissiez sur mon problème.

Merci

[Invité]

Bonjour,
c'est la hauteur de .blocNote qu'il faut supprimer :

Code css :

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

1
2
3
4
5
6
7
8
 .blocNote {
   padding: 0 10px 0 10px;
   display: none;
   background: #FEFEBA;
  position: absolute !important;
   border: 1px solid black;
   /*height: 100px;*/
...

N.B. écrire toutes les propriétés sur une même ligne et sans espace n'en facilite pas la lecture, ni le débogage.
Garde ça pour la prod.

Par contre, tu peux rajouter :

Code css :

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

1
2
3
4
.note {
...
   min-height:110px;
 }

[ambi86]

comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.blocNote{
padding:0 10px 0 10px;
display:none;
background:#FEFEBA;
position:absolute !important;
border:1px solid black;
width:235px;
border-radius:5px;
padding:5px 5px;
line-height:20px;
font-size:13px;
min-width:235px;
}

[Invité]

Et pourtant : http://codepen.io/jreaux62/pen/wMOQXL

[ambi86]

Merci beaucoup ca fonctionne super