nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Trouver plus de publications taguées avec

Accepted answers

HeikoHeijenga

Try this:

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

All comments

HeikoHeijenga

Try this:

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

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.

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

Add a CSS rule like this:

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

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.