Announcement

genielog

Member

From: France

Registered: 2015-02-01

Posts: 6

Website

Change zIndex of embedded widget

Hi all,

I'm installing LiveHelperChat on my site and I have a problem I already faced with other chat apps. The issue is that my site is GWT application creating multiple layers with different zIndex one on the others - after the LHC widget is created. Therefor, after my application is fully loaded with all of its widgets, the one of LHC lay behind and remains unvisible.

With other chat apps I installed I had the possibility to change the zIndex attribute to something very high (such as 999999) and this resolve the problem.

But (and please excuse me - I dont know much in JavaScript / DOM ) how can I do the same with LiveHelperChat ? 

Thanks for your advises.
Regards
Jean-Lin

remdex

Administrator

From: Lithuania

Registered: 2012-09-23

Posts: 3,661

Website

Re: Change zIndex of embedded widget

Well, basically you can override livehelperhchat widget embed style directly in your site CSS with important flag and that will solve a problem.

genielog

Member

From: France

Registered: 2015-02-01

Posts: 6

Website

Re: Change zIndex of embedded widget

Hi,

I'm back on this topic, but still stucked.

I analyzed the page with the code for including the widget and found the div section with the LHC widget defined :

<div id="lhc_status_container">...

I found using the browser debugger that the zIndex is actually 9989 while the other components of my GWT page have higher zIndex. That's the reason why my LHC widget is hiden.

Using the browser debugger I forced the zIndex of the widget to 99999 and the widget shows up. good.

Now I added in the hmtl page the following code:

<style type="text/css">
#lhc_status_container {
  z-index:999999;
}
</style>

Back to the browser, I see that change in the CSS inheritance stack but the actual style used is the previous one z-index:9989.

Since overwriting CSS from the loading page doesn't work I would like to change style directly from the definition in my LHC installation but I didn't found where it is.

genielog

Member

From: France

Registered: 2015-02-01

Posts: 6

Website

Re: Change zIndex of embedded widget

Ok, I found a solution myself.

I added one of the widget theme available and make it the default one.

From there I went to the configuration of that theme and then to the CSS tab. I added the z-index attribute there.

I think it is an elegant change since I expect it to be preserved after upgrade of my own application or LHC. At least I hope so.

I would have expected to be able to change the CSS of the default widget in the same way but I had to create a custom one before...

Regards,