nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Help adding Print button to toolbar

JaniceBaird

When I add the print button to the nav tool bar, I get an extra button behind the print button. Is there a way to add the print button as shown in the attached screen shot without getting an extra button?

thanks,
Janice.

ButtonBehindPrintButton.png

Clip_488.jpg

MichaelBouvet_0-1631054566073.png

Trouver plus de publications taguées avec

Accepted answers

JianHuang

Janice,

The reason that print widget starts from a new line is that it has a div around it. Essentially, print widget is a div, which contains a dojo form button/toggle button. You can manipulate the css to get the job done. For example:
.esriPrint{
float: left;
padding: 0px;
}
This would move the print div to the left.

If you want to try toolbar.addChild(), you need to pass in print._printButton. Also, you can keep the declarative way to create the toolbar, then you can get the dijit by calling dijit.byId("navToolbar").

Hope this helps.

All comments

BrettGreenfield__DNR_

Thanks! The simplest answers are always those that elude me most.

JianHuang

Brett,

The default style of the print button has a 8px padding around it. So you have to set it as 0px to make it line up with other buttons.
.esriPrint{
float: left;
padding: 0px;
}

Glad I found this thread - I was having the same issue where the print button was adding itself above or below the toolbar next to the other tools. Adding float:left to the CSS fixed that problem.

Now, though, the print button screws up the "look" of the toolbar. I have three other items added to the toolbar, all of them dijit.form.DropDownButtons, which all line up neatly when added to the toolbar. Adding the print button - I suppose since it's a "button" not a "DropDownButton" - messes with the alignment. See the attached screenshot.

So far I've left the CSS of the drop down buttons the default claro style, but before I go customizing them I'd like to have the Print button match their style. Is there a way I can call in the print dijit as a .dropdownbutton instead of a .button, so the styles match?

JaniceBaird

Hey bgfield,

You may need to tweak the height of the print button to get it to be the same size as the other buttons. I set mine to 21px. See the attached file.

Janice.

PrintButton3.png

after.jpg

BrettGreenfield__DNR_

Glad I found this thread - I was having the same issue where the print button was adding itself above or below the toolbar next to the other tools. Adding float:left to the CSS fixed that problem.

Now, though, the print button screws up the "look" of the toolbar. I have three other items added to the toolbar, all of them dijit.form.DropDownButtons, which all line up neatly when added to the toolbar. Adding the print button - I suppose since it's a "button" not a "DropDownButton" - messes with the alignment. See the attached screenshot.

So far I've left the CSS of the drop down buttons the default claro style, but before I go customizing them I'd like to have the Print button match their style. Is there a way I can call in the print dijit as a .dropdownbutton instead of a .button, so the styles match?

Toolbar.png

DrapingFactor1.0001.jpg

JaniceBaird

Jian,

Thank-you for all the help! Is there any training that you would suggest that could help a person understand javascript and dojo and how it all fits together?

Thanks!
Janice.

JianHuang

JaniceBaird

Jian,

Thanks for the help. This works for adding the Print Button to the toolbar but is not exactly what I want. I attached a screenshot of what the toolbar looks like after changing my code. I would like to be able to insert the print button between my bookmark button and my help button. All of the other buttons are declaritive (is that what you call it when they are created in HTML?). Do I need to create all of the buttons on the toolbar programmatically to get the level of control that I am looking for?

