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

[derekswingley1]

That's a fair criticism but is also something that you as a developer can address. How are you handling this in your application? What specfic changes would you make to address the problems you've described?

[ReneRubalcava]

You could try styling the anchor to look like a button.
I just copied the various dijit styles of the button to the anchor.

a.esriPrintout
{
 text-decoration: none;
 font-weight: bold;
 display: inline-block;
 color: #421B14;
 width: 160px; /** this was set in the demo page **/
 cursor: pointer;
 margin: 0;
 line-height: normal;
 vertical-align: middle;
 white-space: nowrap;
 text-align: center;
             /** This is where the button look starts to take shape **/
 border: 1px solid #DEDEDE;
 border-bottom: 1px solid #DEDEDE;
 padding: 0.1em 0.2em 0.2em 0.2em;
 background: white url(images/buttonEnabled.png) repeat-x top left;
}

a.esriPrintout:hover
{
 color: #5EC5E6; /** I just picked something that would stand out **/
}

Luckily they gave the anchor a class that could be reached pretty easily without funky css selectors.

[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