jQuery-autocomplete scroll issue - javascript

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 :)

Related

Content Filter Is Jumping When Button Is Clicked

There was a similar question asked on here (not enough information was given) so no real solution was presented. I am using MixItUp to filter content within a framework (Foundation) based on a button being clicked. I noticed a weird movement that happens when a button is clicked. I have uploaded the files to be viewed here
http://cantaloupecreative.info/filter-code-snippet/
After the animation fires, I see page elements jump to the right a bit. If that's what you're referring to, take a look at the scroll bar. When there aren't enough elements on the page, the scroll bar disappears and everything re-centers, which is likely what you're seeing. You can avoid this by permanently enabling or disabling the scroll bar with CSS
overflow-y: scroll;
or something similar.
Okay here is what I uncovered in my search for a solution. WebKit is overriding the css change I am making to my body class. You cannot use overflow-y in chrome because of this. Now when I was making the change to my sass file it wasn't compiling correctly. After hardcoding the webkit fix into my stylesheet I was able to remove the scrollbar on all toggled divs with the following code.
::-webkit-scrollbar {
display:none
}
Obviously this only fixes half of the problem because now I am without a scrollbar. But it atleasts fixes the hoping issue.

html margin issue - "Shaking" Website

Im working on a Website and everything is ok, except my webside is "shaking". (I'm using chrome)
The margin of my main Container is changing on some sides and i have no idea why. They have the same html code, it must have something to do with the content in the main div-container
My Website: www.anitalernt.de
http://www.anitalernt.de/about-us.html is a bit more to the left and http://www.anitalernt.de/index.html after getting a task (just click some buttons) also.
Has someone a idea?
Always display the scrollbar
html {
overflow-y: scroll;
}
See:
Always show browser scrollbar to prevent page jumping
How to always show the vertical scrollbar in a browser?
You could add
html{ overflow-y: scroll;}
to your css.
Places a permanent (but sometimes empty) scroll bar on the window
The issue is most likely caused by the scrollbar appearing, which reduces the viewable area of the browser window and may adjust the contents accordingly.
There are a couple possible workarounds:
You could extend the length of the adjusted web-page so that the content (post-adjustment) also runs "below the fold"
Alternatively, you could encase everything in an absolute positioned DIV which won't "shake" when the viewable area contracts on the scrollbar's appearance.
Or -- depending on your specific content -- you could disable the scrollbar. Although this last workaround is only advisable in very specific cases.
body{
margin: 0;
}
seems to resolve this without having to add a dummy scrollbar :)
I had the same problem because of jQuery scroll where I was checking the scroll value and using that. I fixed my navigation bar by using addClass and removeClass, adding class was not working because I did not use !important in CSS class.

Display a popover inside a div parent with overflow:hidden

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/

dropdown menu outside of shadowbox

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

disable scroll bar on the div

I have a div.
I want that user should not be able to scroll the page if the height is more than 350px.
Also the scroll bar should be visible in disable mode in that case.
I want to achieve this using javascript.
Thanks
I can't say I completely understood what you want, but I think what you're looking for is CSS not javascript. Take a look at the overflow property.
Seems like you're looking for overflow: hidden; perhaps?

Categories