Search code examples
htmlcsswordpressbarcodebarcode-printing

Wordpress <img> style is being overridden when placed in widget

I am creating a WP Widget that draws a barcode. I can generate a barcode that works just fine when I just place it on an admin page (à la Hello Dolly!).

enter image description here

The tags that make up the barcode explicitly set the height and width of the bars and spaces and everyone is happy.

When I apply the same plug-in code to a widget, the width is left alone, but the height is scaled down for some reason.

enter image description here

The result is a barcode approximately 1 pixel high which doesn't scan right. I am interested in finding out why / how my explicit styling is being overridden in the widget class.

EDIT: The only css contained in the plug-in is here:

// We need some CSS to position the paragraph
function barcode_css() {
        $x = is_rtl() ? 'left' : 'right';

        echo "
        <style type='text/css'>
        #barcode {
                float: $x;
                padding-$x: 15px;
                padding-top: 5px;
                margin: 0;
                font-size: 11px;
        }
        </style>
        ";
}
Solution

  • It is working now. Instead of trying explicitly set attributes for height and width I used inline CSS according to this answer: https://stackoverflow.com/a/15000373/769938

    Once I adjusted my widget's php it started working.

    enter image description here