मेरे पास 2 नेस्टेड एजेक्स एएसपीनेट टैब हैं। यदि मैंने 300 कहने के लिए पैरेंट टैब (टैबकॉन्टेनरमेन) की प्रारंभिक ऊंचाई सेट की है, तो मैं सीएसएस या jquery में बाल टैब (SubTabContainerUg) की ऊंचाई कैसे सेट कर सकता हूं? मार्कअप नीचे दिखाया गया है:मैं नेस्टेड 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>

नोट: इस कोड ठीक से कार्य

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

सूचना है कि: 1) मेरे प्रारंभिक गैर maintanable समाधान के रूप में इस सर्वर के पीछे कोड में यह ऊंचाई निर्धारित करने के लिए था आईई 7/8/9 के लिए, जो उप टैब का आकार बदल रहा है और कंटेनर को एक ही ऊंचाई (= 300 पीएक्स) पर रख रहा है, लेकिन उपरोक्त कोड अच्छा नहीं है क्योंकि अगर मैं बच्चे टैब कंटेनर की शैली (मार्जिन/सीमाओं) को बदलता हूं तो उपर्युक्त कोड (हार्डकोडेड स्थिरता सटीक होने के लिए) भी बदलना चाहिए।

2) मैंने ब्रेवटी के लिए मार्कअप को सरल बना दिया। मुख्य टैब और बाल टैब दोनों में टेक्स्टबॉक्स और सूची बॉक्स जैसे नियंत्रण होंगे।

3) यह पृष्ठ एक संवाद के रूप में उपयोग किया जाता है और एफएफ और आईई 7/8/9 में चलता है।

स्रोत

2013-04-02 mas_oz2k1

उत्तर

आपकी समस्या का हल अपेक्षाकृत jQuery का उपयोग कर प्राप्त करने के लिए सरल है। प्रत्येक TabContainer है कि आप अपने माता-पिता के आकार के आकार बदलने के लिए, आप चाहिए:

// 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);

विवरण

बच्चे टैब नियंत्रण के हैडर तत्व का पता लगाएं (जो टैब बटन रखता है);
```
var myheader = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_header'); 
```
बच्चे टैब नियंत्रण के शरीर तत्व (चयनित टैब का शरीर) का पता लगाएं,
```
var mybody = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_body'); 
```
अभिभावक टैब नियंत्रण के शरीर तत्व (जहां बच्चे टैब नियंत्रण स्थित है) का पता लगाएं,
```
var myparentbody = $('#<%= TabContainerMain.ClientID %> > .ajax__tab_body'); 
```
सेट बच्चे टैब नियंत्रण शरीर ऊंचाई (ऋण बच्चे टैब के हैडर ऊंचाई और शीर्ष के शरीर की ऊंचाई अभिभावक टैब नियंत्रण होने के लिए ' स्थिति - शीर्ष स्थिति में कोई भी पैरेंट पैडिंग, और कोई तत्व मार्जिन शामिल है)।
- Firefox 20.0
- Chrome 26.0.1410.64
- इंटरनेट एक्सप्लोरर 6/7/8/9/:
```
mybody.height(myparentbody.height() - myheader.outerHeight(true) - myheader.position().top); 
```

यह समाधान में काम किया

संपादित करें:position() को offset() बदल दिया है। प्रति position() डॉक्स:

ही युक्त डोम तत्व एक दूसरे के पास और भीतर एक नए तत्व स्थिति है, .स्थिति() अधिक उपयोगी है।

संपादित करें 2: यहाँ एक Gist of your markup, here's my markup and code है, और यहाँ एक revision showing the differences है।

मैं http://code.jquery.com/jquery-1.6.2.min.js संदर्भ - उम्मीद है कि आप इसे अपने कोड में से एक मूल और असंशोधित प्रति संदर्भित कर रहे हैं।
cc1:TabPanel ID="tp2" के अंदर पहले div से height: 100%; हटा दिया गया।
(इस div cc1:TabContainer ID="SubTabContainerUg" शामिल हैं) float: right; को float: left; से दूसरे div बदल दिया है।
cc1:TabPanel ID="subTab1" के अंदर div से style="height: 100%;" हटाया गया।

स्रोत

2013-04-09 19:12:20 Jesse

अच्छा प्रयास। प्रश्न: आपने इस कोड को कहां पाया? क्या यह मुख्य टैब में OnClientActiveTabChange ईवेंट पर है? यदि ऐसा है तो यह नमूना कोड हमेशा निष्पादित करता है कि उप टैब दिखाई दे रहे हैं या नहीं। हमें उप-टैब दिखाई देने पर केवल ऊंचाई बदलने की आवश्यकता है। (उदाहरण के लिए अगर mybody.height()> 0) –

मैंने पेज लोड पर निष्पादित करने के लिए कोड सेट किया था; हालांकि, आप इसे किसी फ़ंक्शन के अंदर रख सकते हैं, और 'OnClientActiveTabChange' ईवेंट से उस फ़ंक्शन को कॉल कर सकते हैं। – Jesse

@ mas_oz2k1 क्या आप इसे काम करने में सक्षम थे? – Jesse

मैं नेस्टेड AJAX ASP.net टैब में बाल टैब ऊंचाई कैसे सेट कर सकता हूं?

उत्तर

उत्तर

विवरण

संबंधित मुद्दे