Hello CSS peeps!
I want a letter/portrait orientation channel PDF or Document to display at full height of the image instead of the top portion with a scroll bar while keeping the image at full width of the window. (without clicking full page view)
I tried .slides-player__wrap {height: 100%;} and that sort of does it but overlaps the div/tile below it instead of pushing page content down.
Anyone know CSS for doing this?
+2
I can’t help with the CSS I’m afraid, but would also love to know. It is something we get feedback on a lot. having to scroll down a page and then go to the next page, scroll down etc. This sounds like a challenge for
+5
Is this part of the Discover, Coach, and Share?
If that is the case, - I cannot tinker with it as we have not implemented this in our platform.
If that is not the case, can you provide a few more specifics so I can try to recreate the same concept?
+5
Looks like a PDF uploaded into a course (maybe a PPT) to me, non DCS.
+5
A little different but this may help you:
/*portrait certificates full view*/
#mceu_22-body.mce-container-body.mce-stack-layout { height:800px !important;}
#mceu_33.mce-edit-area.mce-container {height:717px !important;}
#mceu_33.mce-edit-area.mce-container.mce-panel.mce-last.mce-stack-layout-item iframe {height:725px !important;}
+5
I see references to experts and next available content which leads me to my question about Coach and Share.
The certificate CSS mod is not going to help with this.
Yes
+3
A little different but this may help you:
/*portrait certificates full view*/
#mceu_22-body.mce-container-body.mce-stack-layout { height:800px !important;}
#mceu_33.mce-edit-area.mce-container {height:717px !important;}
#mceu_33.mce-edit-area.mce-container.mce-panel.mce-last.mce-stack-layout-item iframe {height:725px !important;}
Just friendly thing to point out I have been noticing in a lot of your posts, heavy use of the !important tag can lead to unintentional results, especially when it comes to keeping customizations responsive as things may not be able to adjust. Put another way, may look good on your device and screen size, but cause issues to many others, just something to keep in mind.
+5
I will readily admit I don’t know what I’m doing and definitely use important a lot.
Always appreciate any tips or feedback as to the proper way to do what I’m doing, or to improve my code!
+3
I will readily admit I don’t know what I’m doing and definitely use important a lot.
Always appreciate any tips or feedback as to the proper way to do what I’m doing, or to improve my code!
Understood, was why I wanted to point it out, generally it is kind of a last resort thing to use, there’s often ways around it in each situation.
+5
Perhaps there is a CSS expert out there that uses Discover, Coach, and Share who can assist.
Thanks for being curious
I submitted a ticket as I know there’s a secret google book of CSS back there! ;) but they said when the platform was designed, the content window was not designed to change in height or width making it “non-editable.”
I’ve inspected it and it’s using that darn horizontal aspect ratio padding-bottom: 56.25%; on the .slides-player__wrap around letter-sized images so I’m stuck in a conundrum of an efficient UX to present single-file assets.
Maybe I could put the 80+ files into a single course in HTML and link directly to the individual training materials as needed. hmmm Thoughts? Ideas?
+3
So I was on Docebo University and was staring at an asset and so took a quick look at the setup, and came up with the below to set the viewport larger:
.slides-player__wrap {
height: 100%;
}
.asset-coaching-layout {
padding-top: 15%;
}Note, I did not test this in an actual environment, just did it via developer console in University, so did not check any other area impacts, make sure to check :)
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.