fix(demo): direct link to specific carousel sample not working #3272
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Codecov Report
@@ Coverage Diff @@
## master #3272 +/- ##
=======================================
Coverage 90.77% 90.77%
=======================================
Files 95 95
Lines 2711 2711
Branches 507 507
=======================================
Hits 2461 2461
Misses 190 190
Partials 60 60
Continue to review full report at Codecov.
|
fbasso
approved these changes
Jul 3, 2019
|
@fbasso Thank you for your review! |
benouat
approved these changes
Jul 4, 2019
demo/src/style/demos.css
Outdated
| @@ -41,3 +41,17 @@ ngbd-table-filtering span.ngb-highlight { | |||
| ngbd-table-complete span.ngb-highlight { | |||
| background-color: yellow; | |||
| } | |||
|
|
|||
| .picsum-img-wrapper { | |||
There was a problem hiding this comment.
Some nitpicking here, but I would actually have prefixed that selector with ngb-caroussel so that we know it's used inside caroussel demos just by reading here.
ngb-caroussel .picsum-img-wrapper {
}
demo/src/style/demos.css
Outdated
| padding-top: 55%; /* Keep ratio for 900x500 images */ | ||
| } | ||
|
|
||
| .picsum-img-wrapper>img { |
The carousel samples in the demo site contain images that are loaded asynchronously. But as their size is not reserved beforehand, they shift the remaining content when loaded. As a consequence, the scrolling position that was set correctly to target a specific sample before the images are loaded is no longer correct after the images are loaded. This commit reserves the space for the images by using the trick documented in the following link to also keep the responsive behavior: https://itnext.io/how-to-stop-content-jumping-when-images-load-7c915e47f576
divdavem
force-pushed
the
carouselDemoReserveImageSize
branch
from
74c9c69
to
0b69f1c
Compare
|
@benouat Thank you for your review! I have prefixed the two css rules with |
|
@benouat Thank you for merging my PR! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The carousel samples in the demo site contain images that are loaded asynchronously. But as their size is not reserved beforehand, they shift the remaining content when loaded. As a consequence, the scrolling position that was set correctly to target a specific sample before the images are loaded is no longer correct after the images are loaded.
This PR reserves the space for the images by using the trick documented in the following link to also keep the responsive behavior:
https://itnext.io/how-to-stop-content-jumping-when-images-load-7c915e47f576
Before submitting a pull request, please make sure you have at least performed the following: