Wie können Sie verhindern, dass die Bootstrap UI Tabs-Komponente vertikal gestapelt wird, wenn Tabs hinzugefügt werden, sodass sie die Breite des Containers überschreiten?

Was ich tun möchte, ist die Bootstrap-Ui Tabs-Komponente verwenden und so funktionieren, dass wenn Tabs hinzugefügt werden, wird der übergeordnete div-Container nur dort erweitert, wo der Überlauf ausgeblendet ist und die Tabs nicht vertikal gestapelt. Das ngRepeat-Rendering der Registerkarten der Komponente scheint das vertikale Stapeln der Registerkarten zu erzwingen, wenn die Breite die Breite des Containers überschreitet. Zusätzlich zu dieser Funktionalität möchte ich links und rechts der Tabs-Komponente Schaltflächen haben, mit denen zu den übergelaufenen (versteckten) Tabs gescrollt werden kann.Wie können Sie verhindern, dass die Bootstrap UI Tabs-Komponente vertikal gestapelt wird, wenn Tabs hinzugefügt werden, sodass sie die Breite des Containers überschreiten?

Ich habe ein plunkr Projekt hier:

http://plnkr.co/edit/NybUxdTg8Ro7kIuUN5eZ?p=preview

Hat jemand eine Idee, wie ich die vertikale Stapelung der Laschen zu stoppen und nur haben sie horizontal und Überlauf erweitern (verdeckt) und ermöglichen die Navigation zu den versteckten Tabs mit den Tasten?

Ich bin fast zu einem Punkt, wo ich mit einer anderen Komponente betrachten muss.

Quelle

2014-01-14 BrianP

hi, konntest du mit einer guten Lösung dafür kommen? Ich bin auch auf der Suche nach in der Lage, Tabs durch linke und rechte Tasten –

zu navigieren, nur wegen der Details im Titel. Super klar was gefragt wird. –

You can't really scroll items that are floated. In diesem Fall könnten Sie Bootstraps Stile außer Kraft setzen, so dass die Laschen inline-block statt schwimmend sind, und dann können Sie die .nav-tabs wie folgt blättern:

.nav-tabs { 
    white-space: nowrap; 
    overflow-x: auto; 
    overflow-y: hidden; 
    min-height: 46px; 
}

Ich hatte ein paar anderen Stile hinzuzufügen, um dies zu erhalten Arbeiten an Ihrer Plunkr, hauptsächlich wegen der Tasten. Sie haben Ihre Tasten als Kinder der <ul>, die nicht gültig ist. Ich habe das nicht behoben, aber ich habe sie absolut positioniert und empfehle Ihnen, sie aus dem <ul> herauszunehmen.

Here's an updated Plunnkr - mein Stylesheet ist styles.css.

Quelle

2014-01-14 04:57:53 davidpauljunior

Das ist im Wesentlichen, was ich gesucht habe. Um es nun genau so zu machen, wie ich es wollte, muss ich die Bildlaufleiste entfernen und Handler hinzufügen, damit die überlaufenden Tabs nach links und rechts verschoben werden können. Ich kann die Bildlaufleiste wie folgt entfernen: http://stackoverflow.com/questions/15985020/how-to-hide-scrollbar-but-still-can-scroll-up-down Und fügen Sie den Bildlauf mit der Schaltflächen mit jqeury. Vielen Dank !!! – BrianP

Hört sich gut an, froh, dir auf deinem Weg geholfen zu haben! – davidpauljunior

Ein wesentliches Stück hier ist '. Nav-Tabs> li {float: keine; Anzeige: Inline-Block; } 'über den' .nav-Tabs' Einstellungen über –

Sie haben overflow:hidden, aber keine feste Höhe für den Tabs Container angegeben.

Try this:

<!DOCTYPE html> 
<html ng-app="tabsApp"> 

    <head> 
    <script data-require="[email protected]" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script> 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script> 
    <script src="example.js"></script> 
    <script src="directive.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /> 
    </head> 

    <body> 
    <div ng-controller="tabsAppCtrl"> 
     <button class="btn btn-default" style="margin: 10px" ng-click="addTab()">Add Tab</button> 
     <input ng-model="tabName" /> 
     <button class="btn btn-default" ng-click="clearTabs()" style="margin-left: 8px">Clear Tabs</button> 
     <my-tabs> 
     <tabset style="overflow: hidden; height: 50px"> 
      <button class="btn-sm btn-default glyphicon glyphicon-chevron-left" style="float: left; margin-top: 22px"></button> 
      <tab ng-repeat="tab in tabs" active="tab.active" disabled="tab.disabled"> 
      <tab-heading style="cursor: pointer"> 
       <div> 
       <span class="glyphicon glyphicon-list-alt"></span> 
       <span>{{tab.title}}</span> 
       <button class="btn btn-default btn-sm glyphicon glyphicon-remove" ng-click="removeTab(tab)"></button> 
       </div> 
      </tab-heading> 
      {{tab.content}} 
      </tab> 
      <button class="btn-sm btn-default glyphicon glyphicon-chevron-right" style="float: right; margin-top: 75px; right: 0px; position: absolute"></button> 
     </tabset> 
     </my-tabs> 
    </div> 
    </body> 

