New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dataset search results page layout is broken by a long string in description #7703
Comments
Looking at https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ we can find a solution.
You can use the :StyleCustomizationFile setting to specify our custom CSS file with this fix in it. |
Firefox 86.0.1, adding Looks like it should be supported in all relevant browsers: https://caniuse.com/mdn-css_properties_word-break_break-word |
My focus was on the root verse page, which is very prominent, but the dataset landing page (for that specific dataset) is also suffering from this layout problem. |
@PaulBoon @poikilotherm -- I heard someone blow the "UI-team" horn, so here I am! This issue has been know (#1249), but not solved. I've recently done some digging on best practices for truncating checksums #6685 and unfortunately there are no perfect solutions. The word-break solution is a difficult weapon to wield against the description field because there is no controlling the breaks. In the css-tricks example, it is easy to apply the word-break property to a single URL, but in our description fields, where the content is dynamic, it is harder to apply this CSS because it has many unintended consequences. While doing some research on how other sites handle long strings, I did some browser developer tool hacking of the source code on the MDN Web Docs site from Mozilla. When I copy the example string from above into the content of their page, it behaves the same way our pages do, with the long string blowing out the width of the page in order to display the string in full. Having seen that in my development of efforts to truncate checksum strings in our UI (which are far less dynamic and we have far more control of displaying in the UI), I decided that I would not try to solve the description long strings in that effort, and try to address it again in a later effort. I will continue to research this and see what I can come up with. It might not be as easy as applying a single CSS property to the containers that display dynamic description values, but hopefully we can find something that solves this issues without unintentionally breaking other content. |
Would using sth. like https://mnater.github.io/Hyphenopoly (which is the successor of the widely known https://github.com/mnater/Hyphenator) help? Used this before for justified layouts, but maybe this is helpful here, too? |
A long text (without whitespace) in the dataset description overflows dataset search results and makes the page layout broken. See screenshot below.
This is also visible in version 5.3 as well as on our 4.20 fork using
It is this dataset that is causing it: https://dataverse.nl/dataset.xhtml?persistentId=doi:10.34894/EPQT6D
The description contains:
,"timestamp","tag.ID","longitude..decimal.degree.","latitude..decimal.degree.","height.above.mean.sea.level","ground.speed","heading","location.error.numerical","GNSS.satellite.count","GNSS.satellite.visible","GNSS.maximum.signal.strength","GNSS.fix.type","GNSS.time.to.fix","year","month","rowID","watersensor","watersensorfreq"
It is along string without whitespace, somehow the browser won’t break at the ',' it seems to need whitespace.
We could ask the depositor change the metadata, add whitespace after the ',', but this should be solved by CSS.
The text was updated successfully, but these errors were encountered: