versifittechnologies / angular-ui-tab-scroll Goto Github PK
View Code? Open in Web Editor NEWA scrollable tab plugin compatible with angular-ui bootstrap tabs
License: MIT License
A scrollable tab plugin compatible with angular-ui bootstrap tabs
License: MIT License
Hi,
Is there any way to make tab scroll on mouse scroll event on tab. I did not see any options in documentation.
Hi,
scrollIntoView align the scrollable ancestor (top or bottom), this behavior is not really good when the page has a scrollbar.
check this plunker : http://plnkr.co/edit/fwFrfYGJkAwezqphog5A?p=preview
Click on an element in the drop-down, the tab will be align to top.
Hi,
I am a beginner in this field. Can you please advise how to select a tab at an index when a particular event happens.
Thanks you
Hi. i try to implement your library in my project, but when i implement it. always show error [ngTrsanclude:orphan] and my tab not showing.
But if i add "replace:true" in directive this error still shown on my console, but all working fine. can you explain to me how to fix this issue?? thanks.
If I use the following style-sheet without surrounding <scrollable-tabset>
to my <uib-tabset>
I get a shadow around the tabs.
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
box-shadow: 0px 3px 10px #999;
}
but with surrounding <scrollable-tabset>
the shadow on the first tab occurs only on the right site.
For the case that the scroll-buttons doesn't appear this behavior isn't correct and for the case that they appear the shadow must be on left site of the first left button and on the right site of the last right button.
Hi,
Usage of api in example code is not working as expected. Clicking "Scroll into Tab Index 6" is not selecting 6th Tab (see here : http://embed.plnkr.co/YJNDaQ/). Please advise.
Great plugin and I have it working nicely. However, there doesn't seem to be support for pills. If I add type="pills" to uib-tabset, my pills stack. I can simply style my tabs to look like pills, so it isn't a major issue but if there is a simple fix, it would be a nice feature.
Hi,
If the tabHeading is an html content the content in tabScrollTitle is not rendered because it use tabScope.headingElement.textContent vs innerHTML.
Can you Handle Html ?
Seems like angular-ui-tabs-scroll
works good till angular-1.4.9
.
From >=angular 1.5.0
Last Tab is pushed onto new line.
Please find the below attachment.
Please find the Plunker for the above issue. You can modify the angular file version to 1.4.9 (works !).
http://plnkr.co/edit/95iZnoKs8zAa9iER8wCs?p=preview
Hello, not sure if this project is still active or not.. but I'm having an issue where the init() logic runs before my page has loaded meaning the tabContainer is null.
If I wrap the init() logic in a $timeout everything works swimmingly. Any thoughts?
Since old project habits, now it is like this
<ul class="nav nav-tabs"> <li ng-repeat="x in vm.tabs" ng-click="vm.checkOneTab(x,$index)" ng-class="{active:vm.index == $index}"> <a class="text-center" href="" data-toggle="tab">{{x.name}}</a> </li> </ul>
then I wrap it with but nothing happen, no error hint...
could anyone help? or what should i do can fix this?
I got an error when I set $compileProvider.debugInfoEnabled(false);
:
TypeError: Cannot set property 'tabScrollTitle' of undefined
at angular-ui-tab-scroll.js:346
at Object.forEach (angular.js:341)
at Scope.$scope.reCalcAll (angular-ui-tab-scroll.js:340)
at angular-ui-tab-scroll.js:114
at angular.js:18132
at completeOutstandingRequest (angular.js:5729)
at angular.js:6006
The problem here is, that the isolateScope()
returns undefined when the debugInfo
is disabled.
See here: http://stackoverflow.com/a/32481247/1168594
Hi,
I put one option on grid to show or not the filter on column, i set on start all columns enableFiltering: false, and after selection of a column which i what to show the filter, I remove the column set enableFiltering = true and put column again. this work but only in safari and chrome not working IE 10.
If i click another option of menu and click again on the same page, the column show perfect.
What i have to do for this work like safari and chrome?
http://plnkr.co/edit/S0ymCr9S5mQ6UVqBSK7A?p=preview
Thanks
I am generating tabs in background. That time "scrollWidth" and "offsetWidth" are always ZERO. So left and right navigation buttons are hidden. If the page become visible and doing zoom out/ zoom in after that only buttons are coming. Please give solution. Thanks
Hi,
First of all, thanks for this great library!
Now, i am facing a weird problem when wrapping a tabset with tabs included separately, ie either via
single tab elements added manually in the DOM, either via group of tab added by use of ng-repeat:
See this plunker.
I inspected/compared the css of each block, but there is no difference...
Any idea?
Thanks
The link to the demo is working but there is no preview on that page.
hi,
i have downloaded 0.1.4 zip and looking inside the bower.json there are some fields that need an update:
the version should be updated from 0.1.0 to 0.1.4
and the dependencies should be: larger than... instead of a specific version.
hi,
can you please add install with npm?
would you mind to provide a example
Sometimes the $scope.init function runs before the uib-tabset
directive finished rendering into the DOM, so the querySelector returns null.
$el[0].querySelector('.spacer ul.nav-tabs');
I temporarily fixed it in my code by setting in a delay for the init function.
ex:
$timeout(function(){
$scope.init();
}, 100);
Is there a better solution?
Hi,
I have tried API service on a single tabset and is working fine, but when working with nested tabset it is not. Here is my code.
<scrollable-tabset api="scrlTabsApi" tooltip-left-placement="top"> <uib-tabset style="height: 300px"> <uib-tab ng-repeat="tab in tabs"> <uib-tab-heading>{{tab.heading}}</uib-tab-heading> <div class="tabContent"> {{tab}} <scrollable-tabset api="scrlTabsApi" tooltip-left-placement="top"> <uib-tabset style="height: 300px"> <uib-tab ng-repeat="tab in tabs"> <uib-tab-heading>{{tab.heading}}</uib-tab-heading> <div class="tabContent"> Inner {{tab}} </div> </uib-tab> </uib-tabset> </scrollable-tabset> </div> </uib-tab> </uib-tabset> </scrollable-tabset>
Please find that I am using api attribute in both outer and inner scrollable-tabset tags. How can I use api only for inner scrollable-tabset.
i am getting this warning in the console:
tooltip-html-unsafe is now deprecated. Use tooltip-html or tooltip-template instead.
using bootstrap 3.3.5, bootstrap ui 0.13.3, angular 1.4.0
hi,
@smithk58
in the css file there are some declarations that have "!important" on them.
i have no idea why they are there, it is redundant and is preventing users to override.
me for example want the tab headers (and scroll buttons) to be height 35px, i cannot do it because of the "!important" declaration.
plz revmove all "!important" declarations from the css.
TNX.
I'm interested in using this or a similar control (such as https://github.com/mikejacobson/angular-bootstrap-scrolling-tabs). But I'd prefer not to have a JQuery dependency, my project is all angular and JQLite.
It looks like only the "toTheRight" and "toTheLeft" functions really use jQuery. Is it plausible they could be updated to use JQLite? Is that something you have interest in / need for (I suspect the answer is no), or would you have any tips or suggestions if I were to fork and modify it myself?
Turning off debugInfoEnabled (as recommended in https://docs.angularjs.org/guide/production) prevents accessing the scope from the DOM which cause angular-ui-tab-scroll to throw an error while is calculating the list items for the drop down.
VM6403:27 TypeError: Cannot set property 'tabScrollTitle' of undefined
at angular-ui-tab-scroll.js:354
at Object.p [as forEach] (angular.js:402)
at m.$scope.reCalcAll (angular-ui-tab-scroll.js:348)
at m.$scope.init (angular-ui-tab-scroll.js:329)
at angular-ui-tab-scroll.js:366
at angular.js:20119
at e (angular.js:6274)
at angular.js:6554
Hi, first, thank you for your excelent directive.
I have a too long list of tabs and I am trying to limit the dropdown height list using the next css and markup.
But it has not effect on drop down height.
What am I doing wrong?
//css
.limited_dropdown{
max-height: 300px!important;
overflow-y: auto;
}
//markup
<scrollable-tabset drop-down-class="limited_dropdown" >
<uib-tabset ng-repeat="medico in resultHorarios" classes="bg-success">
<uib-tab index="$index">
<uib-tab-heading class="bg-primary">
{{medico.nomemedico}}
</uib-tab-heading >
<div>
<h4 class="color-blue">
<i class="fa fa-user-md fa-2x"></i>
<span class="label-sm text-danger"><strong>{{disponivel?'Horas disponíveis':'(Sem disponibilidade)'}}</strong></span>
</h4>
</div>
....
....
This is a feature request.
Would like to be able to turn off the forward/back buttons and have only the menu available.
I'd like to be able to add a few custom options in the dropdown list. For example, add a "Add" and "Delete" option. Is there a way to do it now, or is that something that'd need to be implemented?
Thanks for a nifty library. This is a bit of a nitpicking defect report, though likely easy to fix.
The following line at the bottom of angular-ui-tab-scroll.css:
/*# sourceMappingURL=angular-ui-tab-scroll.css.map */
causes the spurious error above, at least on the chrome console.
This does not affect the functionality or greatness of the library, nor is it apparent to the end-user, but it chagrins those obsessive-compulsive amongst us who like to keep spurious errors out of our debug consoles.
It would be great if you could either remove the sourceMappingURL hint above in the distro, or add the angular-ui-tab-scroll.css.map file to the distro.
Thanks again for a nice component.
I got an error when I'm using the attribute heading
in element uib-tab
.
TypeError: Cannot read property 'textContent' of undefined
at http://localhost:63342/scrolltabs/bower_components/angular-ui-tab-scroll/angular-ui-tab-scroll.js:297:92
at Object.forEach (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:341:20)
at Scope.link.$scope.reCalcAll (http://localhost:63342/scrolltabs/bower_components/angular-ui-tab-scroll/angular-ui-tab-scroll.js:291:27)
If I using the element uib-tab-heading
instead it works.
Is there any way to restrict switching to other tab after checking any condition. I have added a function in ng-click of tab and tried event.preventDefault(); but not working.
Any chance you'd be interested in extending this to work with nested tabsets?
We have an application with two nested tabsets that both need this scrolling functionality. This component works great for one tabset but not so much with another scrolling tabset nested inside.
Thanks
When nested in a <scollable-tabset>
tag, other pop ups like uib-popover and uib-datepicker-popup extend their parent container and thus break layout. This caused by overflow: auto
in angular-ui-tab-scroll.css, line 98. Removing this fixes the issue in my case.
Hi. This is very much what I need to use for a current project, however when referencing the later versions of Angular, ui Bootstrap and Bootstrap css, I get a number of Javascript errors and the last tab is thrown to a new line.
angularjs/1.5.0/angular.js
ui-bootstrap-tpls-1.1.2.js
bootstrap/3.3.6/css/bootstrap.css
Hi, Thanks for the nice plugin. is it possible to extend this to support drag and drop of tabs, along with scrolling feature?
Hi,
We can not use scrollable tabset with the latest ui-bootstrap-tpls-1.3.3.js. Do you have any solutions to this?
Thank you,
Kevin
From the samples, you are setting scope for api in scrollable-tabset. When I try this in my current implementation, the object doesn't return anything when trying to call doRecalculate from another controller.
Any ideas what might be going on?
edit: after some debugging I'm finding that the directive gets my scroll-by setting, but autoRecalculate/api seem to read as undefined when debugging from angular-ui-tab-scroll.js
I am calling this function but not working for me.
$scope.main.scrollTabIntoView(i);
please let me know what steps to be followed while using this function.
my requirement is to set active state to particular tab. let me know if another method is available or any solution for my requirement.
Thank you
hi,
@smithk58
plz update the file package.json to version 0.1.6
Hi,
Is there any way to pass the api to controller?
<scrollable-tabset api="scrlTabsApi" show-tooltips="false" show-drop-down="false" auto-recalculate="true">
And in the controller...
$scope.scrlTabsApi = {};
Is this possible?
Tks in advance!
If the argInt is equal to zero, scrollTabIntoView will not scroll to the tab 0.
So I change the if-check from truthy value check if(argInt)
to number check if(argInt>=0)
.
$scope.scrollTabIntoView = function(arg){
if(!$scope.tabContainer || $scope.hideButtons)return;
var argInt = parseInt(arg);
var tabToScroll;
// first we find the tab element.
if(argInt>=0) { // scroll tab index into view
var allTabs = $scope.tabContainer.querySelectorAll('ul.nav-tabs > li');
if(allTabs.length > argInt) { // only if its really exist
tabToScroll = allTabs[argInt];
}
} else { // scroll selected tab into view
var activeTab = $scope.tabContainer.querySelector('li.active');
if(activeTab) {
tabToScroll = activeTab;
}
}
...
Hi,
I tried to alter your library to fit my needs. I added some icons to your template and wanted to get shown them if the corresponding value of the tab attribute is true (for example inEditMode). I have got some tab service, which manages all tabs and their values:
<tab ng-repeat="tab in tabService.tabs()" class="content-tab" active="tab.active" data-tabScrollInEditMode="tab.inEditMode" disabled="tab.disabled">
<tab-heading>
<i ng-if="tab.inEditMode" class="fa fa-pencil-square-o"></i>{{tab.heading}}
</tab-heading>
</tab>
But somehow I cannot reach the value of the tab. I tried to add new attribute on the tab and append it to dropdownTabs, like this
var inEditMode = tab.attributes['data-tabScrollInEditMode'].value;
tabScope.inEditMode = inEditMode;
But I couldn't realy get the value of this variable, I only got the text value of the data-tabScrollInEditMode attribute, which is "tab.InEditMode" and not a boolean value.
Can you give me some advice?
getting this warning in the console:
bindHtmlUnsafe is now deprecated. Use ngBindHtml instead
using bootstrap 3.3.5, bootstrap ui 0.13.3, angular 1.4.0
hi,
@smithk58
when there are only few tabs, and the scroll buttons are hidden, the horizontal line (just below the tab headers) is not being spread to the whole width, but instead it is being terminated at the last tab.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.