Breaking the boundaries of the HTML widget

  • 14 March 2023
  • 9 replies
  • 215 views
N
Rank
Userlevel 2

Hey hey, I couldn’t find this issue anywhere but I know it has been done by some organizations.

So here goes, I want to break out of the boundaries set by the HTML widget. Specifically, I would like to get to 100% width on the page to help create clearer sections of the pages. Hopefully the screenshots below will help illustrate what I’m asking about.

 

Anybody figured this out and I willing to share?

9 replies

N
Rank
Userlevel 2

Ok, I found it, so here comes the explanation.

It turns out the margin and the padding are not set on the widget level but on the page level.

To disable the set padding and margin to stretch the page to 100%, use this code:

#doc-page-YourPageNumber .mdl-wrapper {
max-width: 100%;
margin: 0px;
padding: 0px;
}

Now your page should be able to stretch wall to wall. It's a bit backward because now I have to add this padding and margin back to the widgets I don't want to stretch. You can do so by using the stock parameters of the .mdl-wrapper.

Hopefully, somebody will find this helpful one day :) If you have any questions, please feel free to ask; I’m always happy to tinker with Docebo!

Talitw
Rank
Userlevel 2

@NRett we were recently working on rebuilding our program pages using the HTML widgets as well. I’m curious if there’s any other neat tricks you’ve found when working with that widget? I had to do a lot of trial and error to create a workable page. I’m looking to see if there’s a more efficient way to create a good experience (we aren’t able to work with our global style sheets).

N
Rank
Userlevel 2

Don’t have time to share them yet, but in the future (once I finally get around to cleaning my code) I will organize a thread where I will share lessons learned.

Y

*Responding to follow the updates on tips/tricks!

jcellitti
Rank
Userlevel 1
Badge

following

K
Rank
Userlevel 3

Following!

M
Rank
Userlevel 5
Badge +1

Following - this is very useful.

K
Rank

Following but recently I opened a ticket because our anchor links stopped working and this is what I was told by Docebo help Desk that was escalated to their 3rd level. They aren’t really supporting the HTML widget to do what HTML and CSS do. I had anchor links on my pages for 2 years and they stopped working because of a change on the Docebo side and they say it is outside their scope. They call custom code even though it is standard HTML. I will be very careful going forward how we set up our pages because of the Support this is given. 

Hi Karen,

Thanks for your response! You are correct; currently, the functionality you inquired about is outside the scope of our support. While I haven't identified any additional reported instances, I can confirm that the anchor tags are not functioning as expected in my instance either. Our development team has determined that this feature doesn't qualify for further investigation, as the Widget is primarily designed for display purposes and not intended for interactive elements.

I sincerely apologize for any inconvenience this may cause, recognizing the significance of the anchor tag functionality when working with custom pages. To address this, I encourage you to share your thoughts on potential features or enhancements to existing ones through Docebo's Ideas portal. This will allow you to submit, vote for, and comment on ideas, promoting a collaborative environment where customer and staff input is considered. The ideas with the most support will be prioritized for implementation.

Learn more about Docebo's Ideas Portal


 

C

Following

Reply


Terms & ConditionsCookie settings