How to change the default width of pnotify Jquery plugin?

Question

I'm using this pnotify plugin to display tooltips notifications on my site. The default width of tooltip is 300px but thats not showing properly on iphone. So how can I change it's width ? If I inspect element , i see that the width:300px is an inline style property. I went into jquery.pnotify.min.js file and removed the width:300px property and added my own custom width in pnotify.css file for the .ui-notify. But still the width does not change.

Any ideas ?

Plugin link:

http://pinesframework.org/pnotify/

Answer 1

Try to add !important to your rule. This will override it for sure.

Example:

.ui-notify {
    width: 100px !important;
}

Answer 2

I realise this question is old and already has an accepted answer - but there's a better way to set the "default width" of the pnotify popups, without resorting to css with !important flag to override the actual default value. Javascript:

PNotify.prototype.options.width = "500px";

Answer 3

You can also add a class to your notice and do something like this:

 var notice = new PNotify({
  ...,
  addclass: 'custom-notif',
  ...,
});

And then with css:

.custom-notif {
    top: 5% !important;
    left: 5% !important;
    width: 90% !important;
}

This would allow you to create a bunch of different notifications (display at the top, display at the bottom, etc) where overriding .ui-notify's style wouldn't.

Answer 4

Now (dec 2014), according to the sources, you have the width property for this:

var notice = new PNotify({
  ...,
  // Width of the notice.
  width: "300px",
  ...,
});

This would be best if you wish to set only the width.