Ho 2 schede nidificate di ajax asp.net. Se imposto l'altezza iniziale della scheda padre (TabContainerMain) per dire 300, come posso impostare l'altezza della scheda figlio (SubTabContainerUg) in css o jquery? Il markup è la seguente:Come posso impostare l'altezza della tabulazione figlio in una scheda nidificata di ajax asp.net?

<!DOCTYPE html> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 
<html lang="en"> 
<head runat="server"> 
    <title></title> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 
    <script src="../js/jquery-1.6.2.js" type="text/javascript"></script> 
    <script src="../js/modernizr-latest.js" type="text/javascript"></script> 
    <script src="../js/admin.js" type="text/javascript"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> 
    </cc1:ToolkitScriptManager> 
    <section> 
     <cc1:TabContainer ID="TabContainerMain" runat="server" Height="300px"> 
      <cc1:TabPanel ID="tp2" runat="server" HeaderText="test 2"> 
       <ContentTemplate> 
       <section> 
        <div style="height: 100%; width: 30%; float: left;"> 
         <div> 
          <asp:Label ID="Label5" runat="server" Text="Search:"></asp:Label> 
          <br /> 
          <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 
          <input id="Button1" type="button" value="Search" onclick="SearchClick(this)" /> 
         </div> 
        </div> 
        <div style="width: 70%; float: left;"> 
         <cc1:TabContainer ID="SubTabContainerUg" runat="server" ActiveTabIndex="0"> 
          <cc1:TabPanel ID="subTab1" runat="server" HeaderText="Cubes"> 
           <ContentTemplate> 
           <div style="height: 100%;"> 
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
           </div> 
           </ContentTemplate> 
          </cc1:TabPanel> 
          <cc1:TabPanel ID="subTab2" runat="server" HeaderText="Reports"> 
           <ContentTemplate> 
            <div> 
             <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> 
            </div> 
           </ContentTemplate> 
          </cc1:TabPanel> 
         </cc1:TabContainer> 
        </div> 
       </section> 
       </ContentTemplate> 
      </cc1:TabPanel> 
      <cc1:TabPanel ID="tp3" runat="server" HeaderText="test 3"> 
       <ContentTemplate> 
       </ContentTemplate> 
      </cc1:TabPanel> 
     </cc1:TabContainer> 
    </section> 
    <footer> This is footer. </footer> 
    </form> 
</body> 
</html>

Nota: 1) La mia soluzione iniziale non maintanable è stato quello di impostare questa altezza nel codice dietro server come segue:

SubTabContainerUg.Height = new Unit(TabContainerMain.Height.Value - 43);

Si noti che questo codice funziona correttamente per IE7/8/9, che sta ridimensionando la sottoscheda e mantenendo il contenitore alla stessa altezza (= 300 px), ma il codice sopra non è buono perché se cambio lo stile (margini/bordi) del contenitore della scheda figlio allora il codice sopra (per essere precisi la costante hardcoded) deve cambiare anche.

2) Ho semplificato il markup per brevità. Sia la scheda principale che la scheda secondaria conterranno controlli come caselle di testo e caselle di riepilogo.

3) Questa pagina viene utilizzata come finestra di dialogo e viene eseguita in FF e IE7/8/9.

fonte

2013-04-02 mas_oz2k1

risposta

La soluzione al tuo problema è relativamente semplice da realizzare utilizzando jQuery. Per ogni TabContainer che si desidera ridimensionare alle dimensioni del suo genitore, è necessario:

// SubTabContainerUg is the TagContainer's ID property. 
var myheader = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_header'); 
var mybody = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_body'); 
var myparentbody = $('#<%= TabContainerMain.ClientID %> > .ajax__tab_body'); 
mybody.height(myparentbody.height() - myheader.outerHeight(true) - myheader.position().top);

dettagli

Trova il bambino scheda di controllo elemento s' intestazione (che contiene i pulsanti della scheda);
```
var myheader = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_header'); 
```
Trova il controllo scheda bambino s' elemento del corpo (il corpo della scheda selezionata);
```
var mybody = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_body'); 
```
Trova il controllo scheda genitore s' elemento del corpo (dove si trova il controllo scheda bambino);
```
var myparentbody = $('#<%= TabContainerMain.ClientID %> > .ajax__tab_body'); 
```
Impostare il controllo scheda bambino 'altezza s corpo per essere il genitore di controllo scheda' s altezza del corpo (meno la scheda bambino s' altezza di intestazione e superiore posizione - la posizione in alto include qualsiasi padding genitore e qualsiasi margine di elemento).
```
mybody.height(myparentbody.height() - myheader.outerHeight(true) - myheader.position().top); 
```

Questa soluzione ha lavorato in:

Firefox 20.0
Chrome 26.0.1410.64
Internet Explorer 6/7/8/9/10

Edit: cambiato offset() a position(). Per i documenti position():

Quando si posiziona un nuovo elemento vicino a un altro e all'interno dello stesso elemento DOM contenente, .position() è il più utile.

Edit 2: Ecco un Gist of your markup, here's my markup and code, ed ecco una revision showing the differences.

I Riferimento http://code.jquery.com/jquery-1.6.2.min.js - si spera si fa riferimento una copia originale e non modificata di esso nel codice.
Rimosso height: 100%; dal primo div all'interno di cc1:TabPanel ID="tp2".
Modificato il secondo div da float: left; a float: right; (questo div contiene cc1:TabContainer ID="SubTabContainerUg").
Rimosso style="height: 100%;" dal div all'interno di cc1:TabPanel ID="subTab1".

fonte

2013-04-09 19:12:20 Jesse

Bel tentativo. Domanda: dove hai trovato questo codice? È presente nell'evento OnClientActiveTabChange nella scheda principale? In questo caso, questo codice di esempio esegue sempre se le sottoschede sono visibili o meno. Abbiamo solo bisogno di cambiare altezza quando la sottoscheda è visibile. (ad esempio, se mybody.height()> 0) –

avevo impostato il codice da eseguire al caricamento della pagina; tuttavia, è possibile posizionarlo all'interno di una funzione e chiamare tale funzione dall'evento 'OnClientActiveTabChange'. – Jesse

@ mas_oz2k1 Eri in grado di farlo funzionare? – Jesse

Come posso impostare l'altezza della tabulazione figlio in una scheda nidificata di ajax asp.net?

risposta

risposta

dettagli

Problemi correlati