Delete empty white space from popup window in Web AppBuilder app

[SushilPradhan]

Hi,

I am having an issue with number of empty white spaces (Image 1 below) between a field and the attribute (related table) in a popup window in Web AppBuilder app. From Developer Tool, I can see number of <span class = 'charNewLine"> which is coming from esri.css:1 (Image 2) but I am not sure how to edit or delete them. If anyone can advise me on this would be a great help.

Thanks for your help in advance.

-Sushil

Image 1:

Image: 2

[jcarlson]

Can you view the HTML source of your popup and see if there's anything there?

[SushilPradhan]

Thanks for your response but there is nothing i can do here. This has to be fixed within Web AppBuilder and not sure where can i find esri.css file to edit.

I just wondered if the ESRI guys have seen this post or it's just not in their priority? I never get any response from them??   

[jcarlson]

Are you saying you only see this behavior in WAB, but not in the associated map? Or is there some reason you're limiting solutions to WAB only?

Popups are configured in the web map; there really isn't a WAB setting you can adjust to change the map's settings like that.

[SushilPradhan]

Sorry that’s not what I am looking for. I am trying to customise an app built using WAB. This is about customisation within WAB.

[jcarlson]

Popup settings are saved in the map. Not the app.

[PaulBarr]

Hi,

I had exactly the same issue. Turns out it was getting upset by my use of double br tags: <br><br>

(this was within a table data element, I'm not sure if that is relevant to the cause of the issue).

I was doing this to get a blank line between my sentences. I guess the <p> tag is for this purpose, but regardless, I had done this and it cause this issue to surface.

The ESRI map popup was interpreting the double <br><br> correctly in the lower section of the popup text but also pre-pending:  <br class="esri-text-new-line"> before the entire table structure, causing the large panel of white space above my table. It prepended this element once for every instance of <br><br> within the html.

Changing from <br><br> to a single <br> tag stopped the pre-pending of <br class="esri-text-new-line"> but now had no extra line between the sentences.

Changing from <br><br> to sentences wrapped in <p></p> also prevented the issue, while also maintaining the extra line gap between the sentences.

Hope that helps the next person reading this.

[DevinBartley2]

I had this problem and found a fix to it. My HTML table doesnt have spaces before the table, but does have many spaces between elements. In Pro the popup renders correctly, however in ArcGIS Enterprise Portal the popup would insert many spaces before the table, requiring you to scroll down. 

I fixed it by running the Compress (not just clean) button using this free editor. Basically that just strips out all the unecessary spaces in the HTML. HTML Code Editor - Instant Preview

Here is the starting code that had proceeding blank lines when you click the popup in ArcGIS Portal. 
<table border="1">
<tr>
<th>Report Type</th>
<th>Report Title</th>
</tr>
<tr>
<td>Report Name
</td>
<td><a href="https://reportURL.net/reportname.pdf
">ReportTitle</a></td>
</tr>
</table>

Here is what the compressed version looks like that removed the proceeding spaces: 
<table border="1"><tr><th>Report Type</th><th>Report Title</th></tr><tr><td>Report Name</td><td><a href="https://reportURL.net/reportname.pdf">ReportTitle</a></td></tr></table>


Attached is the image of what the popup window looks like before and after the above actions.