NUKnightLab / NUKnightLab/TimelineJS3
Max Width issues with div id="tl-media" i.e. this._el.container
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.2k
- Forks
- 645
- PR merge metrics
- No merged PRs in 30d
Description
I noticed when my images' ratios reach square proportions, not even yet when height is dominant, the credit starts to overflow past the right side of the image. I looked at the source and found it was being caused by incorrect inline max-width of the "tl-media" container element.
I was able to fix this issue by matching the max-width the same as credit & caption receive their width:
In the updateMediaDisplay function:
this._el.container.style.maxWidth = this.options.width + "px"; // OLD
this._el.container.style.maxWidth = this._el.content_item.offsetWidth + "px"; // NEW
All is fixed now. Tested on Chrome, Firefox, and Chrome on Android.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in the updateMediaDisplay function and reproduce the issue with an image whose proportions are square or taller than wide. Verify that the tl-media container’s max width matches the content item width and that the credit and caption remain within the image in Chrome and Firefox, including Chrome on Android.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100