[TabContainer]Cacher un onglet mais pas son contenu

Version imprimable

10/05/2011, 15h39
Spellbinder

[TabContainer]Cacher un onglet mais pas son contenu

Bonjour :)

Question par rapport au module TabContainer de l'AjaxControlToolkit :

J'ai 3 onglets (exemple) : "un", "deux" et "trois". Quand un utilisateur arrive sur la page, il clique sur un bouton de validation, je charge les données dans chaque repeater contenu dans "un" et "deux" et hop j'affiche le tabContainer, jusque là pas trop compliqué ^^

Le 3ème onglet devrait être par défaut caché ... chaque ligne d'un repeater ayant un bouton "voir" (ou détails) dès qu'on clique dessus, je remplis un Label contenu dans le 3ème onglet et je switch vers l'onglet (avec la propriété ActiveTab) et je l'affiche bien sûr.

Mais, je me demandais s'il était possible de switcher vers le 3ème onglet, mais sans afficher l'onglet ! Je veux dire, afficher le contenu normalement, mais cacher l'onglet, de sorte qu'on ne s'aperçoive pas qu'un onglet s'est rajouté, j'espère que vous m'avez compris ?! En gros, le changement d'onglet se fait de façon transparente pour l'utilisateur.... j'ai essayé de cacher l'onglet avec donc

Code:

TabPanel3.Visible = false;

puis de switcher vers cet onglet mais il switch vers le 2ème ... j'en conclu qu'il ne "voit" plus le 3ème onglet =/

Merci :)
10/05/2011, 15h42
jbrasselet

Tu pourrais peut être modifier le css de cet onglet pour l'effacer non ?

Citation:

Envoyé par jbrasselet

Tu pourrais peut être modifier le css de cet onglet pour l'effacer non ?

Bien vu, j'y ai pensé, mais rien n'a y fait ou alors je m'y suis mal pris x)

Voilà le css actuellement utilisé :

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
.ajax__tab_container
{
    color: #333399;
}
.property_tab .ajax__tab_outer .ajax__tab_inner .ajax__tab_tab
{
    margin-right: 0;
}
.property_tab .ajax__tab_header
{
    text-align:center;
    font-family: verdana,tahoma,helvetica;
    font-size: 14px;
    background: url(Tabs/tab-line.gif) repeat-x bottom;
}
.property_tab .ajax__tab_outer
{
    padding-right: 4px;
    background: url(Tabs/tab-right.gif) no-repeat right;
    height: 21px;
}
.property_tab .ajax__tab_inner
{
    padding-left: 2px;
    background: url(Tabs/tab-left.gif) no-repeat;
}
.property_tab .ajax__tab_tab
{
    height: 13px;
    padding: 4px 40px;
    margin: 0 !important;
    background: url(Tabs/tab.gif) repeat-x;
}
.property_tab .ajax__tab_hover .ajax__tab_outer
{
    background: url(Tabs/tab-hover-right.gif) no-repeat right;
}
.property_tab .ajax__tab_hover .ajax__tab_inner
{
    background: url(Tabs/tab-hover-left.gif) no-repeat;
}
.property_tab .ajax__tab_hover .ajax__tab_tab
{
    background: url(Tabs/tab-hover.gif) repeat-x;
}
.property_tab .ajax__tab_active .ajax__tab_outer
{
    background: url(Tabs/tab-active-right.gif) no-repeat right;
}
.property_tab .ajax__tab_active .ajax__tab_inner
{
    background: url(Tabs/tab-active-left.gif) no-repeat;
}
.property_tab .ajax__tab_active .ajax__tab_tab
{
    background: url(Tabs/tab-active.gif) repeat-x;
}
.property_tab .ajax__tab_body
{
    font-family: verdana,tahoma,helvetica;
    font-size: 7pt;
    border: 1px solid #999999;
    border-top: 0;
    padding: 8px;
    margin: 0px;
    background-color: #ffffff;
}

le tabContainer a comme CssClass "property_tab".

Je ne vois pas comment spécifier à un onglet d'utiliser une css en particulier, à part mettre CssClass = "test" dans la déclaration du 3ème onglet et ainsi rajouter une css nommé test avec comme propriété

Code:

visibility: hidden;

mais ca n'a pas marché ! Donc je dois m'y prendre mal !

Si tu as une idée ... ;)

Thanks