Personalizing the TabMenu or TabView Components in Angular with PrimeNg

Description:

Currently tackling a project that involves recreating a widget similar to TabMenu/TabView in PrimeNg. Struggling with implementing different routerlinks on each button and customizing it to be more dynamic or resemble the provided image.

Desired widget design: https://i.sstatic.net/AmR60.png

Details:

Framework/Library: Angular, PrimeNg Issue: Customizing the TabMenu/TabView from primeng Goal: Occupy 90% of view width, be centered, and have tab widths matching the reference image. Current situation: Explanation of outcome when attempting customization.

HTML:

<div class="container "> 
   <p-tabMenu [model]="items"> 
</p-tabMenu> </div>

CSS: Experimented with various methods like modifying the container or adjusting specific tags from PrimeNg https://i.sstatic.net/u82I7.png but facing challenges making desired modifications.

javascriptangularangularjstypescriptprimeng

Answer №1

I encountered an issue where I mistakenly placed it within:

<div class="container "> </div>

The solution is to remove the parent div: HTML:

<p-tabMenu [model]="items" [activeItem]="activeItem"  (activeItemChange)="navigate($event)" >

CSS:

.p-tabmenu {
  border: none;
}
.p-tabmenu-nav {
  border: 1px white solid;
  margin-left: 5%;
  margin-right: 5%;
}
.p-tabmenuitem {
  width: 50%;
}
.p-menuitem-link {
  width: 100%;
  align-content: center;
  text-align: center;
}
.p-menuitem-link:active ,.p-menuitem-link:focus{
  width: 100%;
  align-content: center;
  text-align: center;
  border-bottom: 4px #127ae5 solid;
  border-radius: 5px;
}
.p-menuitem-text {
  position: absolute;
  right: 0;
  left: 0;
  text-align: center;
  color: #127ae5;
}

THE OUTCOME: https://i.sstatic.net/vFI4b.png

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

How to Stop the Window from Closing with jQuery

Is there a way to prompt the user for confirmation before they leave the page if they click the close button, similar to how it's done in Google Docs? How can this be achieved using jQuery? ...

javascriptjquerywindow

Using Angular's asterisk wildcard to correctly match nested routes

