Discussion :

[patrickvier]

Bonjour à tous,
Tout d'abord, je dois vous dire que je ne suis pas un kador sur le CSS.
Je dev une application sous ASP et j'ai besoin de designer les scrollbars qui par défaut ne sont pas très jolies.
J'ai trouvé sur internet des éléments de design que j'ai appliqué à ma feuille de style css. Mais cette mise en forme ne s'applique qu'a 1 seul composant ScrollBar1, puisque le nom commence par un # - code css :

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
/* design : SCROLL BARS */
/*barre entiere*/
#ScrollBar1::-webkit-scrollbar {
  width: 10px;
  background-color:transparent;
}
/*Bg de la barre*/
#ScrollBar1::-webkit-scrollbar-track {
    /*border-radius: 5px;*/
    background-color:rgba(250, 250, 250, 0.05);
}
#ScrollBar1::-webkit-scrollbar-track:hover {
    background-color:rgba(250, 230, 250, 0.15);
}
/*curseur de la barre*/
#ScrollBar1::-webkit-scrollbar-thumb
{
  border-radius: 5px;
  /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
  background-color:rgba(250,250,250,0.1);
}
#ScrollBar1::-webkit-scrollbar-thumb:hover {
  background-color:rgba(250, 230, 250, 0.4);
}

Je souhaite que ces informations de design de scrollbar puissent être embarquées dans un style que j'appliquerai aux différents composants qui en ont besoin.
C'est là que j'ai besoin de votre aide... comment écrire ces propriétés en tant que un style ?
Merci
Patrick

[popo]

1. Remplace #ScrollBar1 par .Scrollbar
2. Ajout un attribut class="Scrollbar" sur chacune de tes scrollbar.

[patrickvier]

Bonsoir Popo,
J'avais essayé, et je l'ai refait, mais cela ne fonctionne pas.
Si je fais comme tu me l'écris, la class ne semble pas etre prise en compte et je retrouve les barres avec le design par defaut... ce que je ne souhaite pas.
cela vient peut etre du html ?
Ci-dessous le code :

Code :

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

1
2
3
4
5
6
<div class="Scrollbar ItemsList" style="height:720px; overflow-y:auto; margin-top:5px;">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:DataList ID="DLT1" runat="server" OnItemCommand="DLT1_ItemCommand" CssClass="DlRowsMain">
<ItemTemplate>
<%--DataList It

Qu'en penses tu ?

[popo]

Tu as bien remplacé tous les #ScrollBar1 dans le CSS ?

La div sur laquelle tu appliques la classes, c'est ta scrollbar ?
Tu avais parlé d'une #Scrollbar, je m'attendais à trouver un attribut id="Scrollbar1".

[patrickvier]

Bonsoir Popo,
Oui, le 2eme code c'est apres le remplacement des #ScrollBar1 en .ScrollBar
N'ayant plus besoin de l'id, je l'ai enlevé...
Suite à ton conseil, voila le css;

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
/* design : SCROLL BARS */
/*barre entiere*/
.ScrollBar1::-webkit-scrollbar {
  width: 10px;
  background-color:transparent;
}
/*Bg de la barre*/
.ScrollBar1::-webkit-scrollbar-track {
    /*border-radius: 5px;*/
    background-color:rgba(250, 250, 250, 0.05);
}
.ScrollBar1::-webkit-scrollbar-track:hover {
    background-color:rgba(250, 230, 250, 0.15);
}
/*curseur de la barre*/
.ScrollBar1::-webkit-scrollbar-thumb {
  border-radius: 5px;
  /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
  background-color:rgba(250,250,250,0.1);
}
.ScrollBar1::-webkit-scrollbar-thumb:hover {
  background-color:rgba(250, 230, 250, 0.4);
}

suivi du html :

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
<%-- DataList composant --%>
<div class="Scrollbar1 ItemsList" style="height:720px; overflow-y:auto; margin-top:5px;">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:DataList ID="DLT1" runat="server" OnItemCommand="DLT1_ItemCommand" CssClass="DlRowsMain">
<ItemTemplate>
<%--DataList Item--%>
<asp:Panel ID="Dlt1Cell_Select" runat="server" CssClass="Dtl1_Gene">
    <div class="Dtl1_State State_Fin"></div>
 
    <div class="Dtl1_c2">
        <asp:Textbox ID="LabCodeItem" runat="server" CssClass="Dlt1_CodeItem" Text='<%# Eval("Code")%>' ReadOnly="True" />
    </div>
 
    <div class="Dtl1_c3">
        <asp:Button ID="DLT1_Nom" runat="server" CssClass="Dlt1_Btn_Nom AddEllipsis" 
            Text='<%# Eval("Nom")%>' CommandName="select" />
        <asp:Textbox ID="TbxCirco" runat="server" CssClass="Dlt1_Circo" Text="circonscipition sjfs fygsydudgdgfdg fin" ReadOnly="true" />
        <asp:DropDownList ID="DLT1_Source" runat="server" Width="255px" Height="25px" CssClass="Ddl1 DLTSource" AutoPostBack="true" />
    </div>
</asp:Panel>
 
<%--END : DataList Item--%>
 
<%--HidePack--%>
<asp:Panel ID="Panel1" runat="server" Visible="false">
    <asp:Label ID="Id" runat="server" Text='<%# Eval("Id")%>' />
    <asp:Label ID="IdSource" runat="server" Text='<%# Eval("IdSource")%>' />
    <asp:Label ID="IdIsActive" runat="server" Text='<%# Eval("IsActive")%>' />
</asp:Panel>
</ItemTemplate>
<AlternatingItemStyle CssClass="DlAlternate" />
<SeparatorTemplate>
<div class="DlSeparator"></div>
</SeparatorTemplate>
 
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
</div>

Avec ça, j'ai le design par defaut des barres !
Je me suis trompé ?
Patrick
PS : Il y a plusieurs div utilisées en scollbar. le code te montre la structure que j'ai mis en place pour 1 scrollbar de cette partie de la page. Dans une autre partie, il y a aussi une scrollbar... qui doit etre identique (design).