I don't know if this question is relevant, but it has become an issue at my workplace, so...
One of our clients (using a Mac) showed us a 'problem' in a dropdown that we made using the default <select> tag. The dropdown has 43 <option>'s. In our Windows PC, the dropdown has a scroll bar (as you can see in the screenshot) showing only some items at a time. But in the client's browser, the dropdown shows all the items at once.
Is there a way to have scroll bars on the dropdown on Mac PCs? If no, what possible alternatives can I apply to get rid of this issue? Please note that the dropdown uses HTML's default <select> and <option> tags and I am hoping not to use any jQuery plugins as an alternative.
Thanks :)
Edit: For reference, here's the website - http://webcityhome.com/client/aairportershuttle/reservation.php (On the Pickup Location, go to 'Pier' and select 'Pier no.') (link defunct)
This is the Windows screenshot in our PC -
And this is the Mac screenshot in the client's PC -
This is the normal, expected behavior of a dropdown list on OS X. OS X uses the entire available vertical space for the list, it does not restrict it to some arbitrary portion of the screen.
I'd tell your client politely to shove it. What he wants to do is alter the default behavior of standard OS provided controls. That's not the job of a website developer, and it's not an issue either. It'd be an issue to change it and provide all users with unexpected behavior.
Every single dropdown list in OS X works this way. Ask your client why it's only an issue on your site.
There does not seem to be a problem on Chrome or Safari on Mac OSX. Here is a screenshot.
It displays an arrow to scroll down that is activated on scroll or mouseover.
I'm unsure if this will actually work, but try adding this to your stylesheet:
select {
height:7em;
overflow:scroll;
}
Both the <select> and <option> tags can be stylized with CSS.
If you want to have a scroll bar, try adding a size attribute, e.g., <select size="20">.
Related
In one of my PCs when I use inspect tool in chrome, I can't select some part of a property or a value, so I have to retype all the value again. As many times as I click on the selected text, the caret doesn't go to the place I need and the selected text doesn't deselect.
the following picture shows what I want and what happens.
There is no problem in another PC.
Both are windows 10 64bit and google chrome 62.
Try holding shift or control while clicking. Haven't tried it, but it may work. My guess is that it's simply a UX workflow that DevTools doesn't handle well.
So I'm trying to develop a webapplication and I'm trying to check it out on mobile.
I'm currently using Cordova and JQuery Mobile together with ripple.js to view my application in my browser.
The first issue (as far as I know) is that ripple.js will work best in Google Chrome, so this is my only test platform.
The second issue is that when I toggle Device Mode on, it doesn't show me the black dot (cursor) when I enter the rendered version.
I'll explain my situation or a scenario:
As an example I'll go to http://google.com
I press F12 to enter developer mode
I click the Toggle Device Mode button
I will see my cursor, until I enter the generated mobile canvas. While I would normally see a black transparant dot, I now see nothing.
I can however click and drag like I would normally do, but I can't see what I'm doing.
The things I already tried:
Reset all the flags back to default
Reset all developer tool settings to default
(edit) Installed a previous version of Chrome AND Chromium
So question is, how do I get my cursor back?
Extra: I'm using version 49.0.2623.87 m, but that's not related since my co-worker, has the same version and he sees the cursor.
(edit) currently I'm using the mouse option where I press Ctrl to see the circle which indicates where my cursor is, but this really has to be a temp solution.
(edit) I fixed it by doing a combination of things. So I'm not sure which exact thing fixed it. I removed a few programs that I installed after it still worked. I uninstalled about 4 of them. Also I did an update of my graphics card and then did a reboot. So it could be either the graphics card update, the software uninstall and/or the reboot.
I had the same issue. (note this question might be a duplicate of this one)
Following the advice on the Chrome forum here I changed the Quantization Range in my Intel HD Graphics Control Panel from "Default Range" to "Full Range". The touch pointer (grey circle) appeared immediately.
If that doesn't help you may have to change refresh rate too. Changing from 59p Hz to 60p Hz or some other refresh rate might help.
This should also help.
Open the mouse control panel.
Select the Pointer Options tab in the Mouse Properties window.
Then enable Display pointer trails option.
In case you don't like or are getting annoyed, like me, due to the trailer. Move the slider to the Short position and the trailer becomes near to non-existent or invisible.
I fixed it myself, yet I'm not exactly sure how I did it. I edited my original post and added the solution in the last paragraph.
Had the same on my Asus laptop with Chrome 66
Resolution that worked for me
Graphics Control Panel > Display > General Settings > Scaling > Change to Scale full screen.
OFF your Asus Eye Care Switcher.
I am posting this as answer because above mentioned answer didn't work for me but I had this issue when I had a monitor attached to my laptop, for development work. I played around with my display settings and discovered that IF the scale on my second monitor did not match the scale on my laptop, the mobile development mode cursor would disappear. (windows 10)
If this is an issue for anyone just go into Display settings -> Display -> Scale and Layout --> make sure that both your laptop/desktop matches the display scale of your second monitor.
Hope this will help.
I want to switch tabs with the Ctrl+Page Up/Down shortcuts on Chrome (using the latest version). It always works correctly when I use the left Ctrl button, but with the right Ctrl button, it only works properly on some days. When it doesn't, it becomes page up/down instead of correctly being next/previous tab. I usually browse tabs for the same few sites, so I don't think it's due to the websites. I'm not sure what causes this. Is this supposed to be happening? How can I make the shortcut always work when using right Ctrl?
Edit: Found that it's basically any "ctrl+" shortcuts and not just next/previous tab. Also, I changed my keyboard recently, but this problem has existed since my old keyboard which I've used for 4 or more years, over at least two different computers, and Chrome is the only browser I use so I don't know if this problem will still exist if I switch browsers.
Your right ctrl button is not working properly (hardware problem). Maybe it's damaged or somewhat.
Some pages maybe does not alove that shortcut's. I'm saying this because i found that on some pages, and my shortcut's doesn't work on them.
I don't see other posible solutions for that.
For some reason in the latest versions of Canary (and I reinstalled it a couple times) no longer allows you to change elements in dev tools by clicking on them. The only way I can go through the DOM in the elements tab is with the up and down arrow keys which takes forever.
I can use the magnifying glass to select things, but then can't go further into their children elements without using the arrow key. Clicking on elements does nothing at all.
How to fix?
I was seeing this too... seems devtools can get in a funky state. The solution is to:
open devtools
click the traffic light icon and click Settings
scroll down and click Restore defaults and reload button
This fixed it for me...
I had this issue too. I noticed that although you can't click on the element itself, you can on the white space on the left of it, with the same effect.
If we use a simple HTML Select element:
<select>
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
<option>Seven</option>
</select>
And view this element in IE10+ on a Windows 8 touch-enabled tablet, we find that when the user presses on the drop-down the list repeats, starting at the top of the list again. I understand this is the default functionality but I've been asked to disable it, and stop/snap to the last element. Despite my research and efforts I haven't been able to disable the repeating scroll.
I tried -ms-scroll-chaining but that didn't work (further found that it doesn't apply to my situation), per this link "-ms-scroll-chaining ...prevents the entire page from swiping when the scroll area is fully at one end." Other examples discuss XAML solutions (e.g., updating a combobox ItemPanelTemplate elements CarouselPanel to StackPanel) which doesn't help me because my issue is in an MVC web-page using HTML and CSS.
I think that such behavior is going to be expected by W8-touch users and it should not be prevented.
I doubt that there is an option just for that. If that really bothers you (or your client) you should be able to "solve it" by using javascript-based <select>-replacement solutions like Select2.