Struggling to locate subroutes using a component const routes: Routes = [ { path: '', component: CatalogueComponent, }, { path: 'search/**', component: CatalogueComponent, }, ... { path: '**', ...

angular

The function service.foo is not recognized in Angular

My service function is not being recognized by my component import { Injectable } from '@angular/core'; import { ToastController } from '@ionic/angular'; @Injectable({ providedIn: 'root' }) export class LocationService { ...

javascriptangulartypescript

I'm having issues with my Express.js API not being able to access the specified

My Express js server is not reading the res.body.signatureRequestId property. How can I submit this property to prevent the type error? I have shared my error log, JSON response, and Express js code below. Error log: { account: { account_id: ' ...

javascriptnode.jsjsonexpress

How can the timezone setting be utilized in a datetimepicker?

I recently started using Datetimepicker for date and time input, but I'm a bit confused about the timezone option. How does it affect the data submission to a datetime datatype in MySQL and what changes can I expect when selecting back the data? Any i ...

javascriptphpjquerymysqldatetime

Adorning a function with a technique that implements $http

I am attempting to enhance a service using a different method. However, the issue I'm facing is that this method utilizes $http, which cannot be injected into the angular.config block because it has not been initialized yet. I considered using $injec ...

angularjsangular-decorator

Bringing in a service from a different module in NestJS

Having an issue trying to utilize the surveyService within the voteOptionRepository. When attempting to use the route, the console displays: TypeError: this.surveyService.getSurveyById is not a function Below is my SurveyModule setup: @Module({ im ...

node.jstypescriptnestjs

The data from my client side AJAX request is not being received by my server side PHP script

Check out the AJAX code I've written: $("#loginbutton").click(function(){ var email = $('#email').val(); var password = $('#password').val(); $.ajax({ url: 'login.php& ...

javascriptphpjqueryajaxpost

Incorporating an external library into a Node.js virtual machine

I'm currently working on a nodejs library that enables users to write and execute their own JS code. Here is an example: var MyJournal = Yurnell.newJournal(); module.exports = function(deployer) { MyJournal.description = "my first description& ...

javascriptnode.js

ClickAwayListener in MUI has the potential to impact all the elements within a popper when attempting

As a new react developer, I have encountered a small problem with my ClickAwayListener. It should close the Popper component when clicking 'x' or outside of it, which it does successfully. However, I have another component inside my Paper, and wi ...

javascripthtmlreactjsfunctionmaterial-ui

Transition smoothly with fading effects using JavaScript

I am currently working on the following code review: I am looking for the most efficient way to detect when the fade in or fade out animation is complete before initiating a new function. I have implemented a method, but I believe there must be a better a ...

javascriptfunctionsettimeoutfadeinfadeout

Leveraging Bootstrap and jQueryUI in TypeScript: Merging with TypeScript Results in Duplicate Property 'tooltip' Error

In my .NET MVC project, I have successfully integrated jQueryUI and Bootstrap and imported types for TypeScript using npm "devDependencies": { "@types/jquery": "3.5.x", "@types/jqueryui": "1.12.x", ...

typescripttwitter-bootstrapjquery-uibootstrap-4definitelytyped

What is the best way to connect and run my React front-end with my Express back-end simultaneously?

I'm feeling ambitious and trying to construct a basic React/Node/Express application from the ground up without relying on create-react-app. I've successfully developed a simple backend to send data to the frontend, but I'm struggling to und ...

javascriptnode.jsreactjsexpresswebpack

Creating a Typescript interface where one property is dependent on another property

Let's look at an illustration: type Colors = { light: 'EC3333' | 'E91515' dark: '#100F0F' | '140F0F' } interface Palette { colorType: keyof Colors color: Colors[keyof Colors] } Is it possible for the ...

typescript

Encountering difficulties in generating a new user account on Microsoft through Firebase Authentication

While I successfully integrated Google Auth into my web application, I am encountering difficulties with Microsoft Auth. After following the guidelines provided by Firebase Docs, the redirection process seems to work correctly. However, upon redirecting ba ...

javascriptreactjsfirebase-authentication

Retrieve data from Instagram API using AngularJS

When authenticating a user in an app using the Instagram API, the process involves redirecting the user to a specific URL: https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code. After the user ...

angularjsnode.jshttpexpressinstagram-api

Assign a unique identifier to the Angular mat-checkbox component

I need to attach an ID to an Angular material checkbox. I have an object called item. When I check the HTML code, it shows 'item.id + '-input'. However, when I bind the name, it works fine with just 'item.id'. Below is my current ...

htmlangulartypescriptangular-material

Obtaining images from JSON data and displaying them in a modal using AngularJS

Utilizing AngularJS to retrieve a JSON file: { "albumId": 1, "id": 1, "title": "accusamus beatae ad facilis cum similique qui sunt", "url": "http://placehold.it/600/92c952", "thumbnailUrl": "http://placehold.it/150/92c952" }, and showcasing it with ...

javascriptangularjs

Creating dynamic HTML content for printing tasks with the use of variables in Angular6

After running this code, I noticed that instead of values, I am receiving the object names. export class PrescriberComponent implements OnInit { constructor() { } people = [ {id: 1, forename: 'John', surname: 'Doe'}, {id: 2, f ...

angulartypescriptangular6

Error: The object does not have the property createContext necessary to call React.createContext

I'm currently exploring the new React Context API in my app. I've also implemented flow for type checking. However, when I add // @flow to a file that contains the code: const MyContext = React.createContext() An error pops up stating: Cannot ...

javascriptreactjstypesflowtype