search

PASTAplus / DataPortal

EDI Data Portal
3 stars 3 forks source link

The more_less.js indiscriminately breaks embedded HTML text in the Data Portal display of creators #54

Closed servilla closed 2 years ago

servilla commented 3 years ago

On Fri, Jun 25, 2021, 11:21 AM An T. Nguyen enthusiast@utexas.edu wrote:

Good morning EDI,

FYI I noticed this very minor oddity on the landing page for one of our datasets https://portal.edirepository.org/nis/mapbrowse?packageid=knb-lter-ble.17.1. The associated EML seems correct imo.

Note the
tag between Richmond and Ilgen.

image>

-- An T. Nguyen Beaufort Lagoon Ecosystems, Long Term Ecological Research Network The University of Texas at Austin

The DataPortal\WebRoot/js/more_less.js indiscriminately breaks embedded HTML text in the Data Portal display. This is especially problematic in the list of creators when the HTML content includes line break elements (i.e., <br/>). The following example shows where the <br/> element is broken as < and the resulting output is misaligned: https://portal.edirepository.org/nis/mapbrowse?packageid=knb-lter-ble.17.1 (you must use the Chrome of Firefox developer's tools to see this affect).

Simply changing the amount of content before the break does not fix this issue in general, as it will only result in another list being affected.

Options include:

  1. Use a different more/less script or
  2. Break more judiciously in the Servlet code or
  3. Find an alternative to using <br/> elements or
  4. Something else?
servilla commented 2 years ago

This w3schools solution appears to be a bit more approachable than dealing only in the javascript. In this solution, the <span> elements can be built into the HTML fragment that the servlet generates prior to building the landing page.

servilla commented 2 years ago

The w3schools solution (above) works well.

servilla commented 2 years ago

This fix should be applied to all other sections that use the more_less javascript.

servilla commented 2 years ago

The current implementation is constrained to a single instance due to reliance on "id" selectors. I believe a solution can be generalized but it is not worth the effort at this point since the alternate (earlier) javascript solution does work well enough.