I have a list of items on a page which requires a scrollbar. We originally used Perfect Scrollbar but we have since removed it from the codebase after an update caused some unexpected behaviour. The scroll functionality should now be handled completely by the browser/css settings.
The issue is that the "scrollbar thumb" cannot be grabbed by the cursor unless an item is first selected in the list, the "scroll wheel" on the mouse is still able to activate it. Unfortunately this has caused confusion for some users. There are no other scrollbars active on the page when it is first loaded. This behaviour is the same on both chrome and firefox browsers.
Here is a snippet from the DOM:
The only scroll-relevant css I can find in the DOM is for these classes
.email-application .email-app-list-mails {
overflow: auto !important;
}
I have had a look at the different scroll related CSS attributes but as far as I can tell none of them will affect this issue.
Related
On mobile (or desktop with small window size to replicate mobile, as per the screenshots) the form on my page loads fine with default dates, but when a new date range is selected the form shifts to the left after making the selection (or rather, a gap is inserted to the right) but I can't find anything using F12 developer tools that is causing it. It is not possible to scroll to the left.
On page load:
After selecting dates:
The form itself is displayed by embedding a third party JavaScript link on the page - is there anything I can do to prevent this from happening? I can't figure it out!
Note: The page uses a YouTube video background which is blocked by the firewall where I am working from at the moment (hence the grey background), but is not causing any JavaScript errors. The problem is the same on all mobiles and on networks where the background is able to load.
Live example at #########.com (address will be removed when resolved)
Thanks
UPDATE: As per the answer from Wouter, removing the overflow: hidden from <section class="gg-section hero video-home" id="dots-section1"> fixes the issue, but unfortunately that causes other layout problems so cannot be applied.
The problem is likely to be caused by the video being 300% width. Try to set a overflow: hidden; to the following element:
<div class="video-background">
May not help but..
I had a similar issue with page jumping and forms before.
It was caused by an <input class="hiddencheckbox" type="checkbox" />.
Every time I used js select/deselect the checkbox, the browser would try and jump to the checkbox position, which I had hidden by moving its position outside the viewport.
.hiddencheckbox {
position:fixed;
right: -1000px;
// BAD WITH JS
}
I removed the positioning and changed it to:
.hiddencheckbox {
display:none;
}
Sometimes I see some an unwanted border or another element in the web page and I have a lot of troubles identifying just to which element it belongs.
There may be many enclosed elements, any of which may or may not have the border in question, for example. Right now I have to go through each of them and check the border property of each, which takes a lot of effort.
So is there a way to see which element owns any given on-screen pixel with Firefox, Firebug, Chrome or any other web development tool?
I just want to point my mouse cursor at any pixel in question and see the corresponding element and/or rule.
There's usually an option to inspect any chosen element, but right-clicking on the border of an element and choosing to inspect the element doesn't seem to show the exact element the border of which was clicked.
The only way I could think of is to use the "element picker" function which exists in any developer tool.
In Chrome it is a "magnifying glass" and in Firefox a "square with an arrow" - both at the top left.
Click to activate and move the cursor around the page to inspect. The respective element is highlighted.
So you should easily find the element you are looking for.
An example:
The element inspector should do the job. The only reason I could think of for why it fails is when the element in question is covered by another element. See example:
#test-1 {
float: right;
width: 50%;
}
#test-1 >div {
border-bottom: 1px solid;
}
#test-2 {
float: left;
width: 50%;
}
#test-2 > div {
width: 200%;
}
<div id="test-1">
<div>Inspect me</div>
</div>
<div id="test-2">
<div>Obstructive element</div>
</div>
And the solution is simple: right-click on the element in question and click inspect element (zoom the page if necessary). If it is not the correct element, hit the del button on the keyboard. This removes the element you just selected. Repeat until necessary.
As far as browser functionality goes, there are two thoughts that come to mind:
The 'elements' tab of Chrome Developer Tools. If you hover over elements within the tab, that area of the page will be highlighted, complete with a height/width tooltip. (I do realize this is sort of the opposite of your use case, but it could still be useful).
Similarly, the Firefox page inspector has similar functionality.
It might be worth writing a small script to get the functionality you're looking for. You might look into jQuery's elementFromPoint. Example: http://jsfiddle.net/t8vapLwr/2/
Why don't you try this chrome extension if you don't want to rely on the element picker.
https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh
what it does is highlight the different elements on chrome.
I totally understand your problem. I have been thought it. So what i do is the following:
Obviously you can use the inspect tool which sometimes doesn't shows us what we exactly need.
You can use this chrome extension Precise Element Picker Tool and then select the specific element.
I am sure the 2nd option will solve your problem.
Using "Inspect Element" on a border has always worked for me, but potentially this could help.
It was mentioned by Sculper, but you could do something really quick yourself using document.elementFromPoint.
Just copy and paste this into the console:
window.addEventListener('click', function(e) {
e.preventDefault();
console.log(document.elementFromPoint(e.clientX, e.clientY));
}, true);
Then you can click around the page to find the element in question.
In Chrome, Firefox, and Firebug, that outputs the element to the console, which you can then click (or for Chrome right-click and "Reveal in Elements Panel") to see it in the Elements Panel.
If you need clicking for navigation (for a single-page app or the like), you can simply change the event being captured to mousemove or dblclick.
You can see this working/breaking here: http://new.campchampions.com/parents
The issue only crops up in IE10. After the user has scrolled a little ways, the navigation becomes pinned (a class of fixed gets added to the body which effects the hgroup.primary(I know, I know hgroup is not a 'thing' anymore. Don't judge me.)). If you go back to the top of the page, it un-pins, goes back to normal.
In IE10, when you go back up to the top of the page, the nav elements disappear until the mouse moves up over ANY part of the yellow bar. It's driving me nuts.
I've attempted things like having JS append/alter content in various elements on scrolltop/un-pinning the navigation.
I've got a brief youtube video showing the issue: http://youtu.be/-itTC_j-9YE
Any thoughts, or ideas? That'd be great. Thanks!
While I have no solid answer for the reason behind this redraw issue, I found that an instantaneous jQuery hide/show redrew the element completely without any visible side effects.
Using a non-jQuery JS hack to add a class to the HTML element in IE10 (see Willem de Wit's answer to this quandry), I made sure this code only fired on IE10.
if($('html').hasClass('ie10')) {
$('.primary').hide(0, function(){$(this).show()});
}
One of my sites has a horizontal navigation bar which is created using a list. Besides a small bug in Firefox the list looks & works fine by now - except in Opera 11.61. There the list elements won't show up at all! As the list is the site's main navigation it is nested inside a nav element. So far my debugging showed that this is where the problem is.
When I remove any background information (like background-image or background-color) from the nav element the list is still invisible - I can see the body's background-color.
Also assigning different z-index values did nothing. But removing the nav element helps - when there is no nav the list shows up.
I created a small test case illustrating the problem (remember: Must be opened with Opera.): http://jsfiddle.net/sX5KF/
Do you have any clue why this problem occurs? Is there a fault in my code or is this just something like a bug in Opera? What can I do about it?
Alright I found the mistake. Opera displays nothing because I set content: ""; on the after-element. Other browsers seem to ignore it, but not Opera. I set it because I read it is needed, but actually it works even without content: "";.
For some reason my checkboxes and dropdown arrows are not visible in chrome, however, they still work.
They are perfectly visible in IE. When I load the page in IE, then try loading the page in chrome, they usually appear until I refresh the page again in chrome.
Anyone know what the problem might be?
Reference image: http://i.imgur.com/Q66w6.png
A 'solution' to this Chrome problem is to
open Task Manager
refresh the page in Chrome while the Taks Manager is open in front of the browser.
I couldn't believe this would actually work when I read about it, but I've seen it with my very eyes. This issue apparently exists since the early versions of Chrome and still exists in current versions, though it only occasionally occurs. It seems to be permanently gone after this 'fix'.
In webkit browsers the following code will remove dropdown arrows.
select{
-webkit-appearance:none;
}
Checking in your browsers inspector will indicate if it's being applied in your case or not.
Found this question while having the same problem.
Setting:
input {
width:100%
}
was the cause of the problem for me. This:
input[text] {
width:100%
}
was what I wanted (leave checkbox widths unchanged) -- setting the width of checkboxes in chrome seems to make them disappear.
As user48956 mentioned; setting input width to 100% causes checkboxes to vanish in chrome.
I use bootstrap and often have forms where I want all inputs to stretch 100% and don't want to use bootstraps form methods and this issue still comes up.
If you have defined input {width:100%} you can put a width on the div containing the checkbox and it will fix. e.g.
<div style="display:inline-block; width:20px"><input type="checkbox" name="read_privacy_policy" id="read_privacy_policy" class="pull-left"></div>
<div style="display:inline-block">I have read and understand the Privacy Policy.*</div>
or you can set style="width:auto" on the input itself
I had the same issue
Try this css style supression all style that acts in the input checkbox element.
-webkit-appearance: checkbox!important;
I think it's a bug and it's still there. I use checkboxes in a ligthbox window and they don't show. I'm on OS-X using Chrome 21.