AngularJs - Customizable dynamic tabs that automatically adapt

Below is the HTML code snippet:

<div>
    <ul data-ng-repeat ="tab in tabs">
          <li data-ng-class="{active: tab.selected == 'true'}"  message-key="Tab">
          </li>      
     </ul>
</div>

As shown in the image: https://i.sstatic.net/PjYHr.jpg

A section of the interface features a tab panel - with tabs ranging from 1 to 10. The challenge is to dynamically adjust the size of the tabs to fit the space available, without introducing scroll bars. Our framework includes AngularJS and Bootstrap. Any suggestions?

Implemented changes based on the feedback provided. The updated appearance is depicted in this image (tabs extending beyond the screen, font size remains constant):https://i.sstatic.net/ttgQ2.jpg

Revised HTML Code

<div class="divtab">
    <ul class="nav nav-tabs" data-ng-repeat ="tab in tabs">                                                                                
          <li data-ng-class="{active: tab.selected == 'true'}" message-key="Tab">  </li>      
     </ul>
</div>

CSS Classes

.divtab {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   -ms-grid-row-align: center;
   align-items: center;
   height: 36px;
   margin-bottom: 15px;
   padding: 0;
}
.divtab > ul {
   list-style: none;
   padding: 0;
   margin: 0;
   height: 44px;
}
.divtab > ul > .active {
   background: #0e847d;
   color: #fff;
   border-radius: 2px 2px 0 0;
}
.divtab > ul > li {
  padding: 0 20px;
  height: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

Answer №1

 <ul class="nav nav-tabs" data-ng-repeat ="tab in tabs">
  <li  data-ng-class="{active: tab.selected == 'true'}" message-key="Tab"></li>
</ul>

Implement the code snippet provided above utilizing the Bootstrap nav and nav-tabs classes.

Answer №2

Here is an example

JavaScript

$scope.tabs = [
    {id: 1, name: 'tab1', selected: true},
    {id: 2, name: 'tab2', selected: false}    
   ];

HTML

 <ul class="nav nav-tabs" data-ng-repeat ="tab in tabs">
  <li  data-ng-class="{'active': tab.selected}"><a data-toggle="tab">{{tab.name}}</a></li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Monitoring Changes in an Array of Objects with Angular's $watch Feature

Imagine having an array of animal objects linked to the scope. Each object contains a 'name' field and a 'sound' field. After that, I set up a $watch on the array with the objectEquality flag set to true (the third argument). Then, in ...

Updating the ID's of nested elements in JavaScript when duplicating an element

After a fruitless search on Google, I have turned to the experts on SO for assistance. The challenge: Create a duplicate of a dropdown menu and an input field with the click of a button (which can be done multiple times) The proposed solution: Implement ...

Retrieve the CSS class definition using the console in the Chrome Developer Tools

Is there a way to automatedly extract CSS class definitions from Chrome Developer Tools? I want to retrieve the styles defined in a specific class name, similar to how it is displayed in the Styles tab on the right-hand side. I know about the getComputedS ...

The functionalities of ng-view in AngularJS

I have been struggling to get ng-view working in a basic example application without any luck. Can anyone help me identify where the code is incorrect? Check out this Plunker here <a href="/one">one</a> <a href="/two">two</a> Cou ...

Interact with visible elements by automating mouse clicks with puppeteer

When attempting to click on various elements within a page, my goal is to do so only if they are visible. While achieving this in selenium with the is_displayed method was simple, I have struggled to find a similar approach in puppeteer. I attempted to imp ...

Establish a connection between the MySql database in WHM (phpmyadmin) and a node.js application

Our team has been working on setting up the database connection with Mysql using node.js in Cpanel. Although I didn't create the database myself, I have all the necessary information such as the host, user, password, name of the database, and port nu ...

Unable to inject basic service into component

Despite all my efforts, I am struggling to inject a simple service into an Angular2 component. Everything is transpiling correctly, but I keep encountering this error: EXCEPTION: TypeError: Cannot read property 'getSurveyItem' of undefined Even ...

Obtain the template as a string within Vue

Let's examine the scenario of having a single file component in Vue with the following structure: // Article.vue <template> <div> <h1>{{title}}</h1> <p>{{body}}</p> </div> </template> If w ...

Tips for automatically disabling cloudzoom based on image width

I'm currently utilizing cloudzoom with the given markup: <div id="container"> <img id="main-image" class="cloudzoom" src="/img/image1.jpg" data-cloudzoom="variableMagnification: false, zoomOffsetX: 0, zoomPosition: 'inside', zoom ...

Steps to troubleshoot a scrollbar problem while applying flexbox in CSS

I'm currently working with a front-end framework that utilizes a flex layout. In my development of an admin page, I have included sections for the sidebar, header, and main. My objective is to ensure that the sidebar and the header + main sections fun ...

Progress Bar Countdown Timer

I have made some progress on my project so far: http://jsfiddle.net/BgEtE/ My goal is to achieve a design similar to this: I am in need of a progress bar like the one displayed on that site, as well as the ability to show the days remaining. Additionally ...

Incorporating custom CSS and HTML into the link is essential for enhancing the appearance of KnpMenu

I'm working with the KnpMenuBundle and I need to customize a link that has the route 'uri'=>'#'. How can I achieve this? The desired link should be styled like this: <a href="#" class="js-sub-menu-toggle"> &l ...

UI Router 10 causing $digest() loop with Angular 1.4.1 when $state.go is triggered during $stateChangeStart event

My application has a state that requires authorization. I have set up an event listener for $stateChangeStart, and if the toState.data.protected condition is met but the user is not authorized, I prevent default action using e.preventDefault() and redirect ...

Adjust the time increment dynamically within the dropdown menu

I have a challenge to make a dynamic dropdown field that adjusts based on the value of a previous input field. There is a dropdown for selecting length, with options like 30 min., 60 min., and 90 min.. Additionally, there are input fields for startTime and ...

An effective method for clearing the value of an input field in AngularJS

<div class="info-block" ng-app=""> <div ng-controller="Note"> <div class="checkbox"> <label> <p><b& ...

An issue has arisen with the TypeScript function classes within the React Class, causing a compile error to be thrown

I am currently in the process of transitioning a React object from being a function to a class. This change is necessary in order to save the state and bind specific functions that I intend to pass to child components. Unfortunately, during compilation, I ...

Issue with unapplied nullable type during export操作

I'm struggling to understand why my nullable type isn't being applied properly Here's an illustration interface Book { name: string; author: string; reference: string; category: string; } async function handleFetch<T>(endpoin ...

Activate a module within a Vuex action only upon dispatching

Is there a way to import a package for use in a Vuex Action only when the Action is dispatched, in order to reduce the size of my entry bundle? Here's what I've tried: export const actions = { async createNewBin(store, bin) { const fireba ...

Why is the startsWith function not returning the expected result in my code? What could be causing this issue?

I have a code snippet that sorts a list based on user input, but it fails if the user's input contains spaces. How can I modify the code to handle inputs with spaces without removing the spaces between characters? For example, if the user input is &ap ...

The operation of moveImage does not exist

Currently, I am attempting to incorporate setInterval with my moveImage function in order to modify the position of an image. Here is a snippet of my code: <template> <div class="randImg"> <img v-bind:style="{top: imgTop + 'px&ap ...