Skip to main content
Answer

Duplicate html widgets appearing to overlap

  • May 2, 2024
  • 14 replies
  • 72 views
EmilyG
Novice III

Hi, all. I’m currently working on an unpublished duplicate page of our homepage. I have added a html/WYSIWYG widget to the page that has simple text and some custom CSS that I’ve added to the appropriate custom style area in our Docebo instance. I searched the page’s code via inspect elements and found the proper id to use as a selector in the CSS, and the new widget appears correctly on the page.

However….

The widget seems to be appearing twice -- almost like it’s stacked on top of one another.

This is what’s rendered on the page
This is the custom CSS code
html selectors for one of the widget occurrences (I used “#doc-widget-57” as the selector for CSS purposes
html selectors for the second widget occurrence

 

If anyone has any ideas as to what’s going on here and how I can eliminate the second widget, I’d be grateful.

 

Emily

Best answer by gstager

Try removing your div.

The auto created one should still be colored.

 

14 replies

gstager
Hero III
Forum|alt.badge.img+8
  • gstager
  • Hero III
  • May 2, 2024

Can you share that portion of the HTML as well?

Greg
EmilyG
Novice III
  • EmilyG
  • Author
  • Novice III
  • May 2, 2024

 

gstager
Hero III
Forum|alt.badge.img+8
  • gstager
  • Hero III
  • May 2, 2024

This looks like the console view.

Do you have the view from the widget itself?

Greg
EmilyG
Novice III
  • EmilyG
  • Author
  • Novice III
  • May 2, 2024

This screenshot is better…..the gray line is where the widget code begins. The purple is the widget that I added.

 

EmilyG
Novice III
  • EmilyG
  • Author
  • Novice III
  • May 2, 2024

Oh, sorry….of course. Here it is:

 

 

gstager
Hero III
Forum|alt.badge.img+8
  • gstager
  • Hero III
  • May 2, 2024

The overlap is due to the fact that you have two divs with an ID of doc-widget-57

 

Greg
EmilyG
Novice III
  • EmilyG
  • Author
  • Novice III
  • May 2, 2024

Even though I only added one in the html WYSIWYG widget?

gstager
Hero III
Forum|alt.badge.img+8
  • gstager
  • Hero III
  • May 2, 2024

Correct -

Simply creating the blank widget - Docebo auto named that one.

You basically added the second one in the HTML itself.

Your CSS styles the div yellow so the auto-named div is colored as is the one you added.

Greg
gstager
Hero III
Forum|alt.badge.img+8
  • gstager
  • Hero III
  • Answer
  • May 2, 2024

Try removing your div.

The auto created one should still be colored.

 

Greg
EmilyG
Novice III
  • EmilyG
  • Author
  • Novice III
  • May 2, 2024

Thanks, Greg! That certainly got rid of the second widget. Now I’m trying to figure out how to identify the white portion so I can have it be yellow also.

 

gstager
Hero III
Forum|alt.badge.img+8
  • gstager
  • Hero III
  • May 2, 2024

If you need the div - in order to achieve your desired styling - try just removing the ID.

 

Greg
EmilyG
Novice III
  • EmilyG
  • Author
  • Novice III
  • May 2, 2024


This is the html and the css that’s still producing the widget with the white text portion. I wouldn’t think I’d have to specify the background-color within the h1 and p portions….

gstager
Hero III
Forum|alt.badge.img+8
  • gstager
  • Hero III
  • May 2, 2024

Now I’m trying to figure out how to identify the white portion so I can have it be yellow also.

 

I added the last bit before I saw your result pop up.

Yeah - I would style it to add background.

Either in your custom area with the rest or as an inline style

<p style="background: #f7d636"> Short on time?…

Greg
EmilyG
Novice III
  • EmilyG
  • Author
  • Novice III
  • May 2, 2024

Many, many thanks, Greg!

gstager
Terms & ConditionsCookie settingsAccessibility statement