Insertion d'un scrollbar dans un TabContainer
Bonjour,
J'ai un TabContainer dans lequel j'ai une zone zoneBoxCriteresReferencement.
Celle-ci contient deux autres zones zoneBoxSelectionsPossibles et zoneBoxVosSelections côte à côte.
La première zone zoneBoxSelectionsPossibles contient un Treeview et a une taille qui s'ajuste en fonction du déploiement de l'arbre.
Mon problème est que ma deuxième zone zoneBoxVosSelections va se mettre en dessous.
Ce que je voudrais, c'est insérer un scrollbar à mon TabContainer lorsque cela est nécéssaire afin que les deux zones zoneBoxSelectionsPossibles et zoneBoxVosSelections restent côte à côte lorsque l'arbre est déployé.
Voici mon code, si quelqu'un voit comment faire, merci.
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
| <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" CssClass="ajax__tab_yuitabview-theme" >
<asp:TabPanel ID="TabPanel1" runat="server" HeaderText="Données de détection">
<ContentTemplate>
<div id="zoneBoxCriteresReferencement">
<div id="boitelibelleCriteresReferencement">
<asp:Panel ID="CriteresReferencement" runat="server" style="background: #A8C1DF; width:220px ;text-align:center; color:#F7FBFA" > Critères de référencement </asp:Panel>
</div>
<asp:RoundedCornersExtender ID="RoundedCornersExtender3" TargetControlID="CriteresReferencement" Corners="Top" Radius="6" runat="server"> </asp:RoundedCornersExtender>
<asp:Panel ID="Panel1" runat="server" ScrollBars="auto">
<div id="boiteCriteresReferencement">
<asp:Panel ID="Panel2" runat="server" ScrollBars="Auto">
<div id="zoneBoxSelectionsPossibles">
<div id="boitelibelleSelectionsPossibles">
<asp:Panel ID="SelectionsPossibles" runat="server" style="background: #A8C1DF; width:180px ;text-align:center; color:#F7FBFA" > Sélections possibles </asp:Panel>
</div>
<asp:RoundedCornersExtender ID="RoundedCornersExtender4" TargetControlID="SelectionsPossibles" Corners="Top" Radius="6" runat="server"> </asp:RoundedCornersExtender>
<div id="boiteSelectionsPossibles">
<asp:Panel ID="PanelSelectionsPssibles" runat="server" >
<asp:TreeView ID="ReferencesNominatives" runat="server" ImageSet="Simple"
NodeIndent="10" >
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle Font-Underline="True" ForeColor="#DD5555" />
<SelectedNodeStyle Font-Underline="True" ForeColor="#DD5555"
HorizontalPadding="0px" VerticalPadding="0px" />
<NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
HorizontalPadding="0px" NodeSpacing="0px" VerticalPadding="0px" />
<Nodes >
<asp:TreeNode Text="Références nominatives" NavigateUrl="" Expanded="False">
...
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</asp:Panel>
</div> <%-- Fin de boiteSelectionsPossibles --%>
</div> <%-- Fin de zoneBoxSelectionsPossibles --%>
<div id="zoneBoxVosSelections">
<div id="boitelibelleVosSelections">
<asp:Panel ID="VosSelections" runat="server" style="background: #A8C1DF; width:180px ;text-align:center; color:#F7FBFA" > Vos sélections </asp:Panel>
</div>
<asp:RoundedCornersExtender ID="RoundedCornersExtender5" TargetControlID="VosSelections" Corners="Top" Radius="6" runat="server"> </asp:RoundedCornersExtender>
<div id="boiteVosSelections">
<asp:Panel ID="PanelVosSelections" runat="server" Height="300px" ScrollBars="Auto"></asp:Panel>
</div> <%-- Fin de boiteVosSelections --%>
</div> <%-- Fin de zoneBoxVosSelections --%>
</asp:Panel>
</div> <%-- Fin de boiteCriteresReferencement --%>
</asp:Panel>
</div> <%-- Fin de zoneBoxCriteresReferencement --%>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer> |
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
| #zoneBoxCriteresReferencement
{
position:relative;
width:99%;
margin-top: 10px;
}
#zoneBoxSelectionsPossibles,#zoneBoxVosSelections
{
float:left;
width:auto;
min-width:290px;
margin-top: 10px;
margin-left:10px;
}
/*Partie CritèresReferencement*/
#boiteCriteresReferencement
{
float:left;
width:98.1%;
border: 1px solid #C2C4C6;
padding: 5px;
margin-left:1px;
background: #DEE2EA;
}
#boiteSelectionsPossibles,#boiteVosSelections
{
min-width:275px;
width:auto;
min-height:300px;
border: 1px solid #C2C4C6;
padding: 5px;
margin-left:1px;
background: #ECEBEF;
} |
