Quantcast

dijit.layout.TabContainer height by content

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

dijit.layout.TabContainer height by content

antipolizay
Hi,

How to set height of dijit.layout.TabContainer  by content height?
If I remove "height: 200px;" then height of dijit.layout.TabContainer will by 0, and will be TabContainer invisible.
But if I using "height: 200px;" height of dijit.layout.TabContainer is always 200px.

Help me, plz.

code:
======
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <title>TabContainer Demo</title>

        <link rel="stylesheet" type="text/css" media="screen" href="/js/ajax/dojo/dijit/themes/tundra/tundra.css">
        <script type="text/javascript" src="/js/init.js"></script>
        <script type="text/javascript" src="/js/ajax/dojo/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true, baseUrl: '/js/ajax/dojo/dojo/', locale: 'ru'"></script>

        </head>
<body class="tundra">

<div style="height: 300px;">

        <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" persist="false" tabStrip="false" useSlider="true" useMenu="true" style="width:100%; height: 200px;">
                <div id="tab1" dojoType="dijit.layout.ContentPane" title="Tab 1" iconClass="plusIcon" бtooltip="Tooltip for tab #1" selected="true">
                <h1>I am tab 1</h1>
            </div>
           
                <div id="tab2" dojoType="dijit.layout.ContentPane" refreshOnShow="true" title="Tab 2" iconClass="noteIcon">

                        <h1>I am tab 2</h1>
                </div>
       
            <div dojoType="dijit.layout.ContentPane" id="tab3" title="Tab 3" iconClass="dijitEditorIcon dijitEditorIconSave" closable="true">
                <h1>I am tab 3</h1>
                <p>And I was already part of the page! That's cool, no?</p>
                <p id="foo">tooltip on this paragraph</p>
                <div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div>

                        <button dojoType="dijit.form.Button">I'm a button </button>
            </div>
        </div>

</div>

</body>
</html>
_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: dijit.layout.TabContainer height by content

Bill Keese
As listed in the documentation
(http://docs.dojocampus.org/dijit/layout/TabContainer), it's doLayout=false.

[hidden email] wrote:

> Hi,
>
> How to set height of dijit.layout.TabContainer  by content height?
> If I remove "height: 200px;" then height of dijit.layout.TabContainer will by 0, and will be TabContainer invisible.
> But if I using "height: 200px;" height of dijit.layout.TabContainer is always 200px.
>
> Help me, plz.
>
> code:
> ======
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>                 "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
>         <title>TabContainer Demo</title>
>
>         <link rel="stylesheet" type="text/css" media="screen" href="/js/ajax/dojo/dijit/themes/tundra/tundra.css">
>         <script type="text/javascript" src="/js/init.js"></script>
>         <script type="text/javascript" src="/js/ajax/dojo/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true, baseUrl: '/js/ajax/dojo/dojo/', locale: 'ru'"></script>
>
>         </head>
> <body class="tundra">
>
> <div style="height: 300px;">
>
>         <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" persist="false" tabStrip="false" useSlider="true" useMenu="true" style="width:100%; height: 200px;">
>                 <div id="tab1" dojoType="dijit.layout.ContentPane" title="Tab 1" iconClass="plusIcon" бtooltip="Tooltip for tab #1" selected="true">
>                 <h1>I am tab 1</h1>
>             </div>
>            
>                 <div id="tab2" dojoType="dijit.layout.ContentPane" refreshOnShow="true" title="Tab 2" iconClass="noteIcon">
>
>                         <h1>I am tab 2</h1>
>                 </div>
>        
>             <div dojoType="dijit.layout.ContentPane" id="tab3" title="Tab 3" iconClass="dijitEditorIcon dijitEditorIconSave" closable="true">
>                 <h1>I am tab 3</h1>
>                 <p>And I was already part of the page! That's cool, no?</p>
>                 <p id="foo">tooltip on this paragraph</p>
>                 <div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div>
>
>                         <button dojoType="dijit.form.Button">I'm a button </button>
>             </div>
>         </div>
>
> </div>
>
> </body>
> </html>
> _______________________________________________
> FAQ: http://dojotoolkit.org/support/faq
> Book: http://docs.dojocampus.org
> [hidden email]
> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
>  

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Loading...