IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

ASP.NET Discussion :

asp.net scrollbar et css


Sujet :

ASP.NET

  1. #1
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Septembre 2012
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Septembre 2012
    Messages : 166
    Par défaut asp.net scrollbar et css
    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

  2. #2
    Expert confirmé
    Avatar de popo
    Homme Profil pro
    Analyste programmeur Delphi / C#
    Inscrit en
    Mars 2005
    Messages
    2 934
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Analyste programmeur Delphi / C#
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2005
    Messages : 2 934
    Par défaut
    1. Remplace #ScrollBar1 par .Scrollbar
    2. Ajout un attribut class="Scrollbar" sur chacune de tes scrollbar.

  3. #3
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Septembre 2012
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Septembre 2012
    Messages : 166
    Par défaut
    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 ?

  4. #4
    Expert confirmé
    Avatar de popo
    Homme Profil pro
    Analyste programmeur Delphi / C#
    Inscrit en
    Mars 2005
    Messages
    2 934
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Analyste programmeur Delphi / C#
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2005
    Messages : 2 934
    Par défaut
    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".

  5. #5
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Septembre 2012
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Septembre 2012
    Messages : 166
    Par défaut
    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).

Discussions similaires

  1. Conception d'une GridView ASP.NET en utilisant CSS
    Par ArtherKing dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 03/08/2015, 14h53
  2. ASP.NET 2.0 CSS Friendly Control Adapters
    Par khayyam90 dans le forum Contribuez
    Réponses: 0
    Dernier message: 28/12/2010, 14h59
  3. asp.net et fichier css
    Par tortuegenie dans le forum ASP.NET
    Réponses: 8
    Dernier message: 02/01/2008, 11h59
  4. probleme css avec asp.net
    Par toddy_101 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 28/03/2006, 11h37
  5. problèmes avec les CSS en ASP.NET ?
    Par fr3d dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 16/09/2005, 14h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo