Help with maps plugin CSS styling

[melitica]

Hi! I have a plugin on my website that shows different locations for our store. I've been having a set of issues trying to position, style it and adapt it to the website.

See the problems HERE.

• The first problem is getting the plugin to position itself directly under the title and next to the text, on the right of the page. For some reason, it's pushed down under the text.
• The second issue I'm having is rendering some space under the maps, like a bottom margin that separates it from the footer. I use a Jquery function that determines the height of my content after it has loaded it. For some reason, it always renders only a portion of the height of the maps, and then the footer covers the rest. I tried adding a bottom margin to the css but it renders differently in different browsers (even though I'm using a css reset). What am I missing?
• The third issue I'm having has to do with styling the dialogs and text inside of the map. The plugin uses the foundation stylesheet , but I'm not sure what settings I need to change. For example, when I click on Anaheim, I would like the dialog and the text to be a little bigger and not have a scrollbar.

Here's the HTML markup:

<div id="content">
<div id="page-title">CONTACT US.</div>
<p id="content-text2">We have 9 full-service locations to serve your needs. If you have any questions or need assistance call one of our offices and they'll be happy to assist you. <br /> <br /><br />Would you like us to contact you? Need more information? Click <a href="#">HERE</a><br /></p>

<div id="gmap-tabs" class="gmap"></div>

<!--Script that load the map plugin-->
<script>
  new Maplace({
    locations: [
    {
      lat: 33.8583,
      lon: -117.8678,
      title: 'Anaheim',
      html: [
      '<h3>Anaheim</h3>',
      '<p>1361 N RedGum St, Anaheim CA 92806<br>(714) 630-5954</p>'
      ].join(''),
      zoom: 8
    },
    {
      lat: 34.2358,
      lon: -118.5739,
      title: 'Chatsworth',
      html: [
      '<h3>Chatsworth</h3>',
      '<p>20233 Corisco St, Chatsworth CA 91311<br>(818) 998-3001</p>'
      ].join(''),
      zoom: 8
    },
    {
      lat: 32.8142,
      lon: -117.1247,
      title: 'San Diego',
      html: [
      '<h3>San Diego</h3>',
      '<p>4000 Ruffin Road Suite K, San Diego CA 92123<br>(858) 292-1622</p>'
      ].join(''),
      zoom: 8
    }
    ,
    {
      lat: 34.9137,
      lon: -120.4632,
      title: 'Santa Maria',
      html: [
      '<h3>Santa Maria</h3>',
      '<p>1459 W. Fairway Dr., Santa Maria CA 93455<br>(805) 922-4445</p>'
      ].join(''),
      zoom: 8
    }
    ,
    {
      lat: 34.5011,
      lon: -117.3279,
      title: 'Victorville',
      html: [
      '<h3>Victorville</h3>',
      '<p>15400-B Tamarack Road, Victorville CA 92392<br>(760) 243-5666</p>'
      ].join(''),
      zoom: 8
    }
    ,
    {
      lat: 36.1605,
      lon: -115.1050,
      title: 'Las Vegas',
      html: [
      '<h3>Las Vegas</h3>',
      '<p>3101 Builders Ave., Las Vegas, NV 89101<br>(702) 452-2440</p>'
      ].join(''),
      zoom: 8
    }
    ,
    {
      lat: 33.1677,
      lon: -117.2202,
      title: 'Vista',
      html: [
      '<h3>Vista</h3>',
      '<p>2055 Thibodo Rd, Vista CA 92081<br>(760) 599-0791</p>'
      ].join(''),
      zoom: 8
    }
    ,
    {
      lat: 33.6224,
      lon: -117.7194,
      title: 'Laguna Hills',
      html: [
      '<h3>Laguna Hills</h3>',
      '<p>23561 Ridge Route Suite P, Laguna Hills CA 92653<br>(949) 699-3308</p>'
      ].join(''),
      zoom: 8
    }
    ,
    {
      lat: 34.4245,
      lon: -118.4998,
      title: 'Santa Clarita',
      html: [
      '<h3>Santa Clarita</h3>',
      '<p>26846 Oak Ave Unit R, Santa Clarita CA 91315<br>(661) 424-9396</p>'
      ].join(''),
      zoom: 8
    }
    ],
    map_div: '#gmap-tabs',
    controls_type: 'list',
    controls_title: 'Choose a location:'
  }).Load();

</script>

</div>

And here's the CSS for the map:

<style>
    .gmap {
	float: right;
        height: 400px;
        width: 60%;
        border: 5px solid #ddd;
        font-size: 100%;
	margin-right:35px;	
	z-index:10;
		
    }
    </style>

As you can tell, I'm a CSS newbie, so bare with me. Any help would be appreciated. Thank you!

[Diptiman]

Hello Melitica ,
1) First add float:left to your css in #content-text2

content-text2 {

color: #000;
font-size: 13px;
padding-left: 35px;
text-align: left;
line-height: normal;
padding-top: 16px;
width: 305px;
float: left;
}

2) You can try with setting margin-bottom of container ID. But I hope that will not work in your case as other css have many unwanted code. Thought I think you can try.

3) Try to find something "gm-style-iw" in you js code and make the height auto and delete the overflow:auto code.

Let me know if these will help you anyway. Cheers.

[PaulOB]

Hi,

1) As mentioned above floating context-text2 with the correct width will allow both elements to sit side by side. If the map was first in source then the text would have wrapped normally anyway.

2) Your footer is position:fixed which means it will always overlap anything on the page that is in the way (just like it does on all your other pages if the window is small enough). It will always sit on the bottom of the viewport and margins on other elements will have no effect on it whatsoever. A bottom margin (in some browsers) may react to the bottom of the viewport but you would be better off using padding-bottom to your #contentarea to clear the footer height more robustly but you must first clear/contain your floats.

