While searching on the internet for a solution to allow the ui bootstrap popover to stay open while I hover on the popover itself, I have found an unaccomplished solution.
The problem is that when I hover on a button, all popovers of all buttons get opened because they have all the same cached template id, however I want only the popover of the hoverd button to be opened.
Related
Currently working on a React project, with styled-components. I am trying to make my modal responsive. Like when the page loads, the modal should be fixed just below the "add event" button.
Sadly, it is but when I change screen size, it does NOT move with that button or the page, and remains at that fixed position for different screens, like a normal modal does
Click to view Image
I have tried changing the margins and position, still no difference. The Modal remains as a fixed overlay and is not responsive with the page components.
I am using this package for my datepicker
https://www.npmjs.com/package/react-datetime
I also have some other components there like a react-dropdown. When i click on the react-datetime datepicker it opens and on outside click it closes. When i click on it again it opens again.
The issue is that while the datepicker is open, if i click on the dropdown the datepicker closes and the dropdown opens. Now when i click on the datepicker again it does not open.
What i have observed is that it needs a outside click to keep track of the datepicker being closed. So in the above scenario if i just click outside the picker and click on the picker again it opens. Need to provide it an outside click to fire some kind of onClose event.
Is there a way i can fix this so that clicking on the dropdown or any other component also closes it
I developed a directive to maintain inline help for a widget from a dropdown bootstrap menu, but when I click help from the dropdown, the popover is currently bound to the element and cannot be separated, so it opens absolute from that position.
But the requirement would be if we click help in the dropdown we have show popover like below
I am not sure if it even possible, anyways I'll list down the efforts that I made.
Angular-UI Bootstrap does not help, it does not possess any capabilities to programmatically trigger like bootstrap.
However, In Angular-UI Bootstrap we can add triggers which was done by Elijen, but it would be divided into two components.
My issue would be to create a single directive housing both the trigger and the popover like the second image. I don't want to kill the sanity of bootstrap by overiding the CSS. I wanted to know either we could write a method to detect the position and move to the top of the widget or anything like that, since it would be a reusable component.
The reason why it's a single directive is, it would be packed into webpack and made a cross-cutter tool.
The angular-ui-bootstrap popover listens to the popover-is-open attribute to support opening the popover programmatically.
I'm curently working on this piece of code, since i have a loader integrated in my site, the loader clashes with the modals, so i open the modal from my controller. my problem is if click open the modal it opens behind the current modal, whereas i want it displayed on top.
You should change the z-index css property for the modal and/or the loader.
Most probably you should add z-index to your main modal popup div.
You can try ngBootbox. It's a library for popups.
I am using angularjs for my front-end. I have created some popover windows. I want the popover window to be disappear when I click somewhere in the browser window. How can I do that using angularjs. Thanks in advance