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);
}
}
I need to compare each row with a specific row and highlight the border accordingly: <table *ngFor="let Question from Questions| paginate: { itemsPerPage: 1, currentPage: p }"> <tr><td>emp.question</td></tr> <tr> ...
Can you show me how to have two inline-blocks with the second one positioned 10 pixels up from the bottom? I'm not sure how to do this. Here is a snippet of my code: .test1{ display:inline-block; border: 1px solid red; min-height: 50px; } .tes ...
I'm interested in adding a Facebook login feature to my Ionic 2 app, but I'm unsure of how to proceed. Most tutorials I've come across demonstrate how to do this with Firebase database, while my project is already using MySql. Can someone gu ...
Take a look at this code snippet: <div ng-init="companyData"> <script type="text/javascript"> window.timeline = new TL.Timeline('timeline-embed', sampleJson); </script> </div> Is there a method to include company ...
Currently, I am parsing a JSON file which contains a map of JavaScript objects. For instance: { offers : { "1":{"id":"1", "category":"a", "offerType":"LS"}, "2":{"id":"2", "category":"a", "offerType":"EX"}, ...
I have been attempting to bind interpolated titles into a Kendo TabStrip for Angular 2, but my code doesn't seem to be functioning correctly. When using hardcoded data without interpolation, everything works fine. However, when trying to incorporate ...
I am struggling to position block 5 next to block 3 on larger screens, while maintaining the desired arrangement on smaller viewports. The blocks do not have fixed heights in my setup. You can see my codepen for a better understanding of what I'm try ...
#header { height: 108px; width: 1140px; background-color: #faa220; position: relative; } #Logo2 { height: 108px; float: left; } #header links { height: 50px; float: left; list-style: none; padding-top: 10px; } #container { overflo ...
The text input is currently set to be RTL, including both the placeholder and the actual input. The settings for this were done elsewhere. My question is how can I modify it so that only the input changes to LTR, while the placeholder remains RTL. For exa ...
We are currently working on integrating the email feature using Python Django, but we are encountering an issue with extra spaces appearing in the header of the emails as shown in these screenshots: https://i.sstatic.net/EpCca.png https://i.sstatic.net/q6 ...
After reviewing this project, I am looking to customize the js function in relation to my own table. The key focus is on the following code: $("#employee_table tr:last").after("<tr id='row"+$rowno+"'><td><input type='text&apo ...
I've created a registration form using PHP, and it asks for various information such as name, username, email, password (with confirmation), gender, and country. However, I'm facing issues with saving the first and last names to the database. It ...
Currently, I am working on developing a legal document automation program for my company. However, I have encountered an issue during the final stages of completing this web application. For the layout and setup, I am using the default angular Dashboard l ...
I was struggling with coding a function that involved generating checkboxes using JavaScript. My goal is to automatically select the elements "March" and "September" from the array target[] and display them as checked in the text area. So, "March" and "Se ...
Card Component import image from "../../Assets/pic.jpg"; import React, { useState } from "react"; import { makeStyles } from "@material-ui/core/styles"; import Card from "@material-ui/core/Card"; import CardActionAre ...
Currently, I am facing a challenge while using Angular Guards to secure my pages from unauthorized access. import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot , Router } from '@angular/router'; import { Observable } from 'rxjs& ...
HTML: <select id="bId" ng-options="b as b.name for b in books" ng-model="selectedBook" ng-change='onBookChange()'> </select> The issue: The options are not always displaying and the selected option is not visible. List ...
Our website designer is looking to create a vertical UL / LI list that matches the design in the image below. However, when using this style, I ended up with: The result looked like this: <style type="text/css"> ul { list-style: none; } u ...
<?php $data = array( 'class' => "btn btn-primary btn-lg", 'name' => 'report' ); echo '<span class="glyphicon glyphicon-exclamation-sign"></span> '; echo form_subm ...
I have encountered an issue with my code where the border does not fill the empty space in the div container when there is only one item li present, but works fine if there are multiple items. The problem can be seen in the image below: https://i.sstatic. ...