Popover doesn't stay, and position stays while page scrolls (Angular 4+) - html

When I click on an icon, a popover shows.
I realize that there is delay set with the popover, but when I scroll, the popover moves as well.
How can I make it stay where the icon is and not work with scroll?
<md-badge class="current-plan-type__icon--badge" direction="right" [mdPopover]="tootltipTemplate" delay="10000"
popoverTrigger="MouseEnter">
<i class="cui-icon icon icon-info_16 current-plan-type__icon--info"></i>
</md-badge>

Just move tootltipTemplate outside of your scrolleable div it will be called even if is not at the same level.
I think you have this problem: the popover template inside of the scrolleable div.
<div #root>
<div #scrolleable>
<div #tootltipTemplate></div>
</div>
</div>
Then my suggetion is: moving out the popover template of the crolleable div.
<div #root>
<div #scrolleable>
</div>
<div #tootltipTemplate></div>
</div>
I hope it works for you.

Related

Bootstrap fixed navbar is wider then html and causes x-overflow

On my website https://bennetdev.de I have a fixed-top navbar which seems to be wider then my actual html tag. I think it is a problem between the navbar and my bootstrap modal but I don't know how to solve it. Due to the wider navbar a white space on the right side is shown when you visit the page, but disappears when opening the modal (through the contact button) and is not existent anymore until you refresh the page. Anyone knows how to fix this?
EDIT: There is no overflow because I hide the x-overflow on my body element but what I mean is the white bar on the right side, which would be a x-overflow without me hiding it
Ahh, yes, I see it now. It seems to be caused by the negative margins on a "row".
In your case, the div <div class="project row" >.
For bootstrap rows and columns to work correctly (ie. negative margins), the parent of a "row" should have the class "container". See the docs here.
eg.
<div id="projects" class="container">
<div class="project row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
<div>
You can use max-height: 210px; to define how much height do you want for your nav bar.
Anyway I recommended to upload some code that we can see.

Two step click on mobile device hover

I have a 2 divs. The first div disappears on hover and the second div takes its place. My second div contains a link inside. My problem is on mobile devices I can't see the content of the second div because when I click on the first div the hover effect on the link takes the lead.
<div class="boxInside">
<div class="content">
... some content
</div>
</div>
<div class="boxInsideHover">
<a href="exemple.com">
<div class="content">
... some content
</div>
</a>
</div>
What I want on mobile is one click to see the second div's content and another click after for the link.
Thank you

CSS Nested Div with flex styling to achieve desirable scrolling

I have the following div :
I am trying to make the Form Content Scrollable while leaving everything else fixed. The dialog height changes based on the form content and can grow upto the window size. But beyond that it should add a scroll in the form content.
I tried playing around with flex and got it working IF THE TAB divs (Tab parent and tab content) were not present. Even then the scroll bar remains permanently even if the height is available (Another problem but not as major).
Any suggestions on how to use flex styling on the mutable divs to get the scrolling just on form content?
The CSS that worked when tab portion was not present:
<div id="dialog" style="display: flex;">
<div id="form" style="display: flex; flex-direction: columnl">
<div id="formContent" style="overflow-y: auto;"></div>
<div id="formFooter"></div>
<div>
</div>
The above HTML and CSS worked as expected, adding a scrollbar to the form content. BUT when the dialog is maximum height, and the scroll bar is no longer required, the scroll bar is still present.
This approach does not work when the tab portion is included. It is creating unexpected behavior by showing 2 scrollbars or scrolling the entire dialog instead of just the form content. One for the form content div and another for dialog div.
The HTML CSS is as follows:
<div id="Dialog" style="height:300px;overflow-y: auto;width: 400px;">
<div id="DialogContent">
<div id="TabController">
<div id="tabHeader">
</div>
<div id="tabContentPanel">
<div id="tabContent">
<div id="form">
<div id="formContent">
Y U NO SCROLL ????
</div>
<div id="formFooter">
This is the Footer.
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Google Autocomplete move whole div

I want to move or replace .pac-container, the problem is that pac-container is somwhere in deep in my HTML and i want to move whole div to my bootstrap modal, how can i do it?
<div class="pac-container" style="display: none;"></div>
My HTML
<body>
<div class="modal">
<input name="adress"></input>
<!-- I want to move container right here -->
</div>
<div class="container">
Blaaa
</div>
<!-- Concurent position of pac container -->
<div class="pac-container" style="display: none;"></div>
May I guess that the main issue is that the autocomplete-input is placed in the modal and the suggestions(placed in the .pac-container) will appear behind the modal?
When yes: moving the .pac-container wouldn't help here, the result would be a incorrect position.
Try using a z-index for the .pac-container that is higher than the modal's z-index(currently it's 1050)
<style>
.pac-container{z-index:1051;}
</style>

data-add-back-btn does not show a back button

I have a simple jQuery mobile site with three pages in it.
In every page's div I've added
data-add-back-btn="true"
Still on none of the pages (not even on the sub-pages) a back button appears.
Is there some trick to this?
As of jQuery Mobile 1.4, data-add-back-btn="true" should be added to header div not page div.
<div data-role="page">
<div data-role="header" data-add-back-btn="true">
<h1>Header</h1>
</div>
</div>