I tried to use navToolbar.addChild(printer, 😎 and did not get any results.

It also works how I had it before as long as the print div is without the dijit.form.button part. (<div id="print_button"></div>). However, this causes the Print and the Help Buttons to display below each other. I attached this screen shot as well.

Your thoughts on this would be greatly appreciated.

Thanks,
Janice.

    //get the toolbar
    var theToolBar = dojo.byId("navToolbar");
    //create the print dijit
    app.printer = new esri.dijit.Print({
        "map": app.map,
        "templates": templates,
        url: app.printURL
    }, theToolBar);//.placeAt("navToolbar"); //, //dojo.byId("print_button"));  //theToolBar);
//    theToolBar.addChild(app.printer, 6);
    app.printer.startup();

    <div id="navToolbar" data-dojo-type="dijit.Toolbar">
      <div data-dojo-type="dijit.form.Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN); setActiveTool('zoomin');}">Zoom In</div>      
      <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT); setActiveTool('zoomout');}">Zoom Out</div>      
      <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){zoomToFullExtent();}">Full Extent</div>      
      <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}">Prev Extent</div>      
      <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}">Next Extent</div>
      <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN); setActiveTool('pan');}">Pan</div>
      <div data-dojo-type="dijit.form.Button" id="measure" data-dojo-props="iconClass:'measureIcon', onClick:function(){setActiveTool('measure'); displayMeasure();}">Measure</div>
      <div data-dojo-type="dijit.form.DropDownButton" data-dojo-props="iconClass:'bookmarkIcon'">
        <span>Bookmarks</span>
        <div data-dojo-type="dijit.TooltipDialog">
          <div id="bookmarks"></div>
        </div>
      </div>
      <div id="print_button"></div>
      <div data-dojo-type="dijit.form.Button" id="help" data-dojo-props="iconClass:'helpIcon', onClick:function(){displayHelp();}">Help</div>
    </div>

PrintButton1.png

PrintButton2.png

abureaux_4-1724858615714.png

Brian_McLeer_0-1724858622622.png

mxd.jpg

folder.png

JianHuang

Janice,

Print widget renders itself as a dijit.form.Button. If you add it into a dijit button, it will behave as you observed. The correct way is to add it to the toolbar directly.

        var toolbar = new dijit.Toolbar({},"navToolbar");  
        // print dijit
        var printer = new esri.dijit.Print({
          map: map,          
   url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export Web Map Task"
        }, toolbar.domNode); 
        printer.startup();

In HTML
<div id="navToolbar"></div>

JaniceBaird

I am using the esri.dijit.Print example for adding templates to the esri print dijit. This gives me a print button so when I add that button to the toolbar, I get a button on top of a button. If I give the toolbar button a class, like I did with the navigation buttons, I get an image added to the button that is behind the Print button. What I would like to do is add the Print Button (esri print dijit) to the toolbar. I understand how to add buttons to the toolbar, I successfully added the bookmarks, help, and measure buttons. What I don't understand is how to add a pre-canned button (the esri print dijit) to the toolbar without the toolbar creating a button for me to use.

If I use the button provided by the toolbar and call it 'Print' and then add the print dijit to it, what I get is a button that when clicked brings up another button that has the dropdown list of templates on it. I really do not want a button on a button.

Has anyone else successfully added a print dijit to the toolbar as I am describing?

Thanks!

MarcusBush

The only thing I notice right off is that it is missing a "class" that your other buttons have, unless there is a pre-set dijit class you were intending on using, you may need to customize your own in css

JaniceBaird

Here is the button code...

    <div id="navToolbar" data-dojo-type="dijit.Toolbar">
      <div data-dojo-type="dijit.form.Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN); setActiveTool('zoomin');}">Zoom In</div>
      <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT); setActiveTool('zoomout');}">Zoom Out</div>
      <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){zoomToFullExtent();}">Full Extent</div>
      <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}">Prev Extent</div>
      <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}">Next Extent</div>
      <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN); setActiveTool('pan');}">Pan</div>
      <div data-dojo-type="dijit.form.Button" id="measure" data-dojo-props="iconClass:'measureIcon', onClick:function(){setActiveTool('measure'); displayMeasure();}">Measure</div>
      <div data-dojo-type="dijit.form.DropDownButton" data-dojo-props="iconClass:'bookmarkIcon'">
        <span>Bookmarks</span>
        <div data-dojo-type="dijit.TooltipDialog">
          <div id="bookmarks"></div>
        </div>
      </div>
      <div data-dojo-type="dijit.form.Button" id="print_button">
      </div>
      <div data-dojo-type="dijit.form.Button" id="help" data-dojo-props="iconClass:'helpIcon', onClick:function(){displayHelp();}">Help</div>
    </div>

MarcusBush

Could you post a code sample with the code you are using for the button and the buttons around it?

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.