Javascript 动态调整剑道tabstrip的大小，使其仅在宽度过大时才允许滚动？

我将剑道标签条设置为：

$('#filterTabStrip').kendoTabStrip({
                //animation: false,
                animation: {
                    open: {
                        duration: 200,
                        effects: 'expand:vertical'
                    }
                },
                tabPosition: 'top',
                //scrollable: true,
                collapsible: true,
                dataTextField: 'text',
                dataImageUrlField: 'imageUrl',
                dataContentField: 'content',
                select: function(e) {
                    //filterTabStrip-8 is new event tab. If there are no custom buttons, open new event in editor without dropping down tab content.
                    //If there are custom buttons, drop down tab content.
                    if (e.contentElement.id == 'filterTabStrip-8') {
                        //console.log('Creating New Event');  
                        if (webLinksList.length == 0) {
                            e.preventDefault();
                            $('#newEventButton').trigger('click');

                            var tabStripTabs = $('#filterTabStrip').data('kendoTabStrip').items();
                            e.sender.deactivateTab(tabStripTabs[7]);
                        }
                    }
                    //filterTabStrip-9 is expand/contract tab
                    if (e.contentElement.id == 'filterTabStrip-9') {
                        e.preventDefault();
                        //window.open('{!baseUrl}'+'/apex/calendar_test_editor?showHeader=false', 'Full Scheduler View', config='toolbar=no, menubar=no, left=0, top=0');
                        if ('{!showHeader}' == 'true') {
                            window.location.replace('{!baseUrl}' + '/apex/calendar?showHeader=false');
                        } else if ('{!showHeader}' == 'false') {
                            window.location.replace('{!baseUrl}' + '/apex/calendar');
                        } else {
                            window.location.replace('{!baseUrl}' + '/apex/calendar');
                        }

                    }
                    //filterTabStrip-10 and 11 are filter info tabs, and open no content when clicked
                    if (e.contentElement.id == 'filterTabStrip-10' || e.contentElement.id == 'filterTabStrip-11') {
                        e.preventDefault();
                    }

                },
                dataSource: [{
                        text: '',
                        title: 'User/Resource/Group Filter',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/groups.svg")}',
                        content: $('#user_filter_template').html()
                    },
                    {
                        text: '',
                        title: 'Custom Picklist Filters',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/picklist.svg")}',
                        content: $('#type_filter_template').html()
                    },
                    {
                        text: '',
                        title: 'Free Text Filter',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/description.svg")}',
                        content: $('#description_filter_template').html()
                    },
                    {
                        text: '',
                        title: 'Saved Filters',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/filterList.svg")}',
                        content: $('#filter_select_template').html()
                    },
                    {
                        text: '',
                        title: 'Download PDF',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/download.svg")}',
                        content: $('#print_pdf_template').html()
                    },
                    {
                        text: '',
                        title: 'Settings',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/settings.svg")}',
                        content: $('#settingsWindow').html()
                    },
                    {
                        text: '',
                        title: 'Refresh',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/refresh.svg")}',
                        content: $('#refreshContent').html()
                    },
                    {
                        text: '',
                        title: 'New Event',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/add.svg")}',
                        content: $('#addNewEvent').html()
                    },
                    {
                        text: '',
                        title: 'Open Scheduler In Full View Mode',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/' + iconName + '.svg")}',
                        content: ''
                    },
                    {
                        text: 'Current Saved Filter:\nNone',
                        title: 'Saved Filter',
                        imageUrl: '',
                        content: ''
                    },
                    {
                        text: 'Current Users Filtered:',
                        title: 'Users Filtered',
                        imageUrl: '',
                        content: ''
                    }
                ]
            });

在最后两个选项卡中，我根据剑道多选的用户和组过滤器动态更改其中的文本。在这个过滤器的kendo multi select change事件中，我获取所有数据项，然后根据需要将每个数据项添加到选项卡的innerHTML中

当tabstrip达到我在视口宽度设置的最大宽度时，它将正确获得滚动条。但是，当用户从过滤器中删除项时，它们将从HTML内的选项卡中删除，从而缩小选项卡。当它小于视口时，tabstrip不会调整大小，侧滚动条保持不变

---

如何最好地调整tabstrip的大小，使其在大于视口时显示滚动条，然后在缩小到低于视口宽度时消失？

能否请您设置一个演示，以便我们可以使用它？这个dojo就是我现在能想到的，它的初始化、样式和功能与我的tabstrip差不多。但是，在该dojo中，滚动条显示在选项卡下方，而不是应该显示在两侧：/。我不太清楚为什么它在Dojo中表现得如此令人烦恼，但无法让滚动功能像它应该的那样工作……你能按照你在项目中看到滚动条的方式（在添加文本后）发布滚动条的图像吗？我刚刚弄明白为什么滚动条在底部。从配置中删除“scrollable:true”会为剑道tabstrip设置正确的侧滚动，但它具有我指定的行为，当您将tabstrip收缩回视图中时，它们不会消失。我认为链接已更新为可滚动注释：true。这是一个剑道bug（默认为true，但设置true会破坏它）。即使调整了选项卡内容并调整了选项卡条的大小，类“k-tabstrip-scrollable”似乎也不会从#filterTabStrip中删除。。。我想知道我是否只需要获取选项卡的宽度（因为tabstrip是视口的100%），但检查选项卡本身的宽度是否小于100vw，以手动删除该类以除去那些侧滚动条？