Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jesper Ordrup 1000 posts 1478 karma points MVP
    Oct 28, 2020 @ 17:34
    Jesper Ordrup
    0

    umb-tabs-nav shows as collapsed until resize container

    When setting up tabs in a view they are collapsed until I resize container.

    Example

    The code is taken straight from the documentation:

    https://our.umbraco.com/apidocs/v8/ui/#/api/umbraco.directives.directive:umbTabsNav

    markup:

    <div ng-controller="My.Controller as vm">
    
    <umb-tabs-nav
        tabs="vm.tabs"
        on-tab-change="vm.changeTab(tab)">
    </umb-tabs-nav>
    
    <umb-tab-content
        ng-repeat="tab in vm.tabs"
        ng-show="tab.active"
        tab="tab">
        <div ng-if="tab.alias === 'tabOne'">
            <div>Content of tab 1</div>
        </div>
        <div ng-if="tab.alias === 'tabTwo'">
            <div>Content of tab 2</div>
        </div>
    </umb-tab-content>
    

    Controller

    (function () {
    "use strict";
    
    function Controller() {
    
        var vm = this;
    
        vm.changeTab = changeTab;
    
        vm.tabs = [
            {
                "alias": "tabOne",
                "label": "Tab 1",
                "active": true
            },
            {
                "alias": "tabTwo",
                "label": "Tab 2"
            }
        ];
    
        function changeTab(selectedTab) {
            vm.tabs.forEach(function(tab) {
                tab.active = false;
            });
            selectedTab.active = true;
        };
    
        eventsService.on("tab.tabChange", function(name, args){
            console.log("args", args);
        });
    
    }
    
    angular.module("umbraco").controller("My.Controller", Controller);
    })();
    

    /Jesper

  • Jesper Ordrup 1000 posts 1478 karma points MVP
    Oct 28, 2020 @ 20:55
    Jesper Ordrup
    0

    This is Umbraco 8.8

  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Oct 28, 2020 @ 22:52
    Tim Geyssens
    1

    have you checked commit history on the directive? Maybe it is just a legacy directive? Since tabs are not default anymore...

  • Jesper Ordrup 1000 posts 1478 karma points MVP
    Oct 29, 2020 @ 09:23
    Jesper Ordrup
    0

    No, I just checked the docs :-)

    Time doesn't permit me to investigate so, for now, I have to change approach.

  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Oct 29, 2020 @ 09:25
  • Jesper Ordrup 1000 posts 1478 karma points MVP
    Oct 29, 2020 @ 11:01
    Jesper Ordrup
    0

    Thanks Tim. I didn't consider the power of just looking at the files commit history like that :-)

  • Saylon 1 post 71 karma points
    Dec 04, 2020 @ 14:42
    Saylon
    0

    We are using Umbraco 8.6.4 and we have the same issue when we create the tab list dynamically. When we initialize a static tabs list it's working fine.

  • Chris Ashton 52 posts 82 karma points
    Mar 14, 2021 @ 20:00
    Chris Ashton
    0

    I had a similar problem to this in v8.8.2, and for me, the solution was to change:

    <div ng-controller="My.Controller as vm">

    to:

    <ng-form val-form-manager ng-controller="My.Controller as vm">

    Cheers, Chris

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies