A long time ago, I was asked if it was possible to put the nivo shortcode into a sidebar widget.
I said yes, and developed an example on this site – in the header.
Since then I’ve had problems where the transitions weren’t displaying correctly.
In June 2013 I tried applying a fix to set max-width to none on .nivoSlider img.
Just recently, I noticed the problem on a slider being displayed in a text widget in a child theme I was creating.
And today I finally tracked down the problem.
Problem
As demonstrated in a screen capture in H2GD Part 18: nivo slider started misbehaving, a small image appears in the top left corner of the slider. In the new theme this small image varied in size. I noticed it also varied depending on the transition being performed.
I was able to trim the HTML down to demonstrate that it was the fact that the slider was embedded in a div with a class of “textwidget” that caused the problem to appear.
Then I looked at the CSS.
Explanation
oik.css included the following
div.textwidget img { max-width: 100%; }
The nivo slider CSS in nivo-slider-32.css was setting the margins on images in divs with a class of “nivo-slice” or “nivo-box” to 0, but it was not setting max-width to none.
I have now corrected this, in both the oik-nivo-slider AND oik base plugin, using the following CSS
div.nivo-slice img, div.nivo-box img { margin: 0px; max-width: none; }
Hopefully, this slider should appear correctly.
Note: It’s in a div of class “textwidget w80pc”
See also
- H2GD Part 18: nivo slider started misbehaving
- oik-nivo-slider version 1.11 contains a fix for this problem.