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

is there any way to customize individual elements in a LayerList?

DanielSchatt

hi all, I have a layer list generated from a dynamic map service layer and I'd like to make a few cosmetic changes.

I would like to make the map service name (the header at the top level of the tree) into a bigger bolder typeface and center it. I see that one can change some properties like typeface of all the elements but I just want to change that one element.

Also I'd like to make its check box invisible to the user (unnecessary for it to be there since it will always be checked) and I'd like to have the tree expanded upon loading.

Are these changes possible? Thanks much!

Dan

Trouver plus de publications taguées avec

Accepted answers

kenbuja

Here's how to select that label

label[for=layerList_checkbox_0] {
    font-weight: bold;
}

All comments

RickeyFight

Dan,

These changes should be possible. Can you post your code for the layer list and provide some screen shots of what you want changed.

DanielSchatt

thanks much Rickey! My layer list widget and my code are below. Basically I would just like to enlarge and bolden the "Shoreline Assessment Mapper" text at the top and center it. Then

remove that check box (and have it checked by default) and the layer list expanded when it loads.

    map = new Map("map", {
        id: "Base map",
        center: [-76.7, 37.786],
        scale: 2000000
    });    
    var basestreet = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer", {
          id: 'street'
    });
    basestreet.setVisibility(true);
    
    var shorelineAssessmentMapperLayer = new ArcGISDynamicMapServiceLayer("http://cmap.vims.edu/arcgis/rest/services/ShorelineAssessmentMapper/MapServer", {
          id: "Shoreline Assessment Mapper"
    });
    shorelineAssessmentMapperLayer.setVisibility(true);
    map.addLayers([basestreet, shorelineAssessmentMapperLayer]);

    var myWidget = new LayerList({
        map: map,
        layers: [{
            layer: shorelineAssessmentMapperLayer
        }],
        showLegend: true,
        showSubLayers: true
    },"layerList");
    myWidget.startup();

RickeyFight

Dan try adding:

input#layerList_checkbox_0 {

visibility: hidden;

}

to the css.

I am guessing at the checkbox # it might be a different one.

Can you provide a link to the site? It would be easier to have the whole code or the link so I can play with the css .

DanielSchatt

great, thanks!! I'll give that a shot, appreciate it! Here's a link:

http://cmap2.vims.edu/SAM/ShorelineAssessmentMapper.html

Dan

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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