Is it possible using the following syntax? Seems to have no effect Locate Thanks! rGibson

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Najděte více příspěvků označených jako

Accepted answers

JasonZou

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

All comments

Anonymous User

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

Anonymous User

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.

JasonZou

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

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

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.

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.

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

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

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

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>

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.