28172 sujets

CSS et mise en forme, CSS3

Order flex - Dans differentes div ?

Bonjour à tous,

J'ai mis sur le formulaire de mon site un form avec à gauche les champs input et à droite mon champ textarea Messages. Le problème que j'ai à présent est que lorsque je redimensionne, mon champs Messages se retrouve à la fin, du coup j'aimerais utiliser la propriété order mais cela implique que le container (mes div) soient en flex. Du coup j'ai un gros bug.

Quelqu'un saurait-il m'aider à résoudre ce problème ? Un grand merci !

Lien du formulaire

http://www.netpom-web-agency.com/bug.png
http://www.netpom-web-agency.com/test1.png
Bonjour Raphael,
Non mon problème n'est pas celui-la.
Vue d'un ordi, les boites à côté de l'autre ça me va.
Mais vue d'un mobile, j'aimerais afficher le textarea avant le bouton Submit, sinon ça n'a pas de sens.

Même avec la propriété order cela ne fonctionne pas. Je pense car le textarea est dans une div différente des autres. Mais comment régler ce soucis ?
Bonjour,
fanny95 a écrit :
Bonjour Raphael,
Non mon problème n'est pas celui-la.
Vue d'un ordi, les boites à côté de l'autre ça me va.
Mais vue d'un mobile, j'aimerais afficher le textarea avant le bouton Submit, sinon ça n'a pas de sens.

Pourtant le submit est avant le textarea dans ton code, au redimentionnement (et donc sur version mobile ou tablette) nous avons le résultat attentu, non ? (et nous sommes d'accord, ça n'a pas de sens, ni visuellement, ni dans le code)
Peut-être faut-il déplacer ce bouton, repenser l'affichage ?
Bon courage Smiley cligne
Salut Fanny,

Dans ce cas précis, je pense qui ne faudrait pas utiliser flexbox, ça ne va pas franchement t'aider...
Comme tu n'as qu'un seul élément dans ta colonne de droite, tu peux très bien le sortir du flux avec un position: absolute; et le positionner en haut à droite.
Quand tu ne veux plus qu'une seule colonne, tu le réintégres dans ton flux avec position: static;
Le principale est de ne surtout pas créer 2 colonnes dans 2 divs dans ce cas-là.
Voici mon exemple : http://codepen.io/korell/pen/jqvPNZ?editors=1100
Bonjour Fanny,

Tu ne peux pas atteindre ton submit avec order car il n'a pas la qualite d'item.. mais rien de tempeche de lui donner.

  
<main>   
<div id="container_formulaire">  

    <div id="item1"> 
  		<br>ITEM 1 <br> (order 1)
    	<p>NOM<input type="text"></p>
    	<p>PRENOM<input type="text"></p>
    	<p>EMAIL<input type="text"></p>   </div> 
  	
    <div id="item2">
  		<p>ITEM 2 <br> (order 2)<br>
      <input type="submit"></p> </div>

    <div id="item3">
 		  <p>ITEM 3</p>
 		  <p>(order 3)</p><br>
 		  <p><textarea rows="5">..vos commentaires..</textarea>
                   </p></div>
 </div>
</main>


et ca te donne :

upload/61012-flex01.JPG

et en modifiant les order :

upload/61012-flex02.JPG

et

upload/61012-flex03.JPG


Pour le code CCS : 

  
#container_formulaire{
 display: flex;
 flex-flow: column wrap;
 justify-content: center;
 font-size: 14pt;
 margin: auto;
 text-align: center;
 height: 315px; width: 270px;}


#item1{
   order: 1;
   height: 215px; 
   flex:0 0;
   align-content: flex-start;
   background-color: pink;}

#item2{
    order: 2;
    height: 100px; width: 270px;
 	  flex: 0 0;
    align-content: flex-start;
    background-color: orange;}
 
#item3{
   order: 3;
   height: 315px; width: 270px;
   flex: 1 0;
   align-content: flex-end;
   background-color: #a1a1a1;}


Smiley smile
Sujet clos
Aller à