28172 sujets

CSS et mise en forme, CSS3

Bonjour,
J'ai une bloc conteneur (div) qui contient une table dont certaines lignes (tr) peuvent être affichées ou retirées dynamiquement (via ajax).
Le blem c'est que lorsqu'une ligne est insérée, le bloc contenant garde sa dimension d'origine et la dernière ligne du tableau n'est plus visible.
Quelqu'un a déjà rencontré ce type de problème ou pourrait m'indiquer une thérapie de choc à base de css pour le conteneur se bouge lorsque son contenant change ?

Smiley cligne

-Fly06
Modifié par Fly06 (23 Feb 2010 - 10:27)
Salut,

Pour qu'il y ait une solution à ton problème, encore faut-il qu'il y ait un problème clairement exposé, ce qui n'est pas le cas de ton sujet. Il serait en effet bon que tu mettes toutes les chances de ton côté pour que nous comprenions ton problème, et que nous puissions t'y apporter une ou plusieurs solutions.

Dans l'ordre de priorité, tu peux nous fournir :
1. un descriptif très précis de ton problème, impératif pour focaliser notre recherche dans le bons sens.
2. un lien vers une page en ligne, qui permet de constater ce problème par nous même, ne nécessitant parfois pas d'autres informations.
3. l'intégralité du code html et css produit dans le navigateur (et pas seulement des extraits, car le problème se situe parfois ailleurs dans le code).
4. des schémas ou captures d'écran.

La rapidité d'obtention de la réponse dépendra de la qualité les informations que tu nous fourniras.

Bonne chance à toi. Smiley cligne
+1 (dit autrement : c'est sympa d'aider ceux qui veulent t'aider. Smiley cligne )

Cela dit et vu la description on peut supposer que tu as figé la hauteur de l'élément DIV en lui affectant un height auquel cas il suffit de supprimer cette propriété.
@Mikachu : C'est pas faux.

Cependant, le problème se pose sur un développement en cours et je ne suis pas certain que poster mon code (html, css + js) dans toute sa "complexité" aide vraiment.

Par ailleurs, mon message initial me semble clair : le conteneur (bloc div) ne s'agrandit pas lorsque l'on ajoute dynamiquement une ligne (tr) au contenant (une table).

J'espère que d'autres que toi auront déjà rencontré ce type de problème et pourront m'indiquer des pistes sans voir une ligne de code...

Smiley cligne

-Fly06
Modifié par Fly06 (18 Jan 2010 - 15:28)
Lors du post, j'ai hésité entre le forum css et le forum javascript.

Il semblerait que ce soit un problème js bien que je ne soit certain qu'il ne puisse pas être résolu via les css...

J'ai reproduit mon problème en adaptant cet exemple Mootools :
http://demos111.mootools.net/Fx.Slide


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>mootools demos - Fx.Slide Demo</title>
<script type="text/javascript" src="http://demos111.mootools.net/demos/mootools.svn.js"></script>
<style type="text/css">
#contenant {
	background: #fff;
	color: black;
	padding: 10px;
	margin: 20px;
	border: 1px solid black;
}
#contenu_1, #contenu_2 {
	background: #fff;
	color: black;
	padding: 10px;
	margin: 20px;
	border: 1px solid black;
}
</style>
	<script type="text/javascript">
		window.addEvent('domready', function(){
			//-vertical
			
			var mySlide = new Fx.Slide('contenant');
			mySlide.hide();
			var status = 1;
			
			$('slide').addEvent('click', function(e){
				e = new Event(e);
				if (status == 1) {
					mySlide.slideIn();
					status = 0;
				} else {
					mySlide.slideOut();
					status = 1;			
				}
				e.stop();
			});

			var mySlide_1 = new Fx.Slide('contenu_2');
			mySlide_1.hide();
			var status_1 = 1;
			
			$('slide_1').addEvent('click', function(e){
				e = new Event(e);
				if (status_1 == 1) {
					mySlide_1.show();
					/* mySlide.show(); */
					status_1 = 0;
				} else {
					mySlide_1.hide();
					status_1 = 1;			
				}
				e.stop();
			});
			
		}); 
	</script>
</head>
<body>

<h3 class="section">Fx.Slide Vertical</h3>
 
<a id="slide" href="#">slide</a> 
 
