Topic: Class view does not increase in visible height when adding container content
Expected behavior Hi, I use the class view in order to see the complete background repeated with a small image. I add a container class and inside I add several div rows (with d-none classes) and inside these div-rows I use several col-* as normal for all the content. The issue is that the view class does not increase in height when adding more content (no scroll bar appears on the right if I add more content to the container). So my content is outside the visible view area and I have no access to it. Do you have any suggestions?
Actual behavior
**Resources (screenshots, code snippets etc.)
<body>
<div class="view" style="background-image: url('img/Wallpaper.png'); background-repeat: repeat; background-size: 58px 100px; background-position: center center;">
<div class="mask rgba-gradient">
<div class="container mt-5">
<div class="row pt-5 justify-content-center align-items-center d-none" id="test1">
</div>
</div>
</div>
</div>
</body>
**
Hmm, try to add style="overflow: auto;" to div with .mask class and tell if it resolved your problem :)
Best regards
Seydler commented 5 years ago
:-) YESS !!! This resolves my problem that I am facing since 4 weeks and I tried a lot of stuff and re-searched a lot, but I never applied "overflow:auto" to the div with mask class, but to everything else... Thanks a lot buddy! I was almost giving up.
Krzysztof Wilk staff commented 5 years ago
I'm glad I could help :)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: Browser
- Browser: Chrome
- OS: Ubuntu
- Provided sample code: No
- Provided link: No
Krzysztof Wilk staff commented 5 years ago
Hi!
I can't recognize the problem, because you used relative path to your image, which is only on your computer. Could you paste it, for example, here https://imgbb.com/upload then swap "img/Wallpaper.png" url with link you'll get and make a snippet with your problem here https://mdbootstrap.com/snippets/ ? It'll be very helpful for debugging :)
Seydler commented 5 years ago
Hi Krzysztof, thanks for getting back on this issue. You can actually use any kind of background image.. The issue is that the content in the class container (rows and cols) is somehow not recognized in its size. I mean adding classes "rows" and "cols" does not create a scrollbar on the right for scrolling down the content (so I do not see the content outside of the visible area). I think this has something to do with the class"view" around it?
Krzysztof Wilk staff commented 5 years ago
I really can't properly understand your issue without valid code, because this one you send doesn't work for me and I think it is just a part. Do you mean something like I did here: https://mdbootstrap.com/snippets/jquery/krzysztof-wilk/2271265 ? Or maybe you meant one background image for many columns like here? https://mdbootstrap.com/snippets/jquery/krzysztof-wilk/1666086
Seydler commented 5 years ago
Hi Krzystof, In the following case: https://mdbootstrap.com/snippets/jquery/mdbootstrap/102382 If you resize the window small enough you will see that the content of the Register Form can not be accessed or seen completely, because the scrollbar on the right does not scroll the content inside of the area with the picture.. You can also resize accordingly the left half of the screen (with the HTML info) to see the effect better. At some point the "SIGN UP" of the Register Form is outside the visible are and is NOT accessible anymore and no scrollbar appears to scroll down to reach the the SignUp Button. If you add content to this page (e.g. a large table in y-direction), it will be outside of the visible area... Do you know how to make a scrollbar appear to get rid of this issue?