Popup title formatting question

2374
8
Jump to solution
12-10-2014 02:51 PM
DanRicketts
New Contributor

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

TitleOverLap.PNG

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? 

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
HeikoHeijenga
Esri Contributor

Try this:

.esriPopup .title {

    width: 150px;

}

.esriPopup .titlePane {

  height: auto !important;

}

View solution in original post

8 Replies
HeikoHeijenga
Esri Contributor

Add a CSS rule like this:

.esriPopup .title {

    width: 150px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

DanRicketts
New Contributor

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?

0 Kudos
HeikoHeijenga
Esri Contributor

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.

0 Kudos
HeikoHeijenga
Esri Contributor

Try this:

.esriPopup .title {

    width: 150px;

}

.esriPopup .titlePane {

  height: auto !important;

}

View solution in original post

DanRicketts
New Contributor

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. 

0 Kudos
HeikoHeijenga
Esri Contributor

I just use Chrome dev tools...

0 Kudos
MirceaMaierean
New Contributor III

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
New Contributor

Thanks for the tip.

0 Kudos