Skip to main content
Question

Increase asset/view height to fit portrait files in C&S channel


susan2000
Contributor III

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?

 

12 replies

Neil Patterson
Guide I
Forum|alt.badge.img+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 @gstager! 😚


gstager
Hero III
Forum|alt.badge.img+7
  • Hero III
  • 891 replies
  • July 25, 2022

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?


lrodman
Guide II
Forum|alt.badge.img+6
  • Guide II
  • 908 replies
  • August 2, 2022

Looks like a PDF uploaded into a course (maybe a PPT) to me, non DCS.


lrodman
Guide II
Forum|alt.badge.img+6
  • Guide II
  • 908 replies
  • August 3, 2022

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;}

 


gstager
Hero III
Forum|alt.badge.img+7
  • Hero III
  • 891 replies
  • August 3, 2022

@lrodman - I will wait to hear back from @susan2000 

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.


susan2000
Contributor III
  • Author
  • Contributor III
  • 48 replies
  • August 4, 2022

Yes @gstager and @lrodman   it is a C&S asset.


Bfarkas
Hero III
Forum|alt.badge.img+5
  • Hero III
  • 3582 replies
  • August 4, 2022
lrodman wrote:

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.


lrodman
Guide II
Forum|alt.badge.img+6
  • Guide II
  • 908 replies
  • August 4, 2022

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!


Bfarkas
Hero III
Forum|alt.badge.img+5
  • Hero III
  • 3582 replies
  • August 4, 2022
lrodman wrote:

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.


gstager
Hero III
Forum|alt.badge.img+7
  • Hero III
  • 891 replies
  • August 4, 2022

@susan2000 - bummer in the sense that I cannot generate the same general view to access appropriate selectors to help provide a solution.

Perhaps there is a CSS expert out there that uses Discover, Coach, and Share who can assist.


susan2000
Contributor III
  • Author
  • Contributor III
  • 48 replies
  • August 4, 2022

Thanks for being curious @gstager!

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?


Bfarkas
Hero III
Forum|alt.badge.img+5
  • Hero III
  • 3582 replies
  • August 11, 2022

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 :)


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings