[WebForm] Faire scroller une treeview au lieu de dépasser de l’écran

Version imprimable

Bonjour à tous,

NB: j'utilise VS 2012

gros débutant sur ASP.Net, le bloque sur un problème :

Mon "site.master" contient :

- la nav-bar en haut (la barre de navigation d'origine)

- une zone de contenu au centre

Code:

1
2
3
        <div class="container-fluid body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"> </asp:ContentPlaceHolder>
        </div>

- une nav-bar en bas

Code:

1
2
3
4
5
6
7
        <nav class="navbar navbar-default navbar-fixed-bottom">
          <div class="container-fluid">
                <footer class="footer">
                    <p>Test seb 02 &copy; <%: DateTime.Now.Year %></p>
                </footer>
          </div>
        </nav>

Mon "default.aspx" contient un treeview (dans un panel) sur la gauche et une zone de contenu (du texte actuellement) sur la droite.

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
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="testseb._Default" %>
 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
 
    <div class="container-fluid">
 
        <div class="row">
 
            <div class="col-xs-12 col-sm-12 col-md-2">
 
                <asp:Panel ID="Panel1" runat="server" ScrollBars="Vertical">
                    <asp:TreeView ID="TreeView1" runat="server"> </asp:TreeView>
                </asp:Panel>
 
            </div>
 
            <div class="hidden-xs hidden-sm col-md-10">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam maximus mi, eget porttitor dolor semper et. Donec congue massa nec venenatis accumsan. Phasellus molestie elit ut egestas ullamcorper. Nullam ipsum lorem, semper vel ex et, suscipit dignissim odio. Pellentesque iaculis blandit mi, eu consequat tortor. Curabitur scelerisque purus ac mi maximus molestie. Ut hendrerit venenatis ex, a laoreet nibh mattis sed. Sed convallis neque at justo sollicitudin tempor. Aenean lacinia scelerisque ipsum nec tempus.Ut mattis, enim quis gravida tempus, libero est iaculis mauris, eu lobortis neque mauris et odio. Proin tortor ligula, pellentesque in mi a, dignissim condimentum dui. Sed non libero vitae lectus euismod fermentum id sit amet justo. Cras ut lacus nisl. Pellentesque commodo libero lacus, mollis imperdiet nibh ornare id. Aenean vitae mi at est pulvinar elementum sed nec turpis. Morbi et elit nunc. Integer feugiat non mi non dignissim. Praesent at volutpat ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque viverra suscipit porta. Praesent diam ex, placerat nec erat in, mollis bibendum nulla. Mauris vulputate diam at ex sollicitudin aliquam.
            </div>
 
        </div>
 
    </div>
 
</asp:Content>

Mon treeview va se remplir dynamiquement et je voudrais que quand il y a trop de données pour l'écran, ce soit le treeview qui scrolle et non la page entière ( = que mon texte reste en place ).

ça doit sans doute être simple mais je n'y arrive pas ...

Merci, @+
Seb.

12/06/2015, 10h28
DotNetMatt
Tu peux utiliser la propriété overflow en CSS en veillant à définir une hauteur à partir de laquelle la scrollbar s'affichera :
Code:

1 2 3 4 5 .TaClass { width: 10px; height: 10px; overflow: scroll; }
Plus d'info ici : CSS overflow Property.
12/06/2015, 12h00
Arno_94

Salut,

Il te faut un conteneur à taille fixe et scrollable.

Tu entoures ton treeview d'un div dont tu définis la taille et tu lui colles un overflow-x de type scrollbar (ou overflow-y). En gros ça lui dit : "Si t'as du contenu qui dépasse, fais moi apparaître une scollbar). Ca devrait résoudre ton souci. Comme tu l'auras compris sur mon hésitation entre x et y, tu peux gérer le débordement dans les deux sens (cela dit, deux scrollbars, c'est pas jojo).

Bon courage.
12/06/2015, 14h35
Seb.26

Citation:

Envoyé par Arno_94

Salut,

Il te faut un conteneur à taille fixe et scrollable.

Tu entoures ton treeview d'un div dont tu définis la taille et tu lui colles un overflow-x de type scrollbar (ou overflow-y). En gros ça lui dit : "Si t'as du contenu qui dépasse, fais moi apparaître une scollbar). Ca devrait résoudre ton souci. Comme tu l'auras compris sur mon hésitation entre x et y, tu peux gérer le débordement dans les deux sens (cela dit, deux scrollbars, c'est pas jojo).

Bon courage.

OK, mais je voudrais que mon treeview prenne toute la hauteur de l'écran ...

NB: j'avais mis mon treeview dans un panel, je crois que c'est un peu l'idée que tu propose, non ?

... merci pour vos réponses, j’essaye de les appliquer ... c'est un poil chaud quand on débarque du WinForm ... :oops:

Salut,

Un panel est un contrôle serveur, je crois qu'il est traduit par "<div>".

Ok, maintenant je comprends mieux ton besoin. Dans ce cas, il te faut faire un peu de JS. Mes exemples de code sont en jQuery.

