I need to center a graphic element on the map

662
3
Jump to solution
07-07-2022 08:49 AM
stiven
by
New Contributor III

I want to position the search engine in the middle of the map, I have only found the positions of : "bottom-leading"|"bottom-left"|"bottom-right"|"bottom-trailing"|"top-leading"|"top-left"|"top-right"|"top-trailing"|"manual"

i want this: 

stivenstiven_0-1657207480737.png

 

0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

You can use the manual option then position the search component with CSS. This example isn't perfect but it'll show you the general steps

https://codepen.io/kellyhutchins/pen/poLyJwK?editors=100

 

Here's the css that is used in the sample: 

 

      .esri-ui-manual-container>.esri-component.esri-search {
        position: absolute;
        left: calc(50vw - 120px);
        top: 20px;
    }

https://codepen.io/kellyhutchins/pen/poLyJwK?editors=100

View solution in original post

3 Replies
KellyHutchins
Esri Frequent Contributor

You can use the manual option then position the search component with CSS. This example isn't perfect but it'll show you the general steps

https://codepen.io/kellyhutchins/pen/poLyJwK?editors=100

 

Here's the css that is used in the sample: 

 

      .esri-ui-manual-container>.esri-component.esri-search {
        position: absolute;
        left: calc(50vw - 120px);
        top: 20px;
    }

https://codepen.io/kellyhutchins/pen/poLyJwK?editors=100

stiven
by
New Contributor III

Thank you very much, that worked

0 Kudos
CherieBryant
New Contributor III

This was very helpful and got me on the right track. Thank you!

If you can make the width of the element to be centered a percentage, then the remainder can be split in half for the left margin. I'm using a custom container here for a slider bar. 

 

#sliderContainer {
  width: 50%;
}

.esri-ui-manual-container > div#sliderContainer.box.esri-component {
  left: 25%;
}

 

0 Kudos