How to change the style?

[igorissen]

Hi,

This isn't an issue but a question about the popup styling.
How can we update the popup with my style?

Thanks

[MrFrankel]

@igorissen you can update the css by applying to the internal classes:
here is the default css classes:

.ngxp__container {
  display:none;
  position: absolute;    
  border-radius: 3px;
  border: 1px solid grey;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);  
  padding: 10px;
}
.ngxp__container.ngxp__animation {
   -webkit-animation: ngxp-fadeIn  150ms ease-out;
    -moz-animation: ngxp-fadeIn  150ms ease-out;
    -o-animation: ngxp-fadeIn  150ms ease-out;
    animation: ngxp-fadeIn  150ms ease-out;
  
}
.ngxp__container .ngxp__arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
}

.ngxp__container[x-placement^="top"],
.ngxp__container[x-placement^="bottom"],
.ngxp__container[x-placement^="right"],
.ngxp__container[x-placement^="left"]
{
  display:block;
}
.ngxp__container[x-placement^="top"] {
  margin-bottom: 5px;
}
.ngxp__container[x-placement^="top"] .ngxp__arrow {
  border-width: 5px 5px 0 5px;
  border-color: grey transparent transparent transparent;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.ngxp__container[x-placement^="bottom"] {
  margin-top: 5px;
}
.ngxp__container[x-placement^="bottom"] .ngxp__arrow {
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent grey transparent;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.ngxp__container[x-placement^="right"] {
  margin-left: 5px;
}
.ngxp__container[x-placement^="right"] .ngxp__arrow {
  border-width: 5px 5px 5px 0;
  border-color: transparent grey transparent transparent;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}
.ngxp__container[x-placement^="left"] {
  margin-right: 5px;
}
.ngxp__container[x-placement^="left"] .ngxp__arrow {
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent grey;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

You can override these by applying higher specificity to the classes.

For instance :
body .my_comp .ngxp__container{ background: green }

Please note that in ng2+ components usually have encapsulated css, to apply these styles better apply it not to a component style.

[igorissen]

@MrFrankel, Thank you!

[alexandremoore]

@MrFrankel , even with higher specificity, overriding the classes didn't work for me unless I use the !important rule.

[MrFrankel]

@alexandremoore there is a global option for disableDefaultStyling, if you set it in the forRoot as true it will disable any default styles and you can apply your own

[IBYuMe]

@MrFrankel, is it possible to access the 'dataObject'? Looking at the Popper.js docs I was hoping to use the "data.arrowStyles" property to modify the arrow styles instead of disabling the default styling or getting into a "!important" specificity war... (https://popper.js.org/popper-documentation.html#dataObject)

[MrFrankel]

@IBYuMe you can access the dataObject by passing modifiers to the popper
[popperModifiers]="{...}"

[IBYuMe]

@MrFrankel Thank you for the quick response!
I tried to make a custom modifier but I still can't seem to overwrite the default arrow properties even if I modify data.arrowStyles. With my custom modifier I verified the 'debugger' is hit and the arrowStyles object is modified, but the CSS generated for the arrow styles is still the grey color specified in ngx-popper popper-content.ts CSS.

var customArrowModifier = { noArrow : { enabled: true, order: 1900, fn: (data: any) => { debugger; data.arrowStyles['border-color']= 'red'; // eventually want this to be 'transparent' data.arrowStyles['border-width']= '25px '; // this also had no effect console.log('~~~ inside popper modifier' + data); return data; } } }
Am I missing something when creating the modifier..?

I was having trouble finding examples on how to write custom modifiers so I based the above modifier on a mixture of documentation and looking at this react example: floating-ui/react-popper#73.

I also tried to create a codePen ( https://codepen.io/IBYuMe/pen/qoZjyZ?editors=1111), but I can't seem to get the ngx-popover imported/working in codepen..... I was looking at https://codepen.io/FezVrasta/pen/jqxYLK for reference, but it looks like even FezVrasta's popper example doesn't work quite right in codePen...(?)

[MrFrankel]

@IBYuMe I think the best solution would be for me to supply a way to inject a class to override the .ngx__container class, that way you can provide any class name you want and define and css props on that directly.

Does that sound useful?

[IBYuMe]

@MrFrankel Yes! That would be very useful, thanks! I've been looking for something like that, but hadn't been able to find it.

So far, I've managed to hack the style of most of the popovers by defining a global class that had about 5 layers of nested specificity... However the css still wasn't specific enough to change certain popovers that were deeply nested in components, so I was looking at trying to change arrowStyles. If there was a way to overwrite the default .ngx__container and .ngx__arrow styles that would be really great!

[MrFrankel]

@IBYuMe ive released this under 2.3.1,

You can now simply add the applyClass option in the forRoot global props or add it to a specific popper via an input such:

<div [popper]="'some text'" [popperApplyClass]="'class1, class2, class3'"></div>

Let me know if this helps.

[IBYuMe]

@MrFrankel Thank you very much for adding the feature- I'm sorry for the delay but I haven't had a chance to work on this all week... Once I get a chance to try out the new version I'll add an update to say if it fixed my issue.

[IBYuMe]

@MrFrankel Thank you for this change! It has allowed me to get enough specificity to style all the popovers in my app.

Would it be difficult to add a similar ' [popperApplyArrowClass]’to put a css class directly on the arrow component?

I feel like that would make the css cleaner, right now I need to specify an extra class ‘popover-content' on the actual ‘popover-content’ element to create extra specificity and get the arrow css to be applied properly.

I’ve copied my ’no-arrow’ class and other CSS notes in case it helps anyone else:

`/*
* Example for applying custom styling to ngx-popper
* If you ever need to change the arrow color of the popover,
* you will need extra specificity to overwrite the arrow colors
* 
* The 'no-arrow' class example below will remove the arrow pointer from all
* your popovers
*
* This example assumes you passed in 'test-class' to ngx-popper's 'popperApplyClass' modifier
* and that your popper content has 'popper-content' class assigned to similar to:
 <div
    class ="popper-container" 
    [popper]="popperContentChild"
    [popperApplyClass]="test-class, no-arrow"
    >
    <popper-content 
        #popperContentChild 
        [ngClass] ="{'popper-content':true}"
    >
        <ng-content ></ng-content>
    </popper-content>
</div>
*/

/* no-arrow styling example*/
popper-content.popper-content   {
    .ngxp__container.ngxp__animation.no-arrow{
        .ngxp__arrow {          
            // will be overwritten by x-placement classes below if 
            // both 'no-arrow' and 'test-class' styles are used
            border-color: transparent; 
        }
    }
}



/* more examples for styling ngx-popper
 * shows how you can customize arrow pointers
 */
popper-content.popper-content {
    // Can add any special styling for 'test-class' (ie class passed to 
    // that you want applied to the popper body
    .ngxp__container.ngxp__animation.test-class{
        background-color: purple;

        .ngxp__arrow {
            // Note this is just an example to modify arrows pointing in all directions.  
            // If you change the border width you will need to update it's position as well
            border-width: 10px;
            border-color: cyan; // will be overwritten by x-placement classes below
        }
    }
  
    // change 'test-class' to be whatever class you pass
    // to the ngx-popper 'popperApplyClass' modifier
    .ngxp__animation.test-class {
        &.ngxp__container[x-placement^="bottom"] .ngxp__arrow {
            border-color: transparent transparent @blue-bright transparent;
        }
        &.ngxp__container[x-placement^="top"] .ngxp__arrow {
            border-color: @blue-bright transparent transparent transparent;
        }
        &.ngxp__container[x-placement^="left"] .ngxp__arrow {
            border-color: transparent transparent transparent @blue-bright;
        }
        &.ngxp__container[x-placement^="right"]  .ngxp__arrow {
          // if you want only right pointing arrows to be a different color
           border-color: transparent lime transparent transparent;
        }
    }
}`

[MrFrankel]

@IBYuMe first, it would be better to open a new issue for this, as this issue is already closed.
Second, ill try add the arrow class hook tomorrow.

[IBYuMe]

@MrFrankel thank you for all of your help!
I opened a new issue/ request to discuss the arrow class styling.