1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS newbie issues

Discussion in 'CSS' started by egold2005, Jul 16, 2017 at 11:54 PM.

  1. #1
    Hello,
    I am trying to use some freely available CSS code to customize my google maps InfoWindows.
    How do i get rid of this scrollbar?
    The code is like this

    .gm-style-iw {
    width: 300px !important;
    top: 15px !important;
    left: 0px !important;
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
    border: 1px solid rgba(72, 181, 233, 0.6);
    border-radius: 2px 2px 10px 10px;
    }

    #iw-container {
    width: auto;
    height: auto;
    margin-bottom: 10px;
    }
    SEMrush
    #iw-container .iw-title {
    width: 310px;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 22px;
    font-weight: 400;
    padding: 10px;
    background-color: #48b5e9;
    color: white;
    margin: 0;
    border-radius: 2px 2px 0 0;
    }

    #iw-container .iw-content {
    width: 310px;
    height: auto;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    margin-right: 1px;
    padding: 15px 5px 20px 15px;
    /*
    max-height: 140px;
    overflow-y: scroll;
    */
    overflow-x: hidden;
    }

    .iw-content img {
    float: right;
    margin: 0 5px 5px 10px;
    }

    .iw-subTitle {
    font-size: 16px;
    font-weight: 700;
    padding: 5px 0;
    }

    .iw-bottom-gradient {
    position: absolute;
    width: 310px;
    height: 25px;
    bottom: 10px;
    right: 18px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    }


    #iw-wrap {
    width:250px;
    margin:0 auto;
    }

    #iw-left_col {
    float:left;
    width:125px;
    }

    #iw-right_col {
    float:right;
    width:125px;
    }

    vContent = '<div id="iw-container">';

    if (vOnTimes == "Y") {
    vContent = vContent + '<div class="iw-title">' + vDriverNames + '</div>';
    } else {
    vContent = vContent + '<div class="iw-title">' + vDriverNames + '</div>';
    }

    vContent = vContent +
    '<div class="iw-content">' +
    '<div class="iw-subTitle">' + vHubs + ' Hub' + '<br>Truck ' + vTruckNames + '</div>' +
    'Last Update: ' + vTimestamps +
    '<br><br><a href="' + vIDs +'">View Stops</a></b>' +
    '<div class="iw-bottom-gradient"></div>' +
    '</div> </div>';

    vMarker.info = new google.maps.InfoWindow({
    content: vContent,
    maxWidth: 310
    });

    upload_2017-7-17_2-54-36.png

    Thank you so much!
     
    egold2005, Jul 16, 2017 at 11:54 PM IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,543
    Likes Received:
    705
    Best Answers:
    150
    Trophy Points:
    420
    #2
    That code isn't gonna help us at all, since all it is is the CSS, not linked to the actual HTML it styles. Why not just link to the actual site? Or at least put up an example somewhere? But from the CSS, it seems that the scrollbar is defined here: #iw-container .iw-content - so either change the width, remove the scrollbar-definition or something along those lines.
     
    PoPSiCLe, Jul 17, 2017 at 8:06 AM IP
  3. Blank ™

    Blank ™ Active Member

    Messages:
    142
    Likes Received:
    10
    Best Answers:
    4
    Trophy Points:
    60
    #3
    Close button/icon tells us that the container itself is less wide than it was supposed to be. Making it wider should fix your issue and also put the button back in its place (centered @ top right corner).
     
    Blank ™, Jul 17, 2017 at 8:34 AM IP
  4. alfieindesigns

    alfieindesigns Active Member

    Messages:
    90
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    63
    #4
    Hello,

    I'm trying to visualize your css and I see some points that maybe the issue:

    Observe the following classes and their width.
    .gm-style-iw {
    width: 300px !important;

    #iw-container .iw-title {
    width: 310px;

    #iw-container .iw-content {
    width: 310px;

    .iw-bottom-gradient {
    width: 310px;

    You will notice the .gm-style-iw and I believe this is the main container/box.
    Therefore, those 310px (which I believe are inside .gm-style-iw) is pushing the content.
    So that's why its automatically having vertical scrollbar.

    Solution:
    - Make sure all container inside is not greater than the main container width.
    - Actually, If you don't need the 310px, you may remove them or make them 100% instead.
    - Note: If you make them 100% and they have padding. Make sure to add box-sizing: border-box;

    I hope this help.

    Thanks and God bless always!
    www.alfieindesigns.com
     
    alfieindesigns, Jul 18, 2017 at 8:52 PM IP