topic Re: Content pane / buttons / print and Basemap toggle in ArcGIS JavaScript Maps SDK Questions

Content pane / buttons / print and Basemap toggle

jaykapalczynski — Tue, 25 Mar 2014 17:11:28 GMT

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

Re: Content pane / buttons / print and Basemap toggle

jaykapalczynski — Sun, 12 Dec 2021 16:32:10 GMT

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>

Re: Content pane / buttons / print and Basemap toggle

JonathanUihlein — Tue, 25 Mar 2014 19:52:52 GMT

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!

Re: Content pane / buttons / print and Basemap toggle

jaykapalczynski — Tue, 25 Mar 2014 20:05:37 GMT

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

Re: Content pane / buttons / print and Basemap toggle

JonathanUihlein — Tue, 25 Mar 2014 20:26:25 GMT

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.

Re: Content pane / buttons / print and Basemap toggle

BenFousek — Tue, 25 Mar 2014 21:40:16 GMT

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.

Re: Content pane / buttons / print and Basemap toggle

jaykapalczynski — Thu, 27 Mar 2014 10:22:56 GMT

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