Donc, tu entoures ton treeview d'un div.

Ensuite, tu te fais une petite méthode pour récupérer la taille de la fenêtre (à ne pas confondre avec la taille du document).
Code:

1 2 3 4 5 function GetWindowHeight() { return $(window).height(); }
Là, je récupère la taille "réelle", s'il y a des padding/margin à prendre en compte, il existe des fonctions outerHeight et innerHeight qui feront le calcul pour toi.

Au chargement de la page :
Code:

1 2 3 4 5 6 7 8 9 10 $(document).ready(function){ // On met la bonne hauteur au div conteneur $('#monDivConteneur').height(GetWindowHeight()); // On s'abonne à l'événement window resize pour recalculer au besoin $(window).resize(function(){ $('#monDivConteneur').height(GetWindowHeight()); }); }
Voilà, de cette manière (il en existe d'autres), ton div conteneur aura la taille souhaitée même quand l'utilisateur resizera la fenêtre.

A noter qu'il existe des fonctions d'animation dans jQuery, rien ne t'empèche d'effectuer le resize avec une animation de 200 ms, ce sera pas dégueu à regarder normalement...

Bon courage

wwwooowwwww ... 8O

un grand merci à toi, je vais essayer de digérer tout ça ... ;)

Je vous tiens au jus.

PS: si un panel est traduit par un <div>, il sert à rien du coup mon panel, non ?

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
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="testseb._Default" %>
 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
 
    <div class="container-fluid">
 
        <div class="row">
 
            <div class="col-xs-12 col-sm-12 col-md-2">
 
                <asp:Panel ID="Panel1" runat="server" ScrollBars="Vertical">
                    <asp:TreeView ID="TreeView1" runat="server"> </asp:TreeView>
                </asp:Panel>
 
            </div>
 
            <div class="hidden-xs hidden-sm col-md-10">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam maximus mi, eget porttitor dolor semper et. Donec congue massa nec venenatis accumsan. Phasellus molestie elit ut egestas ullamcorper. Nullam ipsum lorem, semper vel ex et, suscipit dignissim odio. Pellentesque iaculis blandit mi, eu consequat tortor. Curabitur scelerisque purus ac mi maximus molestie. Ut hendrerit venenatis ex, a laoreet nibh mattis sed. Sed convallis neque at justo sollicitudin tempor. Aenean lacinia scelerisque ipsum nec tempus.Ut mattis, enim quis gravida tempus, libero est iaculis mauris, eu lobortis neque mauris et odio. Proin tortor ligula, pellentesque in mi a, dignissim condimentum dui. Sed non libero vitae lectus euismod fermentum id sit amet justo. Cras ut lacus nisl. Pellentesque commodo libero lacus, mollis imperdiet nibh ornare id. Aenean vitae mi at est pulvinar elementum sed nec turpis. Morbi et elit nunc. Integer feugiat non mi non dignissim. Praesent at volutpat ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque viverra suscipit porta. Praesent diam ex, placerat nec erat in, mollis bibendum nulla. Mauris vulputate diam at ex sollicitudin aliquam.
            </div>
 
        </div>
 
    </div>
 
</asp:Content>

12/06/2015, 15h38
Arno_94

Panel est un contrôle ASP. Si tu as besoin d'y accéder côté serveur (ce que je ne pense pas par rapport à ton expression de besoin), alors oui, tu peux garder le panel.

Si tu n'as aucun besoin côté serveur, autant utiliser un div, oui.

En outre, pour peu que tu ne spécifies pas que tu souhaites travailler avec des ClientId statiques, ce sera pénible d'aller retrouver ton panel côté JS car l'id que tu auras défini dans le code behind sera transformé lorsqu'il générera le HTML.

Typiquement, avec le panel, tu pourrais faire le calcul de la taille dans le PageLoad code behind mais tu ne pourrais pas gérer le changement de taille de la fenêtre, à moins d'injecter du javascript en code behind aussi, mais tout ceci n'est pas très joli et pas facile à maintenir.

Je te conseille donc la version "full web" à base de HTML pur (div) et de JS.

Bon courage.
12/06/2015, 16h02
Seb.26

OK, merci ... :arf:

:zen:

J'ai comme l’impression d'être à la ramass ... :lol:
12/06/2015, 16h13
Arno_94

T'inquiètes, on l'a tous été (à la ramasse).

Tu as déjà la bonne démarche de demander de l'aide et de t'intéresser aux réponses. C'est beaucoup mieux que de se morfondre dans son coin. C'est principalement grâce aux échanges sur différents forums et à la lecture de blogs de passionnés que j'ai progressé et qu'aujourd'hui, je suis en mesure d'aider les autres.

J'en profite d'ailleurs pour passer un grand merci à toute la communauté Developpez qui est toujours là quand on a besoin d'elle ;)
14/06/2015, 16h01
Seb.26

Ô pinaise ... ça marche !!!:mrgreen:

merci bien de votre aide !