So, one of the things I hate about the Chrome Dev Tools is this:
Basically, when the html is deeply nested the elements tab starts to wrap lines to try and fit everything in the panel, instead of using an horizontal scrollbar, which would make much more sense here.
I can't believe such an awkward layout is intended, it's literally unreadable... is there a setting to prevent this?
Found a setting in the DevTools that solved this issue:
If you uncheck Word wrap everything should be fine.
The setting is located here: DevTools Settings > General > Elements > Word wrap
Enabling word wrap technically solves the problem, but leads to another equally annoying situation, the "horizontal scroll hell" mentioned by user karvonen.
But it turns out Mozilla devtools avoids both problems quite ingeniously by only adding a horizontal scrollbar when the nested elements get too far. I switched to Mozilla devtools just for that:
Related
I have implemented a design for my website using scroll snapping via scroll-snap-align documented here and scroll-snap-type documented here.
The implementation works, however on Google Chrome the user must scroll quite "firmly" in order to move to the next section. On the other hand only one "tick" of the scroll wheel is required to move to the next section on Firefox. The behaviour on Firefox is much more desirable whereas the Chrome behaviour feels clunky and unnatural.
I'm wondering if there is a way to adjust the scroll sensitivity on Chrome or something along those lines in order to achieve the same behaviour that is present in Firefox.
I have created a JSFiddle with a minimal implementation that demonstrates the different behaviour across the aforementioned browsers.
Thanks in advance.
EDIT: The behaviour in the JSFiddle (and indeed on my website) has now changed to something different but equally unsatisfactory. Now scrolling down one "notch" on the mousewheel causes the scroll snap to go 2 sections down instead of 1, I have created a new JSFiddle with a 4th section to confirm that the scrolling goes down 2 sections and not straight to the final section. I have been unable to find a reference to the update or change in specification that caused this.
I ran into the same issue described above and so I turned to https://lucafalasco.github.io/scroll-snap/. I've personally tested it on Chrome and Firefox and it seems to work well - that is to say, scrolling with the mouse wheel does not skip sections. I'm not intending to support IE11 so this serves my purpose.
I have successfully implemented horizontal scrolling on wikiprop.org but the example I followed has this inertia/momentum effect, where you can swipe and it’ll continue scrolling and gradually slow down—as is common across the web.
Why doesn’t my horizontal scroll do the same? On my machine, at least, the scroll feels “sticky” meaning it doesn’t continue scrolling to a gradual stop when I do the “fast swipe” gesture.
Much appreciate any support, and please let me know if this is not clear enough.
I looked at your site in Chrome with the developer tools opened. If you look at the following screenshot, you'll see that Chrome is only rendering some of the CSS. It appears you wrote your styles using SCSS and an error occurred in the pre-processing step. Since browsers can't read SCSS, you can imagine all the possible issues that might arise.
I apologize if there is something very obvious I need to correct here, but I am stumped on this one. I'm just try to layout a series of links (styled as block level elements) in a grid layout. I've boiled down what I'm trying to do into it's most simple state here: http://cdpn.io/JLdne
In Safari and Firefox it renders as I would expect, but in Chrome (of all browsers) the 2nd the 3rd link elements are shifted down another 32 pixels.
Part of me is saying I may have found a weird bug in chrome, but I'm thinking the more likely thing is I'm just doing something wrong. Is there a better way to do this? I tried changing the a elements to display as inline-blocks, rather than using floats but it started to cause other issues in my layout. Thoughts would be appreciated.
remove clear:both on the div class
Seems like this only effects Chrome 25... just tested using Chrome 24 on Spoon.net and it renders the same as Firefox
The issue I'm having is options in a select box flow over the edge of the page (hiding the scroll bar). I'm trying to restrict the width of the options using CSS. Please say if there is a better way...
This worked fine in IE8, but not in IE9. Seems okay in Firefox as well. Chrome ignores it as well, but makes sure the options don't overflow off the page (like IE9).
I know the non-resizing of these was a bug that was fixed for IE9, but it is necessary (sometimes) to set a width limit.
http://jsfiddle.net/jdb1991/Vt8Bd/
Browsers implement select elements differently, often using built-in routines that are more or less immune to CSS. It is not even clear what you, or others using very long option texts, would like to happen—truncation, line-wrapping, horizontal scrolling, or what?
The problem is best avoided by using concise option texts. They are supposed to be visible names for alternatives, not novels. If very long names are really a necessity, use a set of radio button instead of select.
Here is the issue I am having:
One of my webpages overflows on the x-axis, meaning I have to scroll left or right which in effect causes other issues.
I started disabling all the css stuff for that page, but I still continue to see the scroll bar at the bottom.
How do I find out which element/html code is causing this? There are literally hundreds of lines of code.
Thanks
Bruce
If you're using a WebKit-based browser, try the Web Inspector. If you're using Firefox, try using Firebug.
Regardless, either of those tools should have some way that lets you see the HTML of the page. In both of these tools, when you hover over the element in the inspector, it will highlight the element on the page. If you just move your mouse down over the elements, you might see one pop out of the confines of the page. If that doesn't find it, you could try right clicking on areas of the normally-out-of-view part and clicking Inspect Element. If you get some specific element, that might be causing the problem.
Depending on the browser you are using, there are multiple methods via an 'element inspector'. A helpful bookmarklet that I have found is XRAY. Simply enable the inspector or bookmarklet and simply highlight the designated area that you wish to inspect.