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

[Anonymous User]

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.

[RickeyFight]

Michael Banks‌

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

[Anonymous User]

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.

[RickeyFight]

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

[Anonymous User]

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:

[Anonymous User]

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

[RickeyFight]

Michael Banks‌

You have tried changing this? 

[Anonymous User]

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)

[Anonymous User · Accepted solution]

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