CSS Flajaxian FileUploader [Résolu]

[BROWNY]

Bonjour,

j'utilise l'uploader flajaxian, en utilisant la feuille CSS indiquée sur le site officiel :

Code :

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
 
.Flajaxian_FileBox
{
    font-family:Arial,Verdana,sans-serif;
    font-size:12px;
    z-index:900;
    position:absolute;
    left:0px;
    top:0px;
    background-color:White;
    display:none;
}
.Flajaxian_FileBoxHeader
{
    width:250px;
    height:16px;
    border:solid 1px #C8C8C8;
}
.Flajaxian_FileBoxHeaderText
{
    float:right;
    width:230px;
    text-align:center
}
.Flajaxian_FileBoxHeaderArrowHolder
{
    float:left;
    width:16px;
    cursor:pointer;
}
.Flajaxian_FileBoxFileList
{
    width:250px;
    height:200px;
    overflow:auto;
    border-left:solid 1px #C8C8C8;
    border-right:solid 1px #C8C8C8;
    border-bottom:solid 1px #C8C8C8;
}
.Flajaxian_FileBoxFileListRow
{
    float:left;
    width:230px;
    padding-left:2px;
    text-align:left;
}
.Flajaxian_FileBoxFileListRow:hover
{
    background-color:#FFC;    
}
.Flajaxian_FileBoxFileListRowError
{
    float:left;
    width:230px;
    padding-left:2px;
    background-color:#F66;
    text-align:left;
}
.Flajaxian_FileBoxFileListRowUploading
{
    float:left;
    width:230px;
    padding-left:2px;
    background-color:#FFC;
    text-align:left;
}
.Flajaxian_FileBoxFileListRowUploaded
{
    float:left;
    width:230px;
    padding-left:2px;
    color:#999;
    text-align:left;
}
.Flajaxian_FileBoxFileListRowCloseBtn
{
    float:left;
    width:16px;
    padding-right:2px;
    cursor:pointer;
}

Sur mon poste, en debug ou mis sous IIS, je n'ai pas de problème d'affichage.
Par contre quand je copie les paquet de déploiement sur le serveur de prod (les mêmes que ce que j'utilise pour déployer en local), j'ai un décalage.
J'explique:
- je clic sur "Browse"
- je vais chercher mes fichiers
- je fais ouvrir
- C'EST LA LE PROBLEME: le controle m'affiche une liste des fichiers que j'ai sélectionnés. Cette liste au lieu d'être au même niveau que mon controle, se retrouve bien en dessous dans ma page.
- je clic sur Upload
-Je retourne dans le cas normal

C'est juste un problème de visualisation car le controle se comporte nickel à part ça.

Quelqu'un aurait une piste, du pourquoi le CSS n'est pas interpréter correctement.

Je précise que j'ai une feuille CSS pour mes pages et une spécifique à ce contrôle.

Voici mon code d'utilisation dans ma pabe aspx :

Code :

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
 
<%@ MasterType VirtualPath="~/Master/MasterPage.master" %>
 
<%@ Page Title="" Language="VB" MasterPageFile="~/Master/MasterPage.master" AutoEventWireup="false"
    CodeFile="GenereMiseADisposition.aspx.vb" Inherits="GenereMiseADisposition" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
<%@ Register TagPrefix="fjx" Namespace="com.flajaxian" Assembly="com.flajaxian.FileUploader" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript">
        //'<%# eval("""" & HelperParams.GetConfig(Params.PARAM_FILTRE_UPLOAD) & """") %>'
        function FileStateChanged(uploader, file, httpStatus, isLast) {
            Flajaxian.fileStateChanged(uploader, file, httpStatus, isLast);
            var t = Flajaxian.$("MyDiv");
            switch (file.state) {
                case 3:
                    t.innerHTML += "name:" + file.name + " state:Ok </br>";
                    break;
                case 5:
                    t.innerHTML += "name:" + file.name + " state:Erreur </br>";
                    break;
            }
        }
 
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Contenu" runat="Server">
    <table class="TblForm" id="EDITFRM" runat="server">
        <tr>
            <td>
                Liste des fichiers (100Mo Max) *
            </td>
            <td>
                <div id="MyDiv">
                </div>
                <fjx:FileUploader ID="uplFichier" runat="server" UseInsideUpdatePanel="true" SuppressQueryStringParametersOnUploadUrl="False"
                    CssUrl="~/CSS/FileUploader.css" JsFunc_FileStateChanged="FileStateChanged" MaxNumberFiles="100"
                    RequestAsPostBack="True" TransparentBackground="true" IsDebug="false" MaxFileSize="100MB"
                    MaxFileQueueSize="100MB" MaxFileSizeReachedMessage="La taille maximale d'upload est de 100Mo">
                </fjx:FileUploader>
            </td>
        </tr>
         <tr>
            <td colspan="2">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td colspan="2">
             <asp:Button ID="btnValider" runat="server" Text="Envoyer" CssClass="btnValid" />
            </td>
        </tr>
    </table>
 
</asp:Content>

Merci d'avance

[BROWNY]

Ma question n'a pas l'air d'inspirer beaucoup, oups.

Si c'est pas clair, n'hésitez pas à demander

[BROWNY]

Je recherche toujours mais rien de probant.
Est-il possible que dans certains cas, le controle ne trouve pas son CSS, même s'il lui ai spécifié?

Pourtant la page, trouve bien le XXX.CSS à appliquer.

[BROWNY]

En fait, deux paramètres dans le CSS génèrent le problème :
Dans le Flajaxian_FileBox, il faut retirer le position : absolute (problème de décalage).

Et dans Flajaxian_FileBoxFileList, il faut retirer height:200px car sinon la liste ne s'adapte pas automatiquement au nombre de fichiers sélectionnés.

Ce qui donne :

Code :

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
 
.Flajaxian_FileBox
{
    font-family:Arial,Verdana,sans-serif;
    font-size:12px;
    z-index:900;
    left:0px;
    top:0px;
    background-color:White;
    display:none;
}
.Flajaxian_FileBoxHeader
{
    width:250px;
    height:16px;
    border:solid 1px #C8C8C8;
}
.Flajaxian_FileBoxHeaderText
{
    float:right;
    width:230px;
    text-align:center
}
.Flajaxian_FileBoxHeaderArrowHolder
{
    float:left;
    width:16px;
    cursor:pointer;
}
.Flajaxian_FileBoxFileList
{
    width:250px;
    overflow:auto;
    border-left:solid 1px #C8C8C8;
    border-right:solid 1px #C8C8C8;
    border-bottom:solid 1px #C8C8C8;
}
.Flajaxian_FileBoxFileListRow
{
    float:left;
    width:230px;
    padding-left:2px;
    text-align:left;
}
.Flajaxian_FileBoxFileListRow:hover
{
    background-color:#FFC;    
}
.Flajaxian_FileBoxFileListRowError
{
    float:left;
    width:230px;
    padding-left:2px;
    background-color:#F66;
    text-align:left;
}
.Flajaxian_FileBoxFileListRowUploading
{
    float:left;
    width:230px;
    padding-left:2px;
    background-color:#FFC;
    text-align:left;
}
.Flajaxian_FileBoxFileListRowUploaded
{
    float:left;
    width:230px;
    padding-left:2px;
    color:#999;
    text-align:left;
}
.Flajaxian_FileBoxFileListRowCloseBtn
{
    float:left;
    width:16px;
    padding-right:2px;
    cursor:pointer;
}

Voila.