topic Re: Setting zIndex for dijit/form/button in ArcGIS JavaScript Maps SDK Questions

Setting zIndex for dijit/form/button

Anonymous User — Thu, 29 Aug 2013 18:57:45 GMT

Is it possible using the following syntax? Seems to have no effect

<button id="locate" data-dojo-type="dijit/form/Button" data-dojo-props="zIndex: 900">Locate</button>

Thanks!

rGibson

Re: Setting zIndex for dijit/form/button

JasonZou — Thu, 29 Aug 2013 19:02:50 GMT

data-dojo-props is used to set the properties for dijit/form/Button, not for style settings. Use style to set css rules.
Try:

<button id="locate" data-dojo-type="dijit/form/Button" style="z-index: 900">Locate</button>

Re: Setting zIndex for dijit/form/button

Anonymous User — Thu, 29 Aug 2013 19:08:42 GMT

data-dojo-props is used to set the properties for dijit/form/Button, not for style settings. Use style to set css rules.
Try:
<button id="locate" data-dojo-type="dijit/form/Button" style="z-index: 900">Locate</button> 

Thanks for the quick reply. I tried that as well and still no luck.

Thanks!

rGibson

Re: Setting zIndex for dijit/form/button

Anonymous User — Thu, 29 Aug 2013 19:10:20 GMT

data-dojo-props is used to set the properties for dijit/form/Button, not for style settings. Use style to set css rules.
Try:
<button id="locate" data-dojo-type="dijit/form/Button" style="z-index: 900">Locate</button> 

Attempting to have the button visible within a div, style by:

div.floating-layerMenu {
position: fixed;
right: 35px;
top: 100px;
background: #000000;
border: 0;
z-index: 1;
padding: 0px;
margin: 0 0 0 0px;
display:none;
}

Re: Setting zIndex for dijit/form/button

JasonZou — Thu, 29 Aug 2013 19:24:11 GMT

z-index is very tricky. Button's z-index only works within the scope of its container, which is div.floating-layerMenu in your case. Is div.floating-layerMenu visible?

Re: Setting zIndex for dijit/form/button

Anonymous User — Thu, 29 Aug 2013 19:25:59 GMT

z-index is very tricky. Button's z-index only works within the scope of its container, which is div.floating-layerMenu in your case. Is div.floating-layerMenu visible?

Initially, no. But at the click from a toolbar it becomes visible.

Re: Setting zIndex for dijit/form/button

Anonymous User — Thu, 29 Aug 2013 19:28:32 GMT

z-index is very tricky. Button's z-index only works within the scope of its container, which is div.floating-layerMenu in your case. Is div.floating-layerMenu visible?

I actually tried...

div.locateBtn {
z-index: 900;
width: 50px;
height: 25px;
}

which worked but then the button could not be sized. It just appeared as a small, round button.

Re: Setting zIndex for dijit/form/button

JasonZou — Thu, 29 Aug 2013 20:04:34 GMT

Can you post the portion of your html? Normally, buttons should resize themselves automatically unless you specifically set their width and height.

Re: Setting zIndex for dijit/form/button

Anonymous User — Thu, 29 Aug 2013 20:23:48 GMT

Can you post the portion of your html? Normally, buttons should resize themselves automatically unless you specifically set their width and height.

<div id="findAddress" class="floating-layerMenu" style="width:200px; height:150px;" >
         <h5>Find Address</h5>
<br>
         <textarea type="text" id="address"/>8813 Meadow Dr, Fort Smith, AR</textArea>
<br>
<button id="locate" data-dojo-type="dijit/form/Button" style="z-index: 900">Locate</button>
</div>

div.floating-layerMenu {
     position: fixed;
right: 35px;
top: 100px;
background: #000000;
border: 0;
z-index: 1;
padding: 0px;
margin: 0 0 0 0px;
display:none;
   }

Re: Setting zIndex for dijit/form/button

JasonZou — Thu, 29 Aug 2013 21:24:40 GMT

No need to set z-index for button here. What makes you want to set z-index? In addition, just learnt today that z-index only works for positioned elements. Please refer to http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/.

<button id="locate" data-dojo-type="dijit/form/Button">Locate</button>

I can display the button without any problem. See http://jsfiddle.net/4Dm7y/.

Re: Setting zIndex for dijit/form/button

Anonymous User — Thu, 29 Aug 2013 21:31:02 GMT

No need to set z-index for button here. What makes you want to set z-index? In addition, just learnt today that z-index only works for positioned elements. Please refer to http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/.

<button id="locate" data-dojo-type="dijit/form/Button">Locate</button>

I can display the button without any problem. See http://jsfiddle.net/4Dm7y/.

Interesting.....the button doesn't appear on my app.

Thanks again for all your help, Jason.

Re: Setting zIndex for dijit/form/button

Anonymous User — Fri, 30 Aug 2013 20:06:38 GMT

No need to set z-index for button here. What makes you want to set z-index? In addition, just learnt today that z-index only works for positioned elements. Please refer to http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/.

<button id="locate" data-dojo-type="dijit/form/Button">Locate</button>

I can display the button without any problem. See http://jsfiddle.net/4Dm7y/.

Ugh....found the offending code in the CSS. Thanks again for your help, Jason.

.claro .dijitButtonNode
    {
     background-color: transparent !important;
background-image: none !important;
border: 0px !important;
    }