</html>

Hier ist die aktualisierte plunkr: http://plnkr.co/edit/Rfa8AYOcLffrn6HqSdgu?p=preview

Quelle

2014-01-14 04:42:17

Ich weiß, es ist eine Art eine alte Frage, aber ich machte eine Angular Richtlinie das tut, was ich denke, Sie suchen: https://github.com/mikejacobson/angular-bootstrap-scrolling-tabs

Wenn Sie ng-repeat verwenden Ihre Tabs wie folgt zu generieren:

<!-- Nav tabs --> 
<ul class="nav nav-tabs" role="tablist"> 
    <li ng-class="{ 'active': tab.isActive }" ng-repeat="tab in main.tabs"> 
    <a ng-href="{{'#' + tab.paneId}}" role="tab" data-toggle="tab">{{tab.label}}</a> 
    </li> 
</ul>

können Sie das ul.nav-tabs Element mit dem Element Richtlinie ersetzen scrolling-tabs:

<!-- Scrolling Nav tabs --> 
<scrolling-tabs tabs="{{main.tabs}}"></scrolling-tabs>

, die die Tabs in einer Reihe halten, wenn sie die Breite ihres Containers überschreiten, und Links- und Rechts-Scrollpfeile zeigen — keine horizontale Bildlaufleiste —, so dass Sie die Tabs scrollen können.

Alternativ, wenn Sie Ihre ul.nav-tabs Markup halten wollen und nur die Tabs scrollbaren machen, können Sie die ul in einem div mit Attribut Richtlinie wickeln scrolling-tabs-wrapper:

<div scrolling-tabs-wrapper> 
    <!-- Standard Bootstrap ul.nav-tabs --> 
    <ul class="nav nav-tabs" role="tablist"> 
    <li ng-class="{ 'active': tab.active, 'disabled': tab.disabled }" ng-repeat="tab in main.tabs"> 
     <a ng-href="{{'#' + tab.paneId}}" role="tab" data-toggle="tab">{{tab.title}}</a> 
    </li> 
    </ul> 
</div>

hier ein plunk diese beiden Optionen zeigt .

Sie können auch scrolling-tabs-wrapper verwenden Angular UI Bootstrap Tabs tabset Elemente zu wickeln:

<div scrolling-tabs-wrapper> 
    <tabset> 
    <tab ng-repeat="tab in main.tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled"> 
     {{tab.content}} 
    </tab> 
    </tabset> 
</div>

Hier ist ein plunk diese Option zeigt.

Quelle

2014-10-29 00:40:22 MikeJ

werden nur Link-Posts von SO abgeraten. Sie sollten die relevanten Informationen direkt in Ihre Antwort aufnehmen (wenn möglich). –

Details hinzugefügt. Entschuldigung für den Link-nur-Post. – MikeJ

Danke dafür. Ich hatte gehofft, ich müsste dafür keine eigene Lösung finden. – Seiyria

Hier ist meine Lösung: http://plnkr.co/edit/T2snJI0zqnNTGKte55Ba?p=preview

Es ist nur mit Winkel-ui Tabs getestet. Es unterstützt auch einige nützliche Tooltips auf beiden Seiten, die Ihnen sagen, welche Tabs sich links und rechts von Ihrem aktuellen Ansichtsfenster befinden.

Der Kern ist dies:

<scrollable-tabset show-tooltips="true"> 
    <tabset> 
    <tab ng-repeat="x in y">...</tab> 
    </tabset> 
</scrollable-tabset>

Sie ein Repo here finden.

Quelle

2014-12-08 20:59:07 Seiyria

Wie können Sie verhindern, dass die Bootstrap UI Tabs-Komponente vertikal gestapelt wird, wenn Tabs hinzugefügt werden, sodass sie die Breite des Containers überschreiten?

Antwort

Verwandte Themen