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.

  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;
    }

    #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;
    }
    SEMrush
    .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 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,622
    Likes Received:
    717
    Best Answers:
    151
    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 IP
  3. Blank ™

    Blank ™ Well-Known Member

    Messages:
    224
    Likes Received:
    18
    Best Answers:
    6
    Trophy Points:
    110
    #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 IP
  4. alfieindesigns

    alfieindesigns Active Member

    Messages:
    110
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    80
    #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 IP