none
How do I turn off the horizontal scroll bar on the Microsoft.Maps.Infobox RRS feed

  • Question

  • I want to keep my Popups small but in some cases, the word goes beyond the edge which causes a horizontal scroll bar. If there are two words, then it wraps. The problem is with one word like "HELLLLLLLLOOOOOOOOOOOOOOO". I hate that scroll bar on there and would prefer it just to truncate when there is a long word that extends the boundary vs having the scroll bar.

    I would like to see:

    showCloseButton: false,
    showPointer: true,

    showScrollBar: false  <-- something like this

    Thanks

    Darren


    Friday, May 2, 2014 8:24 PM

Answers

  • Try adding the following CSS to your page:

    .infobox-info{
       white-space: pre-wrap;      /* CSS3 */   
       white-space: -moz-pre-wrap; /* Firefox */    
       white-space: -pre-wrap;     /* Opera <7 */   
       white-space: -o-pre-wrap;   /* Opera 7 */    
       word-wrap: break-word;      /* IE */
       overflow-x:hidden;
    }


    http://rbrundritt.wordpress.com

    Saturday, May 3, 2014 8:06 AM

All replies

  • Try adding the following CSS to your page:

    .infobox-info{
       white-space: pre-wrap;      /* CSS3 */   
       white-space: -moz-pre-wrap; /* Firefox */    
       white-space: -pre-wrap;     /* Opera <7 */   
       white-space: -o-pre-wrap;   /* Opera 7 */    
       word-wrap: break-word;      /* IE */
       overflow-x:hidden;
    }


    http://rbrundritt.wordpress.com

    Saturday, May 3, 2014 8:06 AM
  • Yep - that worked.  Thanks
    Monday, May 5, 2014 8:18 PM
  • Hi Ricky,

    I tried adding above CSS in my page .

    it remove horizontal scroll bar for infobox but my close button is also remove .

    Even though i have  given in  js code to display close button  Please help what to do to display close button in infobox. 

    var infoboxTemplate = '<div class="infobox-info">{description}</div>';

    var infobox = new Microsoft.Maps.Infobox(point, {
             htmlContent: infoboxTemplate.replace('{description}', info),visible: false,showCloseButton: true 
         });

    and my CSS is 

    .infobox-info{
       white-space: pre-wrap;      /* CSS3 */   
       white-space: -moz-pre-wrap; /* Firefox */    
       white-space: -pre-wrap;     /* Opera <7 */   
       white-space: -o-pre-wrap;   /* Opera 7 */    
       word-wrap: break-word;      /* IE */
       overflow-x:hidden;
       border: 1px solid #888;
       background-color:White;
    }

    </style>

    Thanks & Regards:

    Neha


    Neha

    Tuesday, July 24, 2018 12:56 PM