Popup title formatting question

[DanRicketts]

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? 

[HeikoHeijenga]

Add a CSS rule like this:

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

[DanRicketts]

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?

[HeikoHeijenga]

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.

[HeikoHeijenga · Accepted solution]

Try this:

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

[DanRicketts]

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. 

[HeikoHeijenga]

I just use Chrome dev tools...

[MirceaMaierean]

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.

[DanRicketts]

Thanks for the tip.