Utilizing the PrimeNG OverlayPanel for a dropdown click feature, I am encountering an issue with moving the default left arrow to the right position. Despite trying various solutions, I have reached a dead end.
Would you be able to provide me with some fresh insight on how to resolve this particular problem?
Here is a code example: https://stackblitz.com/edit/primeng-overlaypanel-demo
Link to the dropdown arrow image: dropdown arrow image
If you need to override deeply encapsulated CSS, one approach is to assign an id to the overlay-panel and then override the desired element (in this case, the before and after pseudo-elements of a div with the p-overlay class).
Here's an example:
<p-overlayPanel #op [showCloseIcon]="true" id='hello'[style]="{width: '450px'}">
And the corresponding CSS would be:
:host ::ng-deep #hello .p-overlaypanel::before,
:host ::ng-deep #hello .p-overlaypanel::after
{
left: 80%;
}
Keep in mind that "left: 80%" is just for demonstration purposes.
Make sure to include the following code snippet in your style.css file:
.p-overlaypanel:after, .p-overlaypanel:before{
left: unset !important;
right: 1.25rem !important;
}
This adjustment will position the arrow on the right side instead of the original location.
Important note: Deprecated usage of :host ::ng-deep, opt for utilizing the style.css file as an alternative!
.mybutton .p-overlaypanel:after, .mybutton .p-overlaypanel:before {
bottom: 100%;
content: " ";
height: 0;
right: 1.25rem; //<---
pointer-events: none;
position: absolute;
width: 0;
}
When it comes to button positioning on the page, one must consider various factors such as proximity to the borders (left, right, or bottom) and handle arrow position accordingly using the specified variable.
Transforming your complete Angular application to Scss can provide numerous benefits. Unlike regular CSS, Scss allows for deeper nesting of styles which can be more efficient and maintainable in the long run. If you want to learn more about this topic, I have an article that dives into the details.
To make the p-overlaypanel functionality work properly, ensure to target the :before and :after pseudo-elements in your CSS code.
body .p-overlaypanel:before {
left: calc(100% - 17px);
}
body .p-overlaypanel:after {
left: calc(100% - 17px);
}
To customize the styling globally, you can make changes in the main stylesheet named style.scss. Simply create a custom class and wrap the elements within it to add more specificity.
.your-class {
.p-overlaypanel:before {
left: calc(100% - 17px);
}
.p-overlaypanel:after {
left: calc(100% - 17px);
}
}
click here to view image description I am working with an input element where I take input values and store them in an element. However, I would like to know how to input new values into the next element. Any assistance would be greatly appreciated. Thank ...
Looking to extract the id parameter from the route, fetch the corresponding task, and then its parent if applicable. Angular CLI: 7.1.4 Node: 11.6.0 OS: linux x64 Angular: 7.1.4 @angular-devkit/architect 0.11.4 @angula ...
My web application using AngularJS 1.7.8, jQuery 3.3.1, Bootstrap 4.3.1, and various other CSS and JS libraries worked seamlessly last week. However, today I noticed an issue with the button visualization. To Replicate: Visit openskymap.org to see my d ...
Seeking assistance! I attempted to create a mini loan eligibility web app using JavaScript, but encountered an issue where the displayed result did not match the expected outcome upon clicking the eligibility button. Here is the HTML and JavaScript Code I ...
Is it possible to streamline these nested arrays for more efficient execution after all subscriptions have been completed? I believe there may be a solution involving the use of pipes, mergeMaps, concatMaps, etc. this.teams = [ { Assignments: [{Id: ...
I'm looking to make a child div stick to the bottom when the parent div reaches the bottom of the browser window. Note: This behavior should only occur when the parent div is pushed down, not when the page is scrolled down. For instance, in my demon ...
I am facing an issue while trying to append a string to an HTML element. It works perfectly fine with a single line string, but breaks when I try to split it into multiple lines. <div><h4 >List to do:</h4><span id="added"></span ...
I am working with an HTML list that contains links styled as background images rather than text. The container is 200px tall and I would like the links to be centered inline within the container. Usually, I would use line-height:200px; for text to achieve ...
Utilizing bootstrap jumptron with a background image has led to an issue where the background image disappears as I scroll down, leaving only the jumptron div class displaying the heading. How can this be fixed so that the image remains visible even when s ...
Every time I incorporate the mat-expansion-panel-header tag in my HTML, an error pops up in the console. Referencing the basic expansion panel example from here. ERROR TypeError: Cannot read property 'pipe' of undefined at new MatExpansionPanel ...
https://i.stack.imgur.com/CYfmQ.png In my current React project, I am facing an issue with aligning components within the Material-UI AppBar Component. My aim is to achieve a seamless and perfectly straight alignment for three key elements: a logo image, ...
My frustration is growing as I encounter a strange issue with the stack template I purchased from envato market. Every time I attempt a simple ajax request, the json returned from my PHP script seems to be invalid. Interestingly, the exact same code works ...
I spent hours scouring the internet for a solution on how to create basic CSS circle shape loaders, but couldn't find anything straightforward. I am working on a special website project that requires displaying survey results in dynamic percentages th ...
I am looking to retrieve all the code with an input as [input] and a tag as #tag. When attempting to obtain HTML code with jQuery using console.log($("#content")[0].outerHTML);, this is an example of how the code looks: <div dnd-droppable [dropZones]= ...
CSS Code .hover-div { position:absolute; margin-top:-150px; visibility:hidden; transition:all 0.5s linear 0s; } .team_hover:hover + .hover-div { margin-top:0px; visibility:visible; } .hover-div:hover { margin-top:0px; visi ...
I am looking to revamp the appearance of a search bar that currently looks like this: <div class="searchbase input-group animated trans" id="searchbase"> <input type="text" placeholder="<?php _e(_l('Searching...'));?>" class=" ...
Recently, I started exploring Angular 2 without any previous experience with Angular 1. I came across this tutorial https://angular.io/guide/quickstart and I'm wondering if there's a way to reduce the size of the project. After running 'npm ...
I am facing a peculiar issue where a virtual knockout template fails to bind correctly when accessed remotely, yet functions perfectly when viewed locally. You can find the problematic page here: Here is the template I am using: <ul> <!-- k ...
I am working on a design similar to this: http://jsfiddle.net/MTWu5/ The layout consists of a centered page with a sticky header. The header contains menu links that lead to anchors within the page. My issue arises when clicking on these links - I would l ...
Trying to get my Angular 5 application deployed on Digital Ocean Ubuntu 16.4 Nginx, but running into some issues. I can successfully access the API endpoints: http:://ipaddress/api/values However, I am facing problems with the Angular website itself: T ...