Content pane / buttons / print and Basemap toggle

jaykapalczynski

trying to get all 4 on the same line....the code below gets the first 3 on the same line but the BaseMapToggle is not...there is more than enough room on that line???

Thoughts?

<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">  <div class="TBtoolbar" id="select_button">   <div data-dojo-type="dijit/TitlePane"    data-dojo-props="title:'Tools', closable:false,  open:false">    <div data-dojo-type="dijit/layout/ContentPane" style="width:600; height:125px;">      <input type="button" id="button1" value="Identify" />      <input type="button" id="button2" value="Finished" />     <span id="print_button"></span>     <span id="BasemapToggle"></span>    </div>   </div>  </div> </div>

#print_button{     border: none;     width: 50px;     display: inline-block; } #BasemapToggle{     display: inline-block;     border: none;     width: 65px; }

BenFousek

Hey Jay,

You need to inspect the HTML that is produced when the basemap toggle is created. You'll see that your <span id="BasemapToggle"></span> is no longer a span but a div with the style attribute display:block, which overrides your css.

The basemap toggle widget is manipulating the dom node you are are specifying as the srcNodeRef in the constructor. This is what templated widgets do. I won't go into the hows and whys. There's plenty of info on the dojo and sitepen web sites about widgets; how they are created and how they work.

All templated widgets accept the the property className. The widget will add this class to the new dom node that is created. In your case you could:

var toggle = new BasemapToggle({     map: app.map,     basemap: "satellite",     // here's our class to add     className: "customToggle" }, "BasemapToggle"); toggle.startup();

We need to specify !important here because the widget is setting the style property on the element which always overrides any added class that does not.

.customToggle { display: inline-block !important; }

Even easier just add !important to your current css.