Setting zIndex for dijit/form/button

[Anonymous User]

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

[JasonZou]

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> 

[Anonymous User]

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

[Anonymous User]

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

[JasonZou]

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?

[Anonymous User]

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.

[Anonymous User]

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.

[JasonZou]

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

[Anonymous User]

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

[JasonZou · Accepted solution]

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/.