New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Help] Tab Container widget won't appear until window is resized. #214

Closed
roemhildtg opened this Issue Sep 17, 2014 · 14 comments

Comments

Projects
None yet
5 participants
@roemhildtg
Copy link
Member

roemhildtg commented Sep 17, 2014

Has anyone experienced issues with widgets not displaying inside their TitlePane until the window is resized? I've been looking for a solution to this for a while and so far, nothing I have tried has solved it so I would see if anyone here had a suggestion.

Here is an example:

js/gis/dijit/TabContainer.js:

define([
    'dojo/_base/declare',
    'dijit/_WidgetBase',
    'dijit/_TemplatedMixin',
    'gis/dijit/_FloatingWidgetMixin',
    'dijit/layout/TabContainer',
    'dijit/layout/ContentPane'
], function (declare, _WidgetBase, _TemplatedMixin, _FloatingWidgetMixin,
        TabContainer, ContentPane) {
    return declare('RelatedRecordTable', [_WidgetBase, _TemplatedMixin, _FloatingWidgetMixin], {
        templateString: '<div class="${baseClass}">' +
                '<div data-dojo-attach-point="containerNode">' +
                '</div>' +
                '</div>',
        postCreate: function () {
            this.inherited(arguments);
            this.tabContainer = new TabContainer({
                style: 'width:100%;height:300px;'
            }, this.containerNode);
            this.tabContainer.startup();
            this.tabContainer.addChild(
                    new ContentPane({
                        title: 'Title',
                        id: 'tab1',
                        style: 'height:100%;width:100%;',
                        content: 'Content here'
                    }));
        }
    });
});

js/config/viewer.js:

            tab: {
                include: true,
                id: 'tab',
                position: 11,
                type: 'titlePane',
                path: 'gis/dijit/TabContainer',
                title: 'Tab Test',
                options: {
                }
            },
@tmcgee

This comment has been minimized.

Copy link
Member

tmcgee commented Sep 17, 2014

according to my investigation and the almighty google, TabContainers are notoriously finicky about this. I've had better luck setting doLayout: false for the tab container and the set the height in the child content panes. See if something like this works for you:

this.tabContainer = new TabContainer({
    doLayout: false,
    style: 'width:100%;'
}, this.containerNode);
this.tabContainer.startup();
this.tabContainer.addChild(
    new ContentPane({
        title: 'Title',
        id: 'tab1',
        style: 'height:300px;width:100%;',
        content: 'Content here'
    })
);

note: if you have multiple tabs, the tab container's height == the height of the currently selected tab.

@roemhildtg

This comment has been minimized.

Copy link
Member

roemhildtg commented Sep 18, 2014

@tmcgee yes, that is what I have read/noticed.

I adjusted the tab container so that doLayout is false, and moved the height property to the child containers. This resulted in the content appearing, however, the tab navigation selector is still hidden until the size of the window changes manually.

capture
After adjusting the window size, the tabs appear:
capture2

@tmcgee

This comment has been minimized.

Copy link
Member

tmcgee commented Sep 18, 2014

Hmmm. I'll have a look at a Search widget I built that uses a Tab Container in a titlePane just like this. I'll see if there was anything additional I had to do to make the tabs appear. I'll get back to you on that after I am at my desk.

@roemhildtg

This comment has been minimized.

Copy link
Member

roemhildtg commented Sep 18, 2014

Sounds great, thanks for the help!

@DavidSpriggs

This comment has been minimized.

Copy link
Member

DavidSpriggs commented Sep 19, 2014

@roemhildtg Try creating the tab container and content panes in the html template. You will need to add the _WidgetsInTemplate subclass to the inheritance chain. Should work either way but the issue might be with dijit parsing which will be handled a bit differently when done declaratively.

@tmcgee

This comment has been minimized.

Copy link
Member

tmcgee commented Sep 19, 2014

I didn't circle back around to comment on the approach used in my widget. Kept getting distracted...

What @DavidSpriggs mentioned about using the html template is what I did. Let me know if you need code/css snippets for my tabs.

@roemhildtg

This comment has been minimized.

Copy link
Member

roemhildtg commented Sep 19, 2014

@tmcgee , no problem thanks for the help. Since it seems the TabContianer is so picky about being inside a title pane maybe it would be better to keep it another area, like a pane. I noticed a new panes object in the viewer config, would it be possible to place a widget in one of these?

