I am having issues styling a map so that it can fit within the bounds of my Bootstrap view.

262
8
Jump to solution
06-16-2020 05:50 PM
by Anonymous User
Not applicable

Is there a way I can apply the same styling I apply to the form (image below) so that it lines up? The map view is loading a web map with the JavaScript API. If there is more information you need let me know.

0 Kudos
1 Solution

Accepted Solutions
by Anonymous User
Not applicable

Found a solution to my own question in this thread: https://community.esri.com/thread/178086 

View solution in original post

8 Replies
RickeyFight
MVP Regular Contributor

Michael Banks

When you say line up what do you want to happen? 

0 Kudos
by Anonymous User
Not applicable

I want the map to line up with the form elements that are above it. The map is inside the bootstrap container (the same as all other elements on the page), but when I set the width to 100%, it takes it as 100% of the screen size, rather than the space it is supposed to fill.

0 Kudos
RickeyFight
MVP Regular Contributor

Michael Banks

Can you share the webapp URL? Have you tried using the dev tools to play with the css to find what you are looking for? 
https://developers.google.com/web/tools/chrome-devtools

0 Kudos
by Anonymous User
Not applicable

I have tried playing around with the CSS in dev tools, but can't seem to find the right style to tweak. Unfortunately the web app is not hosted at the moment, but here is the HTML/CSS/JS that I have set if that helps:

0 Kudos
by Anonymous User
Not applicable

Is it possible i am loading the div with map before the rest of the HTML has loaded?

0 Kudos
RickeyFight
MVP Regular Contributor

Michael Banks

You have tried changing this? 

0 Kudos
by Anonymous User
Not applicable

Yes, when I change the width to 100%, the map goes off the page, as it is trying to take up 100% of the screen width, rather than the container it is in. See below for a visual/

It seems like it knows where to start, just not where to end (in terms of lining up with the elements above it)

0 Kudos
by Anonymous User
Not applicable

Found a solution to my own question in this thread: https://community.esri.com/thread/178086