First ContentPane won't display contents

MichaelHaley · ‎10-03-2014

I have created a dijit dialog that contains a TabContainer with several ContentPanes. When it displays, the first ContentPane will not display any contents. Then I added a new ContentPane just to test. Then the new ContentPane won't display contents but the second panel, which was in the first position, will display. So the question is why won't the first ContentPane, currently Pane "X" display correctly? This is just in the deveopment stage so there no code yet.

I just cut a couple of pane to make this post shorter so ther mabe a couple of "</div".

        <div data-dojo-type="dijit/layout/ContentPane" title="By Address1"   >
           Address Search Parameters go here....
         </div>
        <div data-dojo-type="dijit/layout/ContentPane" title="By ZipCode1" >
             ZipCode Search Parameters go here....
       </div>

       <div data-dojo-type="dijit/layout/ContentPane" title="By County UPC1" >
         County UPC.
      </div>

   </div>
     </div>

     <div data-dojo-type="dijit/layout/ContentPane" title="Property" >
         <div data-dojo-type="dijit/layout/TabContainer" >

         <div data-dojo-type="dijit/layout/ContentPane" title="By Address">
          Address Search Parameters go here....
         </div>
      <div data-dojo-type="dijit/layout/ContentPane" title="By ZipCode">
           ZipCode Search Parameters go here....
     </div>

     <div data-dojo-type="dijit/layout/ContentPane" title="By County UPC">
          County UPC.
     </div>

   </div>
     </div>

     <div data-dojo-type="dijit/layout/ContentPane" title="Water Utilities">
         <div data-dojo-type="dijit/layout/TabContainer" >

              <div data-dojo-type="dijit/layout/ContentPane" title="Water Features">
                 Water Search Parameters go here...
            </div>
        <div data-dojo-type="dijit/layout/ContentPane" title="Reclaimed Water Features">
               Reclaimed Water Search Parameters go here...
        </div>

        <div data-dojo-type="dijit/layout/ContentPane" title="San Juan Chama Features">
              San Juan Chma Search Parameters go here...
          </div>

       <div data-dojo-type="dijit/layout/ContentPane" title="Water Quality Data">
         Water Quality Search Parameters go here...
       </div>

      <div data-dojo-type="dijit/layout/ContentPane" title="Water Leak Data">
            Water Leak Search Parameters go here...
        </div>

   </div>

     </div>

     </div>

</div>

</div

Vara_PrasadM_S · ‎10-03-2014

Hi Michael,

1. Did you try calling "startUp" function of the tab container after creating it.

2. If it does not work, you may like to put the code to create tab container inside a "setTimeOut" function with time 0 ms also works sometimes.

3. Also, you can try keeping "dojo/domReady!" as a last item in the list of namespaces we write in "define" function and it does not need any alias name to be written.

Thanks & Regards,

Vara Prasad.

View solution in original post

Vara_PrasadM_S · ‎10-03-2014

Hi Michael,

1. Did you try calling "startUp" function of the tab container after creating it.

2. If it does not work, you may like to put the code to create tab container inside a "setTimeOut" function with time 0 ms also works sometimes.

3. Also, you can try keeping "dojo/domReady!" as a last item in the list of namespaces we write in "define" function and it does not need any alias name to be written.

Thanks & Regards,

Vara Prasad.

KenBuja · ‎10-06-2014

Have you tried putting the TabContainer in a ContentPane? This is what my dialog looks like

<div data-dojo-type="dijit/Dialog" id="dialogWelcome" data-dojo-props="title: 'About'" style="width: 650px; align-content: center;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
        <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="style: {width: '100%', height: '600px'}">
            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Project Introduction', style:  {overflow: 'hidden'}">
                <img id="projectImage" src="../images/Island.jpg" />
                <div data-dojo-type="dijit/layout/ContentPane" id="divDialogMessage" data-dojo-props="style: {overflow: 'auto', padding: 0 , height: '250px' }">
                    about this project
                </div>
            </div>
            <div data-dojo-type="dijit/layout/ContentPane" id="divDialogContactHolder" data-dojo-props="title: 'Contact Us'">
                <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters: 'false'">
                    <div data-dojo-type="dijit/layout/ContentPane" id="divDialogContact" data-dojo-props="region: 'center'" style="text-align: center; border: none">
                        <div>For help or comments, please contact:</div>
                        <div id="divProjectLead"></div>
                        <div id="divProjectPhone"></div>
                        <a id="divProjectEmailHRef">
                            <div id="divProjectEmail"></div>
                        </a>
                        <img id="imgLogo" src="../_assets/resources/assets/images/logo_100.gif" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

MichaelHaley · ‎10-06-2014

Ken,

I tried your suggestion.

This is what I had before your suggestion…

This is what I have after your suggestion…

KenBuja · ‎10-06-2014

This works using the layout from your original post (although that's different than what you have coded to show in your followup images).

MichaelHaley · ‎10-06-2014

Calling dialogSearch.statup() did it. Thank you Vara and Ken for your time and effort.