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; }

[jaykapalczynski]

They all stay on one line except the BaseMapToggle...confused.

   
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div>
  <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;">
 <div style="display: inline"><input type="button" class="myButton" id="button1" value="Identify" /></div>
 <div style="display: inline"><input type="button" class="myButton" id="button2" value="Finished" /></div>
 <div style="display: inline"><span id="print_button"></span></div>
 <div style="display: inline"><span id="BasemapToggle"></span></div>
    </div>
  </div>
</div>
</div>

[JonathanUihlein]

Hi Jay,

Can you a minute to recreate a demo of the problem using http://jsfiddle.net/ ?

It's much easier to troubleshoot CSS issues with a working sample.

Thanks!

[jaykapalczynski]

The service is secured so just cancel out of that...
Click to Tools at top of map.  This will expand....I looking to get all on same line.

http://jsfiddle.net/Jaykapalczynski/ZUxk5/11/

hope this helps...I knowthe image will be larger but trying to figure out how to get them inline as they are enclosed in DIV tags.

Thanks

[JonathanUihlein]

In this specific situation, you will probably want to use "display: inline-block;"

Semi-related to CSS: your map is getting cut off because of the two TitlePanes.

[BenFousek · Accepted solution]

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.

[jaykapalczynski]

Thank you all for your help and comments...very appreciated.