topic Re: I am having issues styling a map so that it can fit within the bounds of my Bootstrap view. in ArcGIS JavaScript Maps SDK Questions

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

Anonymous User — Wed, 17 Jun 2020 00:50:18 GMT

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.

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

RickeyFight — Wed, 17 Jun 2020 14:05:07 GMT

Michael Banks‌

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

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

Anonymous User — Wed, 17 Jun 2020 14:07:08 GMT

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.

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

RickeyFight — Wed, 17 Jun 2020 14:19:38 GMT

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

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

Anonymous User — Wed, 17 Jun 2020 14:39:06 GMT

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:

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

Anonymous User — Wed, 17 Jun 2020 14:52:18 GMT

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

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

RickeyFight — Wed, 17 Jun 2020 15:10:55 GMT

Michael Banks‌

You have tried changing this?

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

Anonymous User — Wed, 17 Jun 2020 15:14:56 GMT

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)

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

Anonymous User — Wed, 17 Jun 2020 17:01:07 GMT

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