I'm using UI-Bootstrap as part of my angular application.
I added some simple popover which loads an HTML template file.
The popover position set fine but once I try to resize the window the popover location is not getting updated. However, if I close the popover and open it again, the new position is calculated.
Any idea what can cause the popover not to calculate the new position or any suggestions how to solve this?
Simple code:
<div id="some-wrapper">
<div popover-is-open="isOpen"
uib-popover-template="history"
popover-placement="left">History
</div>
</div>
I've spent 2 days on looking for a solution but with no success.
The strange thing is that in some other angular applications which use the same UI-Bootstrap version, the position is getting update during window resize.
The popover component is built from the tooltip component. There is no support for repositioning the tooltip or popover on window resize or scroll.
Related
I am facing an issue with the react-gauge-chart library in my react project.
I have implemented a popover component using material-ui and introduced the gauge chart component from the library inside the popover modal. On text hover gauge chart is been displayed correctly but during onmouseleave event, the popover component flicks(size of gauge chart increases) for a tiny bit second then closes the popover modal. This flicker is currently effecting our project UI.
When I test without the gaugechart there is no issue with the onmouseleave event. Could anyone please help me where am I going wrong here or a solution which I can use?
As I am new to CSS I am not able to understand where this issue is coming from.
Reproduced the issue here
https://codesandbox.io/s/react-over-issue-5ibv6
Thanks
The onmouseleave event is not the cause of this problem. If you change toggling popups to click you continue to get this behavior
This is a rendering issue. When the popup is closed, the content size is decreased and this causes this behavior
I am currently developing a Webapp and I am trying to use QuillJS as a WYSIWYG Editor. I am trying to use the 'Bubble' theme as it fits nicely with the rest of my webapp, however when the tooltip is supposed to appear it does not appear on the screen and after checking using the Development console I found that the tooltip is being displayed with a Top value of somewhere around -700 to -1000 and I have absolutely no idea why.
I have tried using an element that was high-up in the HTML Heirarchy in case a parent div was messing something up but that did not solve my problem either.
Can anyone tell me why the tooltip appears so far off the screen?
Here is a JSFiddle with the current state of my code: https://jsfiddle.net/RBrNx/nwozxLzz/
Please Note: Most of my webapp does not function or look great in the JSFiddle, this is not an issue as most of the functionality involves a local database.
You may need the bounds option，set offset parent
bounds
I am using dojo to render the panels on UI. I am facing one issue. All the panels get rendered on UI for few seconds(around 1~2 secs). After that I am getting a blank white screen. Now if I want to see the panels I've to do dragging the splitter OR maximize/restore that pane. I.e. basically I need to play with the width so as to get back the disappeared panels.Please suggest some solutions over this.
It would be better if you can provide more information in your question, your code is better. Otherwise, it is hard to tell what exactly cause this issue.
But you can try add resize call of the container of your panels somewhere after you startup this container.
I am having problems trying to drag a container (which is inside a navigationview) outside of the navigationview. Every time I try to do that, the container that is dragged disappears behind other components when it is dragged outside navigationview.
I have written a small fiddle that explains the problem that I'm facing:
https://fiddle.sencha.com/fiddle/d0
Is there a way I can make the container visible even outside the navigationview?
I've reproduced the code in your fiddle, copying and pasting it in a fresh Sencha Touch 2.2.1 app but I was not able to reproduce the issue. In my app, draggable components does not disappears behind the navigation view as in your fiddle.
The only difference between your fiddle and my working version is that I had to write the MyDroppable class in a separate js file and require it in the Main controller.
By the way, you can try to add
z-index: 1000;
to the style attribute of all the three draggable components.
sorry if this seems not to be a valid answer, but I've not yet the reputation score to post a comment
We are currently using Dojo to create a mobile map application. We're using Esri for the map service. Everything was working before changing from 3.2 to 3.3. The map works fine but I'm having issues implementing a base map gallery. I've done research for days trying to figure out why my gallery wasn't appearing but I've narrowed down my issue to it actually being the layout of my div tags. On my index.html page I have many div tags for different menu's and what not. I've followed all the div tags to make sure they've all been closed and they have.
So this is what I currently have implemented:
<div id="displayView" data-dojo-type="dojox.mobile.View">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props='fixed:"top", label:"Display Options", back:"Menu",
moveTo:"menuView"'>
<div id="galleryDiv"> </div>
</div>
</div>
With this code, the gallery doesn't show up, but if I move the closing div tags above the div id="galleryDiv" then it the gallery will show up, but it shows up on every page of the application because there is no ending div tag. Also, we were trying to implement buttons that would move the base map images in the gallery from left to right but they only work in google chrome. I wasn't sure why it would only work in Chrome and not any other browser.
I originally had a scrollable view in it but it wouldn't show up at all so I changed it to just mobile.view and it worked. Throughout the application it interchanges view and scrollable views, but from what I've researched, it should all work regardless.
After all the research I've done, I'm pretty sure it has to do with the parent/child relationship with the div tags but I'm not sure why it would keep my gallery from showing up on one page and why when I closed the div tags it shows up. However, if I close the div tag then the gallery shows up on EVERY page.
I appreciate any and all help, ideas, and comments! So... Any ideas?...
So what actually ended up being the problem is that the div tag inherited it's own height at 0px. Once we gave it a height, everything showed up just fine. Now why did it give it's own height 0? No idea. Either way, it works now!