HTML Widget and Code Issue

  • 10 February 2023
  • 7 replies
  • 239 views
C
Rank
Userlevel 4
Badge +2

I'm trying to add a clickable card with an image and text below in a Docebo page. Tried it in editor and browser it worked fine. Here is the code:
/////////
<style>
.tcolumn {
  float: left;
  width: 18.68%;
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .tcolumn {
    width: 100%;
    display: block;
  }
}

.tcard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      border: 2px solid #1e5b67;
}

.tcontainer {
  padding: 0 16px;
  text-align: center;
    background: #ffffff;
    margin-top: -25px;
}

.tcontainer::after, .row::after {
  content: "";
  clear: both;
  display: table;
}
</style>
<div class="row">
<a style="display: inline-block;" href="https://picsum.photos/images">
<div class="tcolumn">
<div class="tcard">
<img src="https://picsum.photos/id/1/222/148"/>
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 1</p>
</div>
</div>
</div>
</div>
</a>
<a style="display: inline-block;" href="https://picsum.photos/images">
<div class="tcolumn">
<div class="tcard">
<img src="https://picsum.photos/id/1/222/148"/>
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 2</p>
</div>
</div>
</div>
</div>
</a>
</div>
///////////

But when I added this code to the HTML widget on the Docebo page, it didn't work. When I save this code in a Docebo HTML widget, I see that the <a> tag is automatically applied to each div element instead of just the parent div element, resulting in the entire card not working as clickable. 

After saving the above code in the HTML widget, it became like this:

<div class="row">
<a style="display:inline-block;" href="https://picsum.photos/images"></a><div class="tcolumn"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><div class="tcard"><a style="display:inline-block;" href="https://picsum.photos/images"><img src="https://picsum.photos/id/1/222/148" alt="148" /></a><div class="tcontainer"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><div style="padding-top:30px;height:175px;font-family:Arial;"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;"><a style="display:inline-block;" href="https://picsum.photos/images">Content 1</a></p><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images"></a>
<a style="display:inline-block;" href="https://picsum.photos/images">
</a><div class="tcolumn"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><div class="tcard"><a style="display:inline-block;" href="https://picsum.photos/images"><img src="https://picsum.photos/id/1/222/148" alt="148" /></a><div class="tcontainer"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><div style="padding-top:30px;height:175px;font-family:Arial;"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;"><a style="display:inline-block;" href="https://picsum.photos/images">Content 2</a></p><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images"></a>
</div>

Has anyone encountered this issue/does anyone know how to fix it?

Thanks for your help in advance.

7 replies

Alan
Rank
Userlevel 6
Badge +2

Hi @Chelsy Koshy 

The CSS styles for HTML learning objects need to be placed in the separate CSS styles field in the Branding Look & Feel section of the settings. See the route to finding it in the screenshots below. 

 

 

Hope this helps!

Alan

Alan Clifford
C
Rank
Userlevel 4
Badge +2

@Alan - Thanks for your reply. Yes, that's where I added styles too. But the problem is not with the style. The hyperlink I added to the parent div to make the card clickable is applied to each div in the parent div automatically in the HTM widget.

lrnlab
Rank
Userlevel 7
Badge +7

unfortunately the way Docebo works with HTML code is limited and it does not accept all HTML code (as you probably guessed). If you go basic and sometimes use older versions HTML code, you can get it working...a lot of trial and error.

Bfarkas
Rank
Userlevel 7
Badge +3

This should work, but you need to split the style part, from the structure part and put the style in the central spot as mentioned above. so this part:

.tcolumn {
  float: left;
  width: 18.68%;
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .tcolumn {
    width: 100%;
    display: block;
  }
}

.tcard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      border: 2px solid #1e5b67;
}

.tcontainer {
  padding: 0 16px;
  text-align: center;
    background: #ffffff;
    margin-top: -25px;
}

.tcontainer::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

goes in the central area (admin settings > configure look and branding > custom styles). This part:
 

<div class="row">
<a style="display: inline-block;" href="https://picsum.photos/images">
<div class="tcolumn">
<div class="tcard">
<img src="https://picsum.photos/id/1/222/148"/>
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 1</p>
</div>
</div>
</div>
</div>
</a>
<a style="display: inline-block;" href="https://picsum.photos/images">
<div class="tcolumn">
<div class="tcard">
<img src="https://picsum.photos/id/1/222/148"/>
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 2</p>
</div>
</div>
</div>
</div>
</a>
</div>

goes into the wdiget/page. One thing to be careful of is your class names (especially row) are very generic. You might want to specialize them so that they don’t interfere now or in the future with other platform areas.

C
Rank
Userlevel 4
Badge +2

@Bfarkas  Thanks for your reply. As I said above, that's exactly what I did. Styles in the custom styles section of the Configure and Branding settings and code in the Widgets area. In my code, I only put the hyperlink to the parent div element. But the problem is that after this code is saved in the HTML widget, it itself changes the code as below. As you can see in the code below, hyperlinks are duplicated and applied to each HTML element. Because of that, I can't make the card clickable.

<div class="row">
<a style="display:inline-block;" href="https://picsum.photos/images">
</a><div class="tcolumn"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><div class="tcard"><a style="display:inline-block;" href="https://picsum.photos/images">
<img src="https://picsum.photos/id/1/222/148" alt="148" /></a><div class="tcontainer"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><div style="padding-top:30px;height:175px;font-family:Arial;"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;"><a style="display:inline-block;" href="https://picsum.photos/images">Content 1</a></p><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a>
<a style="display:inline-block;" href="https://picsum.photos/images">
</a><div class="tcolumn"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><div class="tcard"><a style="display:inline-block;" href="https://picsum.photos/images">
<img src="https://picsum.photos/id/1/222/148" alt="148" /></a><div class="tcontainer"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><div style="padding-top:30px;height:175px;font-family:Arial;"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;"><a style="display:inline-block;" href="https://picsum.photos/images">Content 2</a></p><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a>
</div>

 

Bfarkas
Rank
Userlevel 7
Badge +3

So, you might want to clean up you code a bit to avoid some potential issues, there are a few extra elements adding style that can just be collapsed (fewer elements the better). Also, divs contained in themselves tends to go bad in Docebo, but you can often get away with things like 1 top level div and then use spans instead elsewhere. 

You also still might just need to basically wrap parts of the individual on purpose with the same link, pretty common in wysiwyg editors unfortunately. Often will build a excel sheet to build these kinds of things to keep it simple as a result.

C
Rank
Userlevel 4
Badge +2

@Bfarkas Thank you! I cleaned up the code and it worked.

Reply


Terms & ConditionsCookie settings