What is the best way to insert a vertical line divider between two tabs?

Looking to add a vertical line (|) between the tabs.

<p-tabView>
    <p-tabPanel header="Header I">
        <p>
            Lorem ipsum dolor sit amet...
        </p>
    </p-tabPanel>
    <p-tabPanel header="Header II">
        <p>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
        </p>
    </p-tabPanel>
    <p-tabPanel header="Header III">
        <p>
            At vero eos et accusamus et iusto odio dignissimos...
        </p>
    </p-tabPanel>
</p-tabView>

Here is an example of the desired output,

https://i.sstatic.net/OXe5FW18.png

This setup is achieved using PrimeNG in Angular 18

cssangularsassprimengtabview

Answer №1

To position the divider at the right and top of the li tag using the ::after pseudo selector, you can set it to position: relative. Specify the height needed and width as 1px, then adjust its positioning according to your requirements.

.custom-divider {
    ul.p-tabview-nav > li:not(.p-tabview-ink-bar) {
            position: relative;
            &::after {
            content: '';
            height: 20px;
            width: 1px;
            background-color: black;
            position: absolute;
            right: 0px;
            top: 15px;
            z-index: 1;
        }
    }
}

Check out the Stackblitz Demo for reference!

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

What is the solution to making text appear on the top rather than on the side?

Seeking a way to keep the text description above the textbox within a definition list, however currently the text appears to the left of the box. Here is the provided HTML structure: <dl> <dt> <label>Phone Number</label> &l ...

htmlcss

Design images with rounded corners using CSS

I'm looking to design an image avatar similar to the contact avatars on Skype. Can someone assist me with this? I have tried using border radius-boundary, but I haven't had much luck. ...

htmlcsscss-shapes

Challenges associated with implementing HTTP in Ionic version 3

I've been working on developing an app using Ionic 3 and I decided to implement the HTTP module. For reference, I relied on the official documentation provided by the Ionic framework. Documentation Link: https://ionicframework.com/docs/native/http/ ...

angularcordovatypescripthttpionic-framework

Having trouble retrieving data from the database using php and ajax

I am currently working with bootstrap, php, and ajax. I'm facing some issues that I can't seem to resolve. Additionally, I've noticed that the mysqli_connect function is not highlighting in blue when I type it in Notepad++. Is this normal? ...

phpcssmysqlsqlajax

Angular application's NgbTooltip positioning

Within my Angular 2/4 project, I am utilizing ng-bootstrap along with its NgbTooltip component. Consider this HTML snippet: <div class="col-sm-8 text-ellipsis" ngbTooltip="'A very long text that does not fit'" placement="top" ...

htmlcssng-bootstrapangular

Exporting a function for a custom pipe in Angular 2

I have a navigation component where I need to call a method that applies a custom pipe. However, when trying to reference it, the console displays an error stating "filterPortfolio is not defined". The method is being bound to a click event in my DOM (the ...

typescriptangular

Ways to adjust the size of ngx-datatable when the navigation bar is being toggled

When you first open the page, the <ngx-datatable> appears like this https://i.sstatic.net/BQvBw.png But once you click on the navbar, it transforms into this https://i.sstatic.net/p8Bfd.png In the second image, you can see that the navbar column ...

htmlcssangularngx-datatable

Adding a class to the page content for sticky navigation when scrolling

I have a script that I'm trying to modify, but it's not working as expected. Can someone assist me with this issue? window.onscroll = function() {myFunction()}; var navigation = document.getElementById("navigation"); var sticky = nav ...

htmljquerycssonscroll

Transform percentage into pixels

I'm currently utilizing this specific JavaScript range slider and my goal is to define a minimum and maximum value in pixels, rather than the default percentage range from 0 to 100. I have successfully implemented the min and max settings, now my nex ...

javascriptcss

Issues with Angular Structural Directives arising from NPM installation concerns are causing problems

I have developed an npm package called sezam-shareds To integrate the package into a new project, you need to follow these steps: Add the following component from the package: <sezam-overflow [show]="true"></sezam-overflow> to a compo ...

angularnpm

Interacting with JQuery UI Button causes it to shift position on mouseover

In my table, there are two large cells. The left cell contains two drop-downs and a JQuery UI button that is causing trouble, while the right cell displays a list generated from an AJAX database query. As the list grows longer, the button gradually moves u ...

jqueryhtmlcssajax

Displaying a loading animation within a specific div element

Is it possible to use jQuery to insert a div into another div? My goal is to replace the contents of one div with a loading div while waiting for an ajax call to return. <div id="content1">foo</div> <div id="content2">bar</div> < ...

javascriptjqueryhtmlcssajax

Highlight react-bootstrap NavItems with a underline on scroll in React

I am currently working on a website where I have implemented a react-bootstrap navbar with several Nav items. My goal is to enable smooth scrolling through the page, where each section corresponds to an underlined NavItem in the navbar or when clicked, aut ...

javascriptcssreactjsreact-bootstrap

Changing a URL parameter based on the element's width is a simple task when

I'm trying to display elements on a page by replacing a string in the URL parameter with the width of each element of a certain class. I'm new to JavaScript, so any help would be appreciated! Here's an example of the HTML for objects on the ...

javascriptjqueryhtmlcss

What causes the disparity in the rendering of iframe content height when using "src" compared to "srcdoc"?

After comparing the behaviors of iframes with src and srcdoc, I stumbled upon a puzzling difference: a div set to 100% height renders as the full height of the iframe when using src=[data uri], but not with srcdoc. The issue can be easily replicated with ...

htmlcssiframe

What is the process for setting a default checkbox as checked in Angular 6?

example.component.html <form method="post" enctype="multipart/form-data> <mat-checkbox class="style" name="checkboxenabled"[(ngModel)]="checkboxObj.checkboxenabled">Enabled</mat-checkbox> </form> I have been trying to set the c ...

angularcheckbox

Transitioning a static div within a CSS grid to fill the entire screen

I have created several blocks within a CSS grid layout structured as shown: $('.box').click(function(){ $(this).toggleClass("active"); }); .grid-container { display: grid; grid-template-columns: repeat(14, 1fr); grid-template-rows: r ...

cssanimationpositioncss-transitionscss-grid

JavaScript code for modifying style properties

Is there a way to modify this function so that when the heading is changed successfully, a "Change Back!" button appears? And then, with a click on the button, the heading is reset and the button disappears again. function changer () { var textArea = ...

javascripthtmlcss

What is the best way to retrieve the data property of a Route in Angular?

Here is a snippet of code that I am working with: https://stackblitz.com/github/NickHodges/datademo The task at hand involves displaying data for a specific route on a web page. In the provided code, the path details are set up as follows: const routes ...

angular

The integration of Electron into an Angular project encounters issues with the fs module

Struggling with integrating Electron. Following the steps outlined in this blog post works perfectly fine, but I encounter issues when trying to import Electron (electron.remote) into an Angular2 service for utilizing desktop features like system dialogs a ...

angularelectronangular-cliwebpack-2