Having problems moving map container on page

Hi there everyone!

I embedded a google map on the web page but for some reason the container dropped down when I added it, I’m trying to get the map to set close to the graph container above it but no matter what I try, I can’t figure out what I’m doing wrong: https://scotchandiron.org/fivemin/1.html

To clarify, the container did sit properly tight to the one above it until I added the Google map to the container.

Any help getting it back where it belongs would be greatly appreciated! Thanks for your time!

Hi, I’m not a bootstrap fan so I know little about it.

But from what I see it’s doing exactly what it’s supposed to. You have the map divs all nested in a <div class="row"> which is a full width block sitting below the full width .row div with the graph.

The .row divs are just blocks stacking on top one another. They are independent of each other. It’s not a matter of moving the map up with markup like that.

Did you change your HTML from what you had earlier? When you said it was working.

When you reduce the viewport width the media queries kick in and stack them together as blocks (like you are wanting)

Would it be possible to nest your graph and map divs as sibilings in the first row div.

That way you would have two .col-lg-8 divs stacking on top one another.

 <!-- /.col-lg-4 -->
 <div class="col-lg-8">
	  <div class="panel panel-default hidden-sm">
			<div class="panel-heading">
				 <i class="fa fa-bar-chart-o fa-fw"></i> Users Online
				 <div class="pull-right">
					  <div class="btn-group">
							<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
								 Actions
								 <span class="caret"></span>
							</button>
							<ul class="dropdown-menu pull-right" role="menu">
								 <li><a href="#">Action</a>
								 </li>
								 <li><a href="#">Another action</a>
								 </li>
								 <li><a href="#">Something else here</a>
								 </li>
								 <li class="divider"></li>
								 <li><a href="#">Separated link</a>
								 </li>
							</ul>
					  </div>
				 </div>
			</div>
			<!-- /.panel-heading -->
			<div class="panel-body">
				<div id="users-online-24hr" style="height: 340px;"></div>
			</div>
			<!-- /.panel-body -->
	  </div>
	  <!-- /.panel -->
 </div>
 <!-- /.col-lg-8 -->
 <div class="col-lg-8">
	  <div class="panel panel-default hidden-sm">
			<div class="panel-heading">
				 <i class="fa fa-bar-chart-o fa-fw"></i> User World Map
				 <div class="pull-right">
					  <div class="btn-group">
							<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
								 Actions
								 <span class="caret"></span>
							</button>
							<ul class="dropdown-menu pull-right" role="menu">
								 <li><a href="#">Action</a>
								 </li>
								 <li><a href="#">Another action</a>
								 </li>
								 <li><a href="#">Something else here</a>
								 </li>
								 <li class="divider"></li>
								 <li><a href="#">Separated link</a>
								 </li>
							</ul>
					  </div>
				 </div>
			</div>
			<!-- /.panel-heading -->
      </div>
			<div class="panel-body">
			<div id="map_wrapper">
				<div id="map_canvas" class="mapping"></div>
			</div>

</div>
<!-- /.row --
1 Like

Thank you so much for your help! I will give your method a shot as I think not having one side’s position being dependent on the left side’s content would make more sense than the current design. I’ll see if I can get it sorted and will report back with either my success or miserable failure :slight_smile:

1 Like