<div id="contenant">

<div id="contenu_1">
<a id="slide_1" href="#">slide</a> 
</div>

<div id="contenu_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</div>

</body>
</html>

Tel quel, le texte du bloc 'contenu_2' ne sera pas affiché en totalité car le bloc 'conteneur' ne tiendra pas compte du nouveau contenu à afficher et s'actualisera pas.

Par contre, si on dé-commente la ligne :
/* mySlide.show(); */
alors on force le bloc 'conteneur' à se réactualiser et ça marche...

C'est assez empirique faute d'une connaissance précise de ce qui ce passe derrière.

-Fly06
Salut,

Pour répondre à ta question, malheureusement chaque problème concernant l'élaboration d'un site est souvent lié à ce même et unique site. Il existe des problèmes récurrents liés aux outils, mais généralement les problèmes viennent d'erreur commises par la personne qui a tapé le code.

Donc pour identifier cette erreur, il faut avoir les données en main, d'où l'intérêt de la page en ligne (ou au moins de l'intégralité du code pour les langages serveurs qu'il n'est pas possible de voir en étant côté utilisateur).

Sinon cela revient à chercher un poisson pané dans l'océan (l'aiguille et la botte de foin ça m'énerve à force ! Smiley lol ), il n'existera -peut-être- que lorsque je l'y verrai ! Pour l'instant ça reste une possibilité parmi d'autres comme le problème que tu rencontre ! Smiley cligne
Le code qui suit correspond précisément à ce que je souhaite faire en terme de structure et de fonctionnalités.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>mootools demos - Fx.Slide Demo</title>
<script type="text/javascript" src="http://demos111.mootools.net/demos/mootools.svn.js"></script>
<style type="text/css">
#contenant, #wrapper {
	background: #fff;
	color: black;
	padding: 10px;
	margin: 20px;
	border: 1px solid black;
}
#contenu_0, #contenu_1, #contenu_2, #contenu_3 {
	background: #fff;
	color: black;
	padding: 10px;
	margin: 20px;
	border: 1px solid black;
}
</style>
	<script type="text/javascript">
		window.addEvent('domready', function(){
			//-vertical
			
			var mySlide = new Fx.Slide('contenant');
			mySlide.hide();
			var status = 1;
			
			$('slide').addEvent('click', function(e){
				e = new Event(e);
				if (status == 1) {
					mySlide.slideIn();
					status = 0;
				} else {
					mySlide.slideOut();
					status = 1;			
				}
				e.stop();
			});

			var mySlide_1 = new Fx.Slide('contenu_2');
			mySlide_1.hide();
			var status_1 = 1;
			
			$('slide_1').addEvent('click', function(e){
				e = new Event(e);
				if (status_1 == 1) {
					mySlide_1.show();
					mySlide.show();
					status_1 = 0;
				} else {
					mySlide_1.hide();
					status_1 = 1;			
				}
				e.stop();
			});
			
		}); 
	</script>
</head>
<body>

<h3 class="section">Fx.Slide Vertical</h3>
 
<div id="wrapper">
 
	<div id="contenu_0">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	
	<div id="contenant">

	<div id="contenu_1">
	<a id="slide_1" href="#">slide</a> 
	</div>

	<div id="contenu_2">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>

	<div id="contenu_3">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>

	</div>
	
</div>

<a id="slide" href="#">slide</a> 

</body>
</html>


Ca marche à un détail près : lorsqu'on l'on cache le bloc 'contenu_2', le wrapper ne remonte pas pour combler l'espace vide précédemment utilisé par le bloc 'contenu_2'...

Une idée ?

-Fly06

PS : Est-ce qu'un modo pourrait déplacer ce thread dans le forum javascript.
Bonjour,
J'ai fini par trouver la réponse à ce problème sur le blog ListCentral :
http://blog.listcentral.me/2010/01/05/maintaining-dynamic-height-on-a-fx-slide-element-with-mootools/

La solution proposée devrait servir à tous ceux qui gèrent du contenu dynamique dans un bloc de type slider et souhaitent que le bloc conteneur (slider) s'ajuste automatiquement (en hauteur) à ce contenu dynamique...

PS : J'ai modifié le titre de la discussion.

-Fly06
Modifié par Fly06 (23 Feb 2010 - 10:30)