0

I have a small chatbox at the bottom of my page which seems to be inheriting CSS style from bootstrap.min.css and that chatbox is transparent which is a nuisance because the underlying text on the page shows through and what is worse, is that hyperlinks on the page are over-riding clickable areas in the chatbox for opening, closing and submitting messages.

I have tried adding CSS style to the chatbox for opacity and rgba. Even tried adding a background image but to no effect.

I have since modified the chatbox to display an iFrame from a different site that does not use bootstrap.min.css.

But even the iFrame page is affected by transparency. I can remove the transparency setting in bootstrap.min.css but that will not solve my bigger problem... I am intending to use this chatbox on several sites and may not have control of the site's CSS.

So I need a way to override the parent site's CSS just for the chatbox.

If that is impossible, then I can weed out the transparency from bootstrap.min.css that is used on my own sites. However I do wonder what is the point of such transparency when it is useless here...

transparency is useless here

WilliamK
  • 821
  • 1
  • 13
  • 32
  • Please, paste the full code you tried (or make a jsfiddle) because I created a https://jsfiddle.net/3m7s0tj2/ with the page you provided, I included bootstrap and there is no transparency problem. – tcj May 25 '19 at 01:48

2 Answers2

1

It's a z-index problem which is common when integrating iframes, apply z-index: 2000; (or whatever number as long as it comes on top) on your chatbox div so your chatbox will still stay upfront.

tcj
  • 1,645
  • 4
  • 13
  • 21
  • I can see that you changed your code, you shouldn't, just change your chatbox div like so `
    `
     – tcj May 25 '19 at 02:04
0

Since you haven't posted any code, I'm not sure if you've tried this or not, but you can use the !important value to override Bootstrap's styles in your custom CSS. For example: background-color: white !important;

Richie
  • 69
  • 2
  • 6
  • Already tried - background-color: rgba(245, 245, 245); background: rgba(245, 245, 245); background-image: url('/images/chatbox-bgd.gif'); opacity: 1; background-color: #f5f5f5 !important; – WilliamK May 25 '19 at 01:22
  • Okay, I would recommend that you take a look at this here: https://stackoverflow.com/questions/7421775/css-i-want-a-div-to-be-on-top-of-everything So you might need to wrap a div around all of the elements in the chatbox (besides the root chatbox element) and give it the `position: relative` rule. Try that in addition to a `z-index:100` on that new element. – Richie May 25 '19 at 01:57
  • Position: relative or absolute moves the chatbox from where it is supposed to be. But the z-index: 1000 solved the problem, thanks. – WilliamK May 25 '19 at 02:06
  • No problem! You can also get rid of that horizontal scroll on the page by adding `class="container"` to `body` or `style="overflow-x:hidden;"` – Richie May 25 '19 at 02:14
  • Thanks but scroll is needed because it shows the last 4 messages which can vary in length. I think the client needs to see at least the last 2 questions with answers. I know I do when I am the client because often I have to copy and paste my previous question because support ignored it. – WilliamK May 25 '19 at 02:26
  • However what I do need now to complete this project is a means to keep the chatbox open when the client moves to another page or reloads. So perhaps setting a cookie for open or closed and retrieving it on page load to set the option on the chatbox CSS. – WilliamK May 25 '19 at 02:36