I am using ui-select (Version: 0.8.3, angularjs) library in order to display a drop down list.
I have a situation when i click on a text area there is JavaScript that changes the height of the div to a larger height so it can be scrolled up.
the problem is that when it occures the dropdown remains open and does not close.
after a little of debugging i saw that the OnDocumentClick is not being called once the height is to big.
if i don't change the height of the div, it is working correctly.
Is there any other solution possible?
Thanks.
Related
I do not find, there is any option or event to make the feel of accordion as my expectation in AMP's accordion library. However, I have done many changes using jquery but now I need to expand and collapse item smoothly. Is there any way to do this.
You can try using amp-selector and add CSS animations to achieve the same effect.
You can use this trick to animate from heigh 0 to auto. How can I transition height: 0; to height: auto; using CSS?
You may find this thread helpful to solve your issue. It stated that:
Currently there is no animation for the expand/collapse action. This means that it may be difficult for the user to track the behavior of the interface if multiple items are collapsing at the same time that their target element is expanding.
There is no scrolling adjustment when amp-accordion closes or opens, which means if a large enough (or large enough set of) amp-accordion(s) closes above the current viewport, the content inside the viewport could shift dramatically (even entirely out of view)
Needs some way for multiple amp-accordion elements to communicate with each other (could be a parent element with an attribute something like "auto-collapse-children")
Also, check this Content Collapse jQuery plugin to smoothly collapse and expand content by clicking the panel header, which acts as an accordion.
This wasn't happening previously for me, but I updated to iOS 9.3 two weeks ago and now hidden elements on my web page are hidden when the keyboard is displayed or another input is selected.
Annoyingly a top fixed element is only hidden if the page is scrolled, and the bottom is always hidden. This seems to be a way to 'solve' the issues encountered with fixed elements being left in random positions on the screen when the keyboard is displayed, but now I've got a situation where the elements don't reappear reliably, meaning I lose my main navigation bar for my app.
Is there any way to disable this auto-hiding behaviour? I've created a barebones page that shows the behaviour here: http://128.199.171.247/test.html
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.
I'm using Harvest's "chosen" plugin, and it's working fine until the browser window increases too far in width-- then for some reason it calculates that left should be -9000 and renders off screen.
Furthermore, I can no longer get it to close by clicking outside of the dropdown area.
Screenshot below-- what can be seen of the dropdown is circled in red. Has anyone else run into this problem?
I just realized what's going on.
When you're outside of the input/dropdown, the dropdown is still rendered, but given a left of -9000px.
My browser width is currently about 9400 px.
Still don't actually know why it's not closing, though.
EDIT: edited the src to use show/hide instead of left and it works now....
I'm sorry if the title is not very good, any suggestions are welcome.
The entire page is an iframe onto another website (in this case, jquery.com just for demo purposes). I have an overlay "Hello World", and if you click on the X it minimizes it (click again it will open it).
My issue in this case is that it covers the scrollbar on the right.
I assume the reason is I have a CSS positioning the sidebar at right:0, however since it's an iFrame it doesn't count the scrollbar.
What are my options for working around that?
I thought of giving it some extra space, but how do I know if the page really has a scrollbar, or how big the scrollbar is?
Is there a way to place the overlay at a position WITHIN the iframe instead?
There is no way to detect the remote page's height or even if a scrollbar is present or not. Your only option, besides moving the sidebar to the left, is detecting the browser's scrollbar width and permanently shifting the overlay off the right edge this amount.
yes. just set the right to 40 for example right: 40px;
There is an example here that shows you how to detect if an iframe has a scrollbar:
How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
And there is also an example here that measures the scrollbar width
http://4umi.com/web/javascript/scrollbar.php
Once you know these you can place your overlay however many pixels from the right