Bug in Print Widget CSS

StevenGriffith

FYI, the CSS for the print widget has (what I believe to be) a problem. The "Print" button and "Printing" prompt have significantly different styling from the "Printout" link, to the point of even being different sizes. You can see this in the print sample on this site (http://help.arcgis.com/en/webapi/javascript/arcgis/demos/widget/widget_print.html).

This causes a real problem for sites that have to maintain a certain, consistent visual style - the differing sizes can throw off the CSS positioning of everything around the widget.

Steve G.
County of SLO

StevenGriffith

Some interesting suggestions - Actually, I kind of like that the "Printout" anchor does not look like a button; that helps make it clearer that this is something you need to click on. A second problem that I ran into is that when you're using multiple print templates, the Print button is a "combo button" construct that is actually slightly smaller than an digit.form.Button.

What I had to do was play games with the style to push the Print combobutton and Printout anchor into the same spot. For the combo-button I actually had to change the height of the inner "TD" element in order to get the border in the proper location. Then I had to push it down 3 pixels with margin-top on the containing div to get it into place. For the Printout anchor, I first had to style it as "display:block" in order to push it around, then I could push it down to the same level as the Print, using a 1 px margin-top on the anchor element.

Doing things this way allowed me to keep the CSS relatively clean and simple, and to not have to have a javascript based style switch.

Here's the relevant CSS:

#printSection
{
    margin-top:3px;
}

#printSection .esriPrintButton .td
{
    height:21px;
}

#printSection .esriPrintout 
{
    display:block;
    margin-top:1px;
}

This is still a work in progress as it works in Chrome and Firefox, but in IE, the "Print" button is one pixel too short, and in Opera, the Print and Printout both are one pixel too far down.

Steve G.
County of SLO