@mosanderonimo

This comment has been minimized.

Copy link

mosanderonimo commented Sep 19, 2014

@roemhildtg , I did exactly that to add your Attribute Table, but put the code in Controller.js since it looked the like the viewer was still being worked on.

panes: {
left: {
id: 'sidebarLeft',
placeAt: 'outer',
collapsible: true,
region: 'left'
},
bottom: {
id: 'sidebarBottom',
placeAt: 'outer',
splitter: true,
collapsible: true,
region: 'bottom'
},
center: {
id: 'mapCenter',
placeAt: 'outer',
region: 'center',
content: mapOverlay
}
},

The in the attributeTable_featureLayer widget parameters in the viewer.js, I included

placeAt: 'bottom',

Hope this helps. Are you making tabs for the Attribute Table? I've been trying to figure it out and am getting nowhere slowly.

@roemhildtg

This comment has been minimized.

Copy link
Member

roemhildtg commented Sep 19, 2014

I've put the AttributeTable on hold, actually since @tmcgee is working on that. I've been working on a related features widget to show related tables in a tabbed interface.

@roemhildtg

This comment has been minimized.

Copy link
Member

roemhildtg commented Sep 19, 2014

Here's an update, I switched the code over to use an html template, like so:

define([
    'dojo/_base/declare',
    'dijit/_WidgetBase',
    'dijit/_TemplatedMixin',
    'dijit/_WidgetsInTemplateMixin',
    'gis/dijit/_FloatingWidgetMixin',
    'dijit/layout/TabContainer',
    'dijit/layout/ContentPane',
    'dojo/domReady!'
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _FloatingWidgetMixin,
        TabContainer, ContentPane) {
    return declare('tabs', [_WidgetBase, _TemplatedMixin,
        _WidgetsInTemplateMixin, _FloatingWidgetMixin], {
        templateString: 
                '<div class="${baseClass}">' +
                '<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="doLayout:false, region:\'center\'">' +
                '<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: \'Tab 1\'">Content Here' + 
                '</div>' +
                '</div>' +
                '</div>',
        postCreate: function () {
            this.inherited(arguments);

        }
    });
});

And at first, I had the same result, but changing the widget's open property to true in the viewer config renders the tab container properly.

@tmcgee

This comment has been minimized.

Copy link
Member

tmcgee commented Sep 19, 2014

that's the same thing that happens when using another pane titlePane. I have the attribute table (with multiple tabs) in the bottom pane and if the pane is not open when the widget is added, the UI is missing (height = zero, sometimes width is as well). If you have the pane open when the widget is created there is no problem. I will be working through that one over the next week as time permits.

As an FYI: there are 3 ways (widget types) in which you can add your widget to a pane. titlePane, containerPane and domNode. Experiment with those and ask questions if you need assistance. Please create a new issue for that assistance if it doesn't apply to the original post here.

@roemhildtg

This comment has been minimized.

Copy link
Member

roemhildtg commented Sep 19, 2014

Should I close this? I was able to achieve what I wanted using the type contentPane and placing it into the bottom pane.

@tmcgee

This comment has been minimized.

Copy link
Member

tmcgee commented Sep 20, 2014

Glad to hear that type contentPane worked for you. Closing...

@mauriciovigolo

This comment has been minimized.

Copy link

mauriciovigolo commented Mar 8, 2016

If someone is also having this problem - dijit/layout/TabContainer not showing or hidden tabs, another option is to insert the tabContainer inside a dijit/layout/BorderContainer and define a height to the BorderContainer. For example:

<div data-dojo-type="dijit/layout/BorderContainer" style="height:400px">
    <div data-dojo-type="dijit/layout/TabContainer" style="height: 100%; width: 100%;" data-dojo-attach-point="exampleTabContainer">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-attach-point="paneTab1" title="Tab1" data-dojo-props="selected:true">
            Tab1 content
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-attach-point="paneTab2" title="Tab2">
            Tab2 content
        </div>      
    </div>
</div>

If you are having problems with the first pane, that should be selected when the page is rendered, try to force the selection using the selectChild method from the tabContainer.

this.exampleTabContainer.selectChild(this.paneTab1);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment