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

ESRI Logo not showing on my map. Why?

AlexGole1

Hi all,
It seems like It is necessary to show the web application with the "Power by ESRI" logo for any web maps. For some reasons, the ESRI logo is not showing on mine. I am not sure why. http://jsbin.com/ficetiwo/7/edit. Anyone has an idea?
Thank you,
Alex

Encuentra más publicaciones etiquetadas con

Accepted answers

BenFousek

Scratch previous. The logo is there but map overflow is hidden. Why put all those extra elements in the map's domNode? They are making the map overflow. The only thing you should have in the map in the home button div.

All comments

BenFousek

You are using a <section> for your map and not a <div>.

AlexGole1

You are using a <section> for your map and not a <div>.

hmmm. Does that really matter? I have just replaced section by div. The logo is still not showing

BenFousek

That might not be 100% true but it has something to do all the sections in the map domNode.

AlexGole1

That might not be 100% true but it has something to do all the sections in the map domNode.

Good to know. I will use <div> from now on. I am still unable to see the ESRI logo though. Thank you for your advice and help.
Alex

BenFousek

AlexGole1

Scratch previous. The logo is there but map overflow is hidden. Why put all those extra elements in the map's domNode? They are making the map overflow. The only thing you should have in the map in the home button div.

That's a good question. Well I just like to have the toolbar within the map frame. It can be resized by users, It is right there with the map and I think it looks good. That being said, I have no idea how to have the toolbar behave in a similar fashion to what I currently have without having the toolbar within the map element.

BenFousek

I see. You can use a border container as a region (no height or width required). Set the toolbar as the top region and the map as the center region therein.

AlexGole1

I see. You can use a border container as a region (no height or width required). Set the toolbar as the top region and the map as the center region therein.

Wont that mess up my header though? I am just guessing here.

BenFousek

Will not.

In your case:
[HTML]<div type="bc" props="design:'headline', liveSplitters:false">
    <div type="cp" props="region:'top'">
        header
    </div>
    <div type="bc" props="region:'center', design:'sidebar', liveSplitters:true">
        <div type="cp" props="region:'left'">
            left
        </div>
        <div type="tb" props="region:'top', splitter:false">
            toolbar
        </div>
        <div id="map" type="cp" props="region:'center'">
            map
        </div>
    </div>
</div>[/HTML]
(just for structure

)

AlexGole1

Will not.

In your case:
[HTML]<div type="bc" props="design:'headline', liveSplitters:false">
    <div type="cp" props="region:'top'">
        header
    </div>
    <div type="bc" props="region:'center', design:'sidebar', liveSplitters:true">
        <div type="cp" props="region:'left'">
            left
        </div>
        <div type="tb" props="region:'top', splitter:false">
            toolbar
        </div>
        <div id="map" type="cp" props="region:'center'">
            map
        </div>
    </div>
</div>[/HTML]
(just for structure )

Thank you! I am going to reshape my code then!

AlexGole1

Alright I like it except two things:
1) toolbar that is in a brodercontainer has borders. I would like to remove the borders.
2) The legend is just below the toolbar

Is there a way to change that? Overwise this is a great technique.
Thanks ,
Alex

[ATTACH=CONFIG]33879[/ATTACH]

mapasitis.PNG

BenFousek

1) override with css

2) set the center region border container prop "design:'sidebar'"

AlexGole1

1) override with css

2) set the center region border container prop "design:'sidebar'"

Almost got it all. Looks better and better. Now how do I override borders with css. I m not very familiar with overriding elements in css.

BenFousek

Inspect the element with your browser's dev tools (i use firebug w/ firefox). It allows to see what styles are applied to an element and play around with styles in real time w/o reloading the page.

AlexGole1

Inspect the element with your browser's dev tools (i use firebug w/ firefox). It allows to see what styles are applied to an element and play around with styles in real time w/o reloading the page.

That is what I do. I can remove borders using firefox firebug live edits. but when I copy what I changed to my css file:

.claro .dijitSplitterH, .claro .dijitGutterH {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    height: 0px;
}

I am not sure I can override this one.

BenFousek

You're talking about the gutters. Instead of changing css, set center border container prop "gutters:false".

AlexGole1

You're talking about the gutters. Instead of changing css, set center border container prop "gutters:false".

You got it. My app looks fantastic now, just as I want it to look. Thank you!

BenFousek

You bet. Have a great weekend.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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