Discussion :

[klr54000]

Bonjour,
Je ne savais pas trop ou mettre ce poste car il regroupe un peu tout :
- Css
- SharePoint
- XSLT

Dans le cadre d'un développement j'ai personnalisé une Web part SharePoint en lui incluant un XSLT. Le but étant d'afficher une liste d'application sur deux colonnes.
J'y arrive seulement il m'affiche des espaces blancs entre les différentes div et je ne comprend pas pourquoi...

Voici le code du XSLT

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" 
				xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" 
				version="1.0" 
				exclude-result-prefixes="xsl msxsl ddwrt" 
				xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
				xmlns:asp="http://schemas.microsoft.com/ASPNET/20" 
				xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" 
				xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
				xmlns:msxsl="urn:schemas-microsoft-com:xslt" 
				xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
				xmlns:o="urn:schemas-microsoft-com:office:office" 
				xmlns:ddwrt2="urn:frontpage:internal">
 
<xsl:include href="/_layouts/xsl/main.xsl"/>  
 <xsl:include href="/_layouts/xsl/internal.xsl"/>  
 
	<xsl:output method="xml" indent="no" media-type="text/html" omit-xml-declaration="yes"/>
	<xsl:key name="Categorie" match="Row" use="@Categorie" />
	<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" 
							xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" 
							xmlns:asp="http://schemas.microsoft.com/ASPNET/20" 
							xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" 
							xmlns:SharePoint="Microsoft.SharePoint.WebControls"
							xmlns:o="urn:schemas-microsoft-com:office:office" 
							xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
							ddwrt:ghost="">
 
		<xsl:apply-templates/>	
		<div style="width:800px;height:800px;border:1px red solid;overflow:hidden;">
			<ul style="list-style-type:none;list-style-image:none;">			
				<xsl:for-each select="/dsQueryResponse/Rows/Row[generate-id(.)=generate-id(key('Categorie',@Categorie))]/@Categorie">			
					<xsl:sort />
					<div style="width:360px;border:1px green solid;float:left;">		
						<div style="background-color:rgb(228, 232, 240);font-size:10pt;font-weight:bold;margin-bottom:5px; padding-top:2px;padding-right:0px;padding-bottom:2px;padding-left:3px;width:45%;">				
							<xsl:value-of select="."/>				
						</div>
						<!--<xsl:for-each select="key('Categorie', .)[position() mod 3 = 3]">-->
 
						<xsl:for-each select="key('Categorie', .)">						
							<li>
								<table width="100%" border="0" cellSpacing="0" cellPadding="0">
									<tr>
										<td style="padding-right:5px;padding-left:0px;width:40%;">
											<xsl:element name="img">
												<xsl:attribute name="src">
													<xsl:value-of select="@Icone" />
												</xsl:attribute>
											</xsl:element>	
										</td>
										<td style="color:#003399;font-family:Tahoma;font-size:8pt;text-decoration:none;width:25%;">
											<a>
												<xsl:attribute name="href">
													<xsl:value-of select="@Lien_bibliotheque" />
												</xsl:attribute>
												<xsl:attribute name="title">
													Lien vers la bibilothèque
												</xsl:attribute>
												<b><xsl:value-of select="@Title" disable-output-escaping="yes" /></b>
											</a>
										</td>
										<td style="color:#003399;font-family:Tahoma;font-size:8pt;text-decoration:none;width:10%;">
											<a>
												<xsl:attribute name="href">
													<xsl:value-of select="@Site" />
												</xsl:attribute>
												<img src="../../SiteCollectionImages/1438691970_www-world-globe.png" title="Lien vers le site ou l'application" border="0" />
											</a>	
										</td>
										<td style="width:25%;text-align:center;">
											<a href="javascript:OpenPopUpPage('../../Lists/ListeApplicationsSOGETREL/EditItem.aspx?ID={@ID}')">
												Modifier       <img alt="Modifier" border="0" src="../../SiteCollectionImages/1439564531_sign-up.png"/>
											</a>
										</td>
									</tr>
								</table>																																				
							</li>	
						</xsl:for-each>																												
					</div>
				</xsl:for-each>
				<div style="clear::both"></div>		
			</ul>
		</div>
	</xsl:template>
</xsl:stylesheet>

Voici le rendu :


Quelqu'un aurait-il la solution pour afficher cela convenablement ?

[thelvin]

Hello,

En réalité ce n'est qu'une question CSS. Le reste n'est qu'accessoire.

Tes cases n'ont pas toutes la même hauteur, là. Dans ce cas, il n'y a en principe pas grand-chose à faire pour qu'elles se mettent en colonne sans vides, automatiquement sans que tu fasses les colonnes toi-même.
float: left impose aux cases de se mettre, soit plus à droite, soit s'il n'y a pas la place plus bas, que la case précédente. Du coup à gauche elles ne vont jamais se coller pile à la case du dessus, puisque ce n'est pas elle la case précédente. La case précédente est celle de droite.

À la rigueur tu peux envisager d'utiliser les propriétés de colonne de CSS, mais ça n'a pas l'air bien définitif pour l'instant (usage obligatoire de préfixes.)

Et bien sûr, manuellement ou avec colonnes CSS, la lecture se fera d'abord de haut en bas sur la première colonne, puis passer à la deuxième colonne de gauche à droite. Il n'y a pas de logique de flux qui aille de gauche à droite puis de haut en bas.