#contentarea:after{
content:" ";
clear:both;
display:block;
height:0;
}
#contentarea{padding-bottom:50px}

I'm not keen on the fact that you removed my horizontal scrollbar and fiddled with the viewports vertical scrollbar as your fixed positioned element now sits over the controls for the vertical scrollbar. It's usually best to avoid touching the html and body overflow properties at all.

[melitica]

Hi! Thank you so much for checking out my post. Here are the results:

• My third issue is still not fixed. I tried to look for

Again, thanks for following up with me!

[Diptiman]

Can you highlight more about overflow issue? I am not sure about the issue. Thanks.

[PaulOB]

[*]My third issue is still not fixed. I tried to look for in my js code but I couldn't find anything with that tag. Here's the code. Is there something else I could change to modify the dialog box?

I think you will need to look into the documentation of that Map API as all those styles are added dynamically and will be difficult to over-ride with css and anyway I believe their positioning will be based on their content so changing with css will probably break things.

e.g.
you could do this:

.gm-style-iw{
overflow:visible!important;
height:160px!important;
}
.gm-style-iw > div{
overflow:visible!important;
font-size:14px!important;
}

But then if may make the text bigger than the dialog box. Have a look in your documentation that you downloaded with maplace but I feel this is js question not a css one.

I followed your advice and eliminated the overflow properties, but it caused some issues. I'm not sure if this is the right place to ask but I have a Jquery bit of code that scrolls down to the bottom of the page automatically. When I eliminated those overflow properties, my function stopped working. Do you know any way around this? This is the code for my script:

$("#html, #body").animate({
                    scrollTop: this.height()
                }, "slow");
                return false;

[/LIST]

Which element was being animated?

Removing the overflow settings should not affect the above routine but it does depend on why you changed them in the first place as you may be doing something special that isn't evident at first sight.

Can you highlight more about overflow issue? I am not sure about the issue. Thank

The original issue was that you had no horizontal scrollbar on the viewport so you couldn't reach any content if the browser window was smaller than the content.

[melitica]

The issue with the dialog boxes was fixed by adding the css code you provided. The documentation given with the plugin is not very extensive.

If you go to this page my jQuery method doesn't seem to scroll down to the bottom on page load. Is this something than can be fixed with CSS or should I ask in the Jquery section? My body has a height of 100% and there's another method that determines that height of the content after it renders.

Thank you!

[ronpat]

should I ask in the Jquery section?

I clicked the little orange flag in the bottom left corner of the post and requested that the thread be moved to the JavaScript forum.

Edit:

It has now been moved
Mittineague

[Pullo]

Hi there,

When I open the browser console on the page you link to (here's how), I see:

Failed to load resource: net::ERR_CONNECTION_REFUSED http://calstateautoparts.com/beta/default/default.css
Failed to load resource: net::ERR_CONNECTION_REFUSED http://calstateautoparts.com/beta/maplace.min.js
Uncaught ReferenceError: Maplace is not defined (index):2

You'll need to fix that first.

[melitica]

So sorry about that. Seems like I forgot to upload some files. Take a look at it now.

[Pullo]

Hi,

If you go to this page my jQuery method doesn't seem to scroll down to the bottom on page load.

I'm not 100% sure what you mean here.
What should scroll down to where?

[melitica]

Hi! Go to this page. The page should scroll all the way to the bottom when it loads.

[Pullo]

$.load() only accepts one function to be called after the content has been loaded.

Try this:

$('#contentarea').load(page, function() {
  if (page.match("home.html")) {
    history.pushState('', document.title, window.location.pathname);
  } else {
    location.hash = hash;
  }

  var divHeight = $('#content').height();
  $('#contentarea').outerHeight(divHeight);

  $("#html, #body").animate({
    scrollTop: $(this).height()
  }, "slow");

  return false;
});

[PaulOB]

$.load() only accepts one function to be called after the content has been loaded.

Try this:

`

$("#html, #body").animate({

`

Should that be:

  $("html, body").animate({

As I don't think html and body have ids as such ?

[melitica]

Hmm.. I tried both of your suggestions to no avail.

The code now looks like this:

function () {
                var divHeight = $('#content').height();

                $('#contentarea').outerHeight(divHeight);
				
				//scroll to bottom	
				$("html, body").animate({
                    scrollTop: this.height()
                }, "slow");
                return false;
            });

[PaulOB]

Pullo had :

scrollTop: $(this).height()

not

scrollTop: this.height()

[melitica]

Fixed that. Still not scrolling down :/

[Pullo]

Hi,

You have this:

$('#contentarea').load(page, function () {
  if (page.match("home.html")) {
    history.pushState('', document.title, window.location.pathname);
  } else {
    location.hash = hash;
  }
},

function () {
  var divHeight = $('#content').height();
  $('#contentarea').outerHeight(divHeight);
  $("html, body").animate({
    scrollTop: $(this).height()
  }, "slow");

  return false;
});

You need:

$('#contentarea').load(page, function () {
  if (page.match("home.html")) {
    history.pushState('', document.title, window.location.pathname);
  } else {
    location.hash = hash;
  }
  
  var divHeight = $('#content').height();
  $('#contentarea').outerHeight(divHeight);
  $("html, body").animate({
    scrollTop: $(this).height()
  }, "slow");

  return false;
});

Also, what is that "return false" doing?

[melitica]

I put it all in the same function and now it scrolls down automatically! But for some reason, my div height is not being set correctly anymore.

Thanks again for following up with me.

[PaulOB]

Which div height are we talking about and what is the problem exactly?

Explain should happen and what isn't happening and it should be easier for us to help you if you can be more specific to the problem