Bootstrap popover in fixed position on Page - html

I try not to display a bootstrap popover next to the button but for all buttons on the page at a fixed position (e.g. at the bottom of the website).
Unfortunately I can't find anything about it, is that even possible via popover or tooltip? Like this

Related

Background image for Accordion panel

I'm on PrimeFaces 6.2 with JoinFaces on SpringBoot. I have a page with a single Accordion panel as the sole component. What I'm trying to achieve is not exactly a background image "for" the Accordion, but rather this:
I want to display a logo positioned at the bottom-center of the page
the logo always remains bottom-centered, no matter how the user maximizes/changes resolution of the browser.
when I expand the panels of the Accordion, it would overlap and conceal the logo in the background.
when I collapse the panels, the Accordion shrinks and the logo in the background becomes visible again.
Till now, I have neither been able to position an image at the bottom center of the screen...nor, how to do such an overlapping of the Accordion over the logo. Can somebody please advise how to achieve this?

Sorry, I badly misunderstood my problem. This has nothing to do with tweaking the Accordion. It's just about having a full page background image in HTML.
https://www.w3schools.com/howto/howto_css_full_page.asp

Modal from Modal not scrolling in Bootstrap 3 page (modal height must be dynamic)

I'm in a Bootstrap 3.3.7 environment (no, I can't go to BS4 here unfortunately) and when opening a modal from a modal, the new child modal will not scroll.
I've tried other fixes such as assigning a height and overflow but the problem then is the modal is at a set height and will not scale with the window size so any responsiveness is thrown out the window.
Was able to make the scroll wheel control the scrolling in the child modal, but that isn't the greatest UX to use (and I had to hide the new scrollbar so there wasn't any duality there to cause confusion).
Bootstrap modal inside a modal; Cannot scroll after closing modal looked promising and addresses the issue of modal-open no longer being in the body tag. The problem is the script does not seem to work because modal-open is not being placed in the body tag when the child modal opens.

Popup div with pure CSS/HTML without changing the viewport position

What I am trying to implement is a popup window with pure CSS, i.e. without using JavaScript. I have come up with a solution using the target pseudoclass, but the problem is that whenever I click the close button of the popup, it scrolls the viewport to the href element I specified, in this case #home. What I want to achieve is a functionality where the viewport doesn't move, regardless of the scroll position. For example, if I open the popup and then scroll to the last section, and then click the close button, the viewport should stay at the last section.
Here is jsFiddle: https://jsfiddle.net/tmzjpwkz/6/

replace href with #popup:target
Close
https://jsfiddle.net/tmzjpwkz/8/

bootstrap3 dropdown not showing properly on resizing browser window

i was just playing with the navbar of bootstrap and got into this design issue that bootstrap already seems to have. Just go to this example page that the site has: http://getbootstrap.com/examples/navbar-static-top/. Now resize the window to a smaller width till you get the navbar collapsed and click on the right icon where it shows the navbar elements in vertical fashion. Now click on the 'dowpdown' link so that it shows a dropdown. leave it as it is , dont click it again and resize the browser window to the previous full width. you might see the issue where the dropdown is below the content and is inside a overflow: auto type box. any answers how this can be solved?

I resolved this issue by adding the following to my custom CSS file which is loaded after the bootstrap css. Seems to have worked so far...
.navbar-collapse.in {
overflow-y: visible;
}

facebook Like button causes vertical scrollbar instead of overlaying

I added the facebook Like button to my website and am having an issue. When the Like button is clicked, the box that pops up doesn't overlay the other content like it does on most websites, instead creating a vertical scrollbar in the container (expanding it).
This issue actually exists on facebook's own website:
https://developers.facebook.com/docs/reference/plugins/like/
If you scroll about half way down the above page and click the Like button, the same issue happens:
The only difference there is that they have overflow set to hidden, instead of auto.
How can this be fixed?

Add to your CSS file:
.fb-like{overflow:hidden;}
This should solve the problem.