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

How To Keep Layers Button Open?

johnywhy

hi

i'm using the embedded application here:

http://www.bayviewfootprints.org/asset-map.html

How can i keep the Layers button open at all times? It's the element with widgetID=layerBtn.

Prefer CSS, but javascript ok too.

Thanks!

Find more posts tagged with

Accepted answers

All comments

MikeMinamiP1

Are you wanting to plug your changes back into the hosted application running on ArcGIS Online? There is no ability to do this. The only thing you can do is download the code from a template, modify it, then host it on your own web server.

Did you figure out your difficulties from the previous post? You'll probably get a better response by posting in the JavaScript API forum

http://forums.arcgis.com/forums/15-ArcGIS-API-for-JavaScript

That's where the developers hang out...

Thanks,

Mike

JohnWeiss

One reason I hope to accomplish this as a mod of the default application, is so my non-tech admin can add or remove feeds or make other changes using the arcgis web-builder GUI, generate a new map, and then just plug-in this floating-palette tweak.

Trying to exploit existing drag n drop management tools.

Does a plugin architecture exist for exactly this?

Thanks

JohnWeiss

in layout.css, i tried two more css ways to target the parent div of the layers popup. Neither worked:

CSS2 to target the first sibling of #bc

div#bc + div{
 display: auto;
 }

CSS3 to target 2nd child of body

body :nth-child(2) {
 display: auto;
}

i suspect this must be done in JS, perhaps involving an OnLoad event. Someone please reply!

Css topic is here, or here's a thread re OnLoad events
http://forums.arcgis.com/threads/62862-How-To-Change-Application-CSS-with-OnLoad

thanks!

JohnWeiss

They would be better off removing the existing layer list from the drop down button and positioning it where they'd like - maybe floating on the map?

that sounds swell. What would be the simplest way to turning the existing palette into that? I'd like to use the existing html/css for that palette, with least tweaks necessary. Basically, remove the click-code and remove the display:none; style so it stays visible, and give it position:absolute;

many thanks!

JohnWeiss

i'm curious to know if this can be done by loading the extra CSS into default application after it loads, using OnLoad or some other method. I started a separate thread here, since it seemed like a distinct question.
http://forums.arcgis.com/threads/62862-How-To-Change-Application-CSS-with-OnLoad

i'd like to just tweak the default app if possible, since it looks so great. And, isn't that the idea?

i don't mind using javascript or php to mod the layers palette css.

help is much appreciated!

MikeMinamiP1

John,

Some input from one of our developers...

I don't think they'll be able to easily keep the drop down layer list open. They would be better off removing the existing layer list from the drop down button and positioning it where they'd like - maybe floating on the map?

Thanks,

Mike

JohnWeiss

i'd like to do this in css, if possible.

this is the item to target:
[HTML]<div id="popup_43" class="dijitPopup dijitMenuPopup" style="visibility: visible; top: 33px; z-index: 1000; left: 85.8px; display: none;" role="presentation" dijitpopupparent="layerBtn">[/HTML]

in a live css editor (like firebug), by changing

display: none;

display: ;

that has the desired effect of keeping the palette open. great!

unfortunately, the div's ID changes everytime js opens it, so we cannot target it's ID. In the example above, it's "popup_43". Next time user clicks it, it becomes "popup_44".

so we need to target it a different way. i think the only unique attribute is the custom attribute:

dijitpopupparent="layerBtn"

i tried targeting this with the following css, but it has no effect:

div[dijitpopupparent="layerBtn"]
   {
    display:;
   }

what's wrong with my css here?

thanks

MikeMinamiP1

I found these samples that might help...

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/map_dynamiclayerlist.html
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/map_explicitlayerlist.html

Thanks,

Mike

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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