Discussion :

[Nixar]

Bonjour,
Je réalise une visionneuse photo dont voici une copie d'écran de la version de dev ci-dessous :


Mon problème se situe au niveau de l'affichage des miniatures : en effet je voudrais que le panel n'affiche que l'ascenseur horizontal (pour faire défiler comme une pellicule). Malgré ma configuration ci-dessous, je me retrouve systématiquement avec un double ascenseur (comme sur la photo).

Code :

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

1
2
3
4
5
6
7
8
<asp:Panel ID="PanelPellicule" CssClass="PlusADroite AligneMilieu PanelPellicule" runat="server" Height="120px" Width="760px" style="vertical-align: middle; line-height:120px;" ScrollBars="Horizontal" HorizontalAlign="Center">
                        <asp:UpdateProgress ID="UpdateProgressPellicule" runat="server" DisplayAfter="100" DynamicLayout="true">
                            <ProgressTemplate>
                                <asp:Image ID="ImageUpdateProgressPellicule" runat="server" ImageAlign="Middle" ImageUrl="~/images/ajax-loader-DDL.gif" />
                                Mise à jour des miniatures...
                            </ProgressTemplate>
                        </asp:UpdateProgress>
                        </asp:Panel>

Comment faire en sorte que le panel ne s'agrandisse qu'horizontalement, et n'affiche qu'un ascenseur horizontal?

Merci de vos réponses.

Nixar

[gyzmau]

je pense que cela peut se resoudre en css peux tu me montrer le code générer de ton update panel. ainsi que les css

[Nixar]

BOnjour et merci de ta réponse,

Voici le code html généré :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//Conteneur
<div style="height: 120px; width: 760px; overflow-x: scroll; text-align: center; vertical-align: middle; line-height: 120px;" class="PlusADroite AligneMilieu PanelPellicule" id="PanelPellicule">
			//Update progress lors du chargement
                        <div style="display: none;" id="UpdateProgressPellicule">
 
                                <img align="middle" style="border-width: 0px;" src="../../../../../images/ajax-loader-DDL.gif" id="ImageUpdateProgressPellicule"/>
                                Mise à jour des miniatures...
			</div>
                           //les vignettes
                        <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20de%20Arriere_200k.jpg" class="Image" name="ctl08"/>
                        <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20(6)%20de%20Arriere_200k.jpg" class="Image" name="ctl09"/>
                        <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20(5)%20de%20Arriere_200k.jpg" class="Image" name="ctl10"/>
                        <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20(4)%20de%20Arriere_200k.jpg" class="Image" name="ctl11"/>
		</div>

Merci de ta réponse, et merci de passer du temps sur mon problème !!

Nixar
Le CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.PanelPellicule {StyleSheet.css (ligne 436)
}
.PlusADroite {StyleSheet.css (ligne 417)
clear:none;
float:left;
}
.AligneMilieu {StyleSheet.css (ligne 232)
margin:0 auto;
text-align:center;

[gyzmau]

Pas de problème .

Alors en premier lieux il faut retirer le line-height. Il ne sert pas le height suffit.

sinon ton problème vient du fait que le contenu n'a pas de taille supérieur au contenant.
Les element input sont des element inline qui se mettent les uns à la suite des autres tant qu'ils le peuvent.
lorsque qu'il arrive à la largeur maximal(width) "il passe à la ligne"(enfin pas vraiment c'est tjs une seule ligne mais qui se continue en dessous) peu importe le overflow.(pas la peine de précise de largeur aux elments inline il ne la prenne pas en compte)
ex: pour resoudre se probleme il faudrait qu'il soit dans une div(ou tt autre élement block) avec une largeur précisée superieur au contenant et qui contienne tout tes input.

Je sais pas si j'ai était clair? (pas facile à expliquer à l'écrit, n'hesite pas si tu comprend pas).
Comment génére tu tes input image? pour voir ce qu'on peut faire pour résoudre ton probléme.

[Nixar]

Booooon... ON avance
Alors voilà : j'ai encapsulé la création de mes images comme suit :

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
foreach (DataRow Ligne in DataSetPhotosDeLaGalerie.Tables[0].Rows)
                {
                      // Création du conteneur
                      Panel Conteneur = new Panel();
                     // Lui assigne une taille fixe
                      Conteneur.Width = new Unit(100);
                     // Les CSS son en dessous
                      Conteneur.CssClass = "PlusADroite MarginLeftRight20px";
                      ImageButton Miniature = new ImageButton();
                      Miniature.ImageUrl = Ligne["PhotoVignettePath"].ToString();
                      Miniature.ImageAlign = ImageAlign.Middle;
                      Miniature.Command += new CommandEventHandler(Miniature_Command);
                      Miniature.CommandName = Ligne["PhotoVignettePath"].ToString();
                      Miniature.CommandArgument = Ligne["PhotoId"].ToString();
                      Miniature.CssClass = "Image";
                      Conteneur.Controls.Add(Miniature);
                      PanelPellicule.Controls.Add(Conteneur);
 
            }

Le CSS (la classe PlusADroite sert à faire s'afficher toutes les vignettes côte à côte):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.MarginLeftRight20px
{
	margin-left:20px;
	margin-right:20px;
	}
.PlusADroite
{
	float:left;
	clear:none;
 
	}

Du coup, la on a bien un div qui encapsule chaque input inline...
Ce que ca donne :



Sauf que là, il passe quand même à la ligne quand il bute contre le bord de mon panelPelicule...

Du coup je ne comprends pas : où est le souci ?

Merci !!

[gyzmau]

c'est pas tt a fait comme ca le fait de mettre float a élément block le passe en inline.

La solution c'est de "calculer" la taille de ton conteneur par rapport à ton nombre d'image.

et le conteneur dois contenir toute les images.

Code :

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

1
2
3
4
5
6
<div style="width:400px;">
 <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20de%20Arriere_200k.jpg" class="Image" name="ctl08"/>
                        <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20(6)%20de%20Arriere_200k.jpg" class="Image" name="ctl09"/>
                        <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20(5)%20de%20Arriere_200k.jpg" class="Image" name="ctl10"/>
                        <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20(4)%20de%20Arriere_200k.jpg" class="Image" name="ctl11"/>
<div>