Course Description-Fully Expanded

Hi there,

I am facing the same issue. Do we have any solution for this issue?

We are wondering the same.

I’m not a professional web developer, so I’m not entirely sure what’s going on here, but I would love to know why Docebo took the approach of defining max-height inline here:

<div class="ui-paragraph-content dcb-ui-paragraph-content-max-height dcb-ui-paragraph-content-fade" style="max-height: 140px;-webkit-line-clamp: 4;" dcb-ui-keyboard-focusable-visible="false">
  ...
</div>

If I disable that inline style attribute with the browser dev tools, I can provide a more reasonable max height using CSS:

.ui-paragraph-content.dcb-ui-paragraph-content-max-height.dcb-ui-paragraph-content-fade {
    max-height: 400px;
}

But that’s the thing, I can’t disable the inline style attribute for anyone else. And if I try to trump it using e.g. !important, the browser freaks out, it can’t decide whether the max-height should be 140px or 400px, and so it just goes back and forth between them countless times per second...

Hi there,

The following CSS should aid here.

/* Show More in Course Description Course */

lrn-widget-content-description .ui-paragraph-content {
    max-height: unset!important;
}

Outstanding, thank you @DPatel!

Thank you @DPatel!!

Very helpful and will make the courses now far easier at a glance to read about, and will reduce people enrolling and reading later. Thanks.