I'm writing in angularJS and I couldn't find a comfortable solution for this issue-
I have a div element with overflow: hidden property (since i'm using internal scrollbar) and inside that div I have a dropdown menu, triggered by a button click.
unfortunately, the dropdown in partially hidden (since it is exceeding the borders of its div parent.
The best solution i've found so far is to add the popover dynamically to the body and calculate its position for every button click, but it is a bit complicated since i'm also using a scroller...
Any help would be appreciated.
Thanks!
Tammy
Normally you shouldn't be able to do it without either removing overflow: hidden; property, or use absolute positions for your div and dropdown menu, which can be a bit tricky (make some search, there is a lot of topics on Stackoverflow).
But you can achieve it with position: fixed;, knowing that it will depend on the browser ; see a working example : http://jsfiddle.net/Nf7u4/
Related
I am new at jQuery, and I am trying to do an effect.
The effect consist on a slide in to a visible div. I need the children to be visible when it enters the div, but just the words that are IN the div zone.
Is this possible?
I've been searching for a long time and I have not found anything.
I attached an example image.
You should use overflow: hidden; in your CSS.
Here's a guide to the overflow property:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
It has examples at the bottom if you're not that used to using CSS
I have a sidebar navigation menu with children and sub-children which appear on hover. Here is a jsfiddle link: https://jsfiddle.net/s096zfpd/
This is obviously heavily simplified just to give an idea of what I'm trying to accomplish. My issue is that sometimes the list within <nav> exceeds the height of <nav>. In this case, I want to be able to scroll within <nav>, but doing so would compromise the overflow-x:visible property which I need to display .sub-nav, since CSS simply doesn't allow the simultaneous use of overflow-x:visible and overflow-y:scroll.
I'm thinking that maybe a js solution could work well here. Any suggestions?
Thanks.
If you are using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto It means that we can not apply visible and hidden to same DOM element, so ideal solution would be
To create a wrapper and then apply overflow-x and overflow-y to two different DOM elements. Sharing the js fiddle solution to your problem
https://jsfiddle.net/e2edvupc/
I am using jquery and jscrollpane to display some data with a custom scroll.
The problem I am facing is that while the user is browsing the website I append items to an UL and when the user hits a button these are supposed to be shown. The problem is that these elements as they were being appended to a placeholder div with "display:none", something in either jquery or jscrollpane sets their style attribute to a width of 0 thus making them invisible.
Do any of you know what is causing this?
Your problem is that display: none makes the element have no impact on the page.
Instead, try using visibility: hidden, this makes it only disappear while still keeping its height and width.
I am creating a shadowbox on my website that will pop up and allow users to pick from a number of options including some in submenus. The content within the shadowbox is going to be pretty extensive, so it needs to be able to scroll vertically and not scroll horizontally.
The problem I have is that the submenus are supposed to pop out to the right of the list and overflow to the outside of the shadowbox. This worked until I implemented overflow-y: scroll; in the CSS. Now, even if I use overflow-x: visible; it still acts as though the x-axis should scroll.
Has anyone encountered this problem before or have any tips on how to approach it?
try messing with a jsfiddle here
See http://www.w3.org/TR/css3-box/#collapse-scroll:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as
their specified values, except that some combinations with ‘visible’
are not possible: if one is specified as ‘visible’ and the other is
‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
I can't think of anything to solve this issue using CSS only, but it should be possible with JavaScript if dropdowns are outside the block with overflow: auto
I'm using rails3-jquery-autocomplete in my application. I've faced the following issue:
if you enter something in the input field so that autocomplete data gets displayed and scroll the page after that, the box with the autocomplete data isn't scrolled with the page. It stays at the same position.
You can look at what i'm facing here. Note that this example isn't created by me, so i'm not sure the same jquery plugin is used here. Nevertheless the issue is pretty the same.
add this to the css
.ui-autocomplete {
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
Probably you are missing appendTo-attribute from options to Autocomplete. It defaults to body, but you probably want to have it your container div (hard to say exactly without seeing your code).
See documents.
But have you checked the scenario, after applying height and overflow for the result can't able to scroll through the list using keyboard down arrow, which can able to scroll using mouse. If we use keyboard to scroll it keeping the scroll bar ideal and making the highlight value to traverse throughout the list.
I know this is old but I just fixed this in my own project by adding a CSS property of "position: fixed" to ".ui-autocomplete" in my project. Check it out here if u want: 34.212.191.181:3000.
P/s the page is in Vietnamese, just play with the search box in the nav bar :)