versifittechnologies / angular-ui-tab-scroll Goto Github PK

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.

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. 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,
@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.

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.

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

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?

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.

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,

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.

hi,
@smithk58

plz update the file package.json to version 0.1.6

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?

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.

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.

would you mind to provide a example

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?

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

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

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,

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!

hi,
can you please add install with npm?

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.

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?

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

When switching buildings, the floor of the button does not appear

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

This is a feature request.

Would like to be able to turn off the forward/back buttons and have only the menu available.

In this library you guys have used older syntax of UI Bootstrap. Latest UI bootstrap new syntax has uib prefix. Any plans of updating the library with latest syntax?

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.

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

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,
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, 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>
....
....

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

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,

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

hi,
@seiyria, @smithk58, @tinesoft

there are some major changes merges and issues that are in waiting and are not handled for some time.
there are some bug fixes...
i (and others like me) are eagerly waiting for some response...

who is the owner of this repository? is it active?

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?

Hi,

Is there any way to make tab scroll on mouse scroll event on tab. I did not see any options in documentation.

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.

The link to the demo is working but there is no preview on that page.

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?

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

Hi, Thanks for the nice plugin. is it possible to extend this to support drag and drop of tabs, along with scrolling feature?

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 ?

@Shemesh

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