topic Popup title formatting question in ArcGIS JavaScript Maps SDK Questions

Popup title formatting question

DanRicketts — Wed, 10 Dec 2014 22:51:20 GMT

I have a popup with a field displayed in the tittle element as below:

The text is flowing over the nav buttons. How can I set this so the text will wrap and not flow over the nav buttons? Are there preset divs that I can change the css to make sure this doesn't happen?

Re: Popup title formatting question

HeikoHeijenga — Sat, 11 Dec 2021 20:10:44 GMT

Add a CSS rule like this:

.esriPopup .title {
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Re: Popup title formatting question

DanRicketts — Wed, 10 Dec 2014 23:21:07 GMT

Thanks for the quick reply. I can now prevent the overlapping but I need all the text to be visible. Do you know if you can wrap in this element? I can't find documentation how the popup is constructed. I would like to find a way to wrap the text. Is there a .nav class as well so I could try to make the nav area and .title side by side?

Re: Popup title formatting question

HeikoHeijenga — Wed, 10 Dec 2014 23:24:45 GMT

Remove every CSS rule except the width: 150px. This will wrap the title but it won't be very readable as the title bar is of fixed height.

Re: Popup title formatting question

HeikoHeijenga — Sat, 11 Dec 2021 20:10:47 GMT

Try this:

.esriPopup .title {
    width: 150px;
}
.esriPopup .titlePane {
  height: auto !important;
}

Re: Popup title formatting question

DanRicketts — Wed, 10 Dec 2014 23:35:29 GMT

Worked Perfectly. Saved a ton of time. If you do come across the different classes of the popup and how it is laid out please update this. I can't see popups in my development tools. If you know a way to do this that would be just as good since I could inspect it.

Re: Popup title formatting question

HeikoHeijenga — Wed, 10 Dec 2014 23:37:12 GMT

I just use Chrome dev tools...

Re: Popup title formatting question

MirceaMaierean — Thu, 11 Dec 2014 00:57:58 GMT

Right click your element (title pane, geocoder, zoom buttons) and select Inspect Element in Chrome. And use that window to see what CSS code that element has and you can even change it on the spot to see temporary changes.

Re: Popup title formatting question

DanRicketts — Fri, 12 Dec 2014 16:59:56 GMT

Thanks for the tip.