Best Answer

HTML Widget Padding

  • 3 May 2023
  • 5 replies
  • 273 views
kferguson
Rank
Userlevel 3
Badge

Hello, 

I am trying to add padding within the HTML/WYSIWYG widget and for some reason no matter what I do it will not work.  Anyone run into a similar issue?  Anyone have some code that I can drop in to reflect some space between the words and border? 

 

icon

Best answer by Allan 16 May 2023, 19:02

View original

5 replies

lrodman
Rank
Userlevel 7
Badge +5

The widgets don’t respect padding in the html. You have to do this in CSS which is kind of crazy but works. 

Allan
Rank
Userlevel 4
Badge

@lrodman is correct. You will need to adjust the padding in CSS.  I would recommend doing so by widget ID to ensure the CSS you apply is strictly for the unique object you want. 

For example, to pad all sides of your HTML widget by 30px

#doc-widget-#### div.content.clearfix {
  padding: 30px;
}

 (replace #### with the specific HTML widget ID).
You can customize the top, bottom, left and right padding individually if preferred; check out the options available for the CSS padding property.

A
Rank

I have a text box at the top of every page for which I want to apply padding. I know nothing about CSS so used a table as a quick solution. I know that doesn’t work for accessibility so was planning on revisiting at a later date. Well that time has arrived.

Thank you @Allan for that solution. I have some questions and I would really appreciate your help on this.

Is there a way for me to add CSS so that it applies to all HTML widgets? Or is that not a good idea?

If I was to apply the CSS for each individual widget that I use the CSS will become very long. Would this cause a problem on Docebo?

What is the easiest way for me to locate the HTML widget ID?

Thanks

Bfarkas
Rank
Userlevel 7
Badge +3

Hey @Alal , saw this was still outstanding, couple of thoughts:

  1. You can add some padding directly inline in the widget if you would prefer (and then it will work everywhere, whereas adjusting CSS does not work on mobile for instance). What you need to do is basically add an extra container wrapping everything else in your widget. so for example: 
    <div style="padding: 5px;">
    enter your content here....
    </div>

    You can insert this by selecting the ‘HTML’ view in the editor. 

  2. You can apply this instead globally to all HTML widgets if you would like, instead of the class suggested above which is used in many places, would use the following instead:

    .htmlwidget {
    padding: 5px;
    }

     

  3. Normally, I am a big fan of isolating to just pages or widgets for these kinds of changed, but in this particular case, I would view it more as it should be consistent around the platform, so don’t see a reason not to just apply it globally here. You can then use selection of pages or widgets by IDs to only apply to exceptions.

  4. If you needed to do it by selecting, yes Docebo can handle many widgets and pages for selecting.

A
Rank

Hi @Bfarkas 

I had previously added CSS for each individual html widget which worked. I have now applied the global CSS for html widgets as per your suggestion.

Many thanks for your response. Much appreciated.

Reply


Terms & ConditionsCookie settings