Fixed Size for Maptip

Permanently deleted user

May 29, 2014 01:47

Is there a way to set the size of the map tip?

 

I have some long descriptions that cause the tips to look weird.. I would like to be able to set the size of the maptip so it's uniform throughout the map..or alternatively have the text wrap. All the descriptions are derived from a field (obviously).

 

I'm using the HTML5 viewer.

 

/customer/servlet/servlet.FileDownload?file=00P6000000em1aiEAA

0

• 

  Cattyann Campbell

  June 05, 2014 20:30

  +1 I'm looking to do the same any thoughts?

  0
• 

  Permanently deleted user

  June 12, 2014 19:48

  I started fooling around with DIV and setting the width and height but there's still difficulties. I'm going to try altering the CSS to enable text wrapping for now and see if that works out better!

  0
• 

  Permanently deleted user

  July 11, 2014 20:59

  + 1 for me also

  0
• 

  Permanently deleted user

  July 18, 2014 21:43

  Maybe format all of the content of the popup into a table with a fixed width?

  0
• 

  Cattyann Campbell

  July 27, 2014 03:35

  The ArcGIS Online maptips (pop-ups)  work pretty well < http://doc.arcgis.com/en/arcgis-online/use-maps/view-pop-ups.htm#ESRI_SECTION1_DAA22E89DF67448E8F3682309F39BE5D >

  would be nice to see something similar next round esp on HTML viewer.

   

  0
• 

  Permanently deleted user

  July 28, 2014 12:24

  Hi, Lauren,

  Do you manage to update the CSS file to control the size of the maptip?

  I am facing the same problem now. Please shed some light for me on which css file and which class I should update?

  Thanks

   

  0
• 

  Permanently deleted user

  July 29, 2014 06:41

  Thanks Lauren, I managed to fing a session in the common.css for map tip. I wrote my own CSS to overwrite that.

  0
• 

  Permanently deleted user

  July 29, 2014 19:32

  @Helen mind sharing your css or website? I'd be curious to see how it looks! :)

  0
• 

  Permanently deleted user

  July 30, 2014 08:12

  The following is the example I changed. Didn't change much. The main purpose is to control the max-width and max-height so they are not overflow outside of frame which is only 650px * 350px. the overflow control is added in case the content is too much for the max-size.

   

  .map-callout-header {

   

      position: relative;

   

      padding: 0.75em;

   

      padding-right: 40px;

   

      font-size: 1em;

   

   font-weight: bold;

   

   text-overflow: ellipsis;

   

   overflow: hidden;

   

      color: #000000;

   

  }

  .map-callout-header h2 {

   

      font-size: 1.1em;

   

  }

  .map-callout-header span {

   

      font-weight: 700;

   

      text-overflow: ellipsis;

   

  }

   

  .map-callout-contents {

   

      padding: 0 .75em .75em .75em;

   

   max-height:300px;

   

      overflow: auto;

   

      color: #666666;

   

  }

  .map-callout-wrapper {

   

      margin-top: -26px;

   

   max-width: 400px;

   

  }

  0

Please sign in to leave a comment.