Clicking in spinner in Chrome datapicker causes continuous scroll in Chrome.
To reproduce, open latest demo
http://www.ok-soft-gmbh.com/jqGrid/OK/dateInput_48_bootstrap.htm
from answer
How to use native date picker in both form and row editing in free jqgrid
in Chrome , click in date to edit.
Click in up or down spinner and keep cursor in this spinner. Date scrolls indefinitely.
How to fix this so that single click increments or decrement value only by +1 or -1 ?
I think that one have to use use ::-webkit-inner-spin-button which allows to customize input spinners in CSS3 (see here). The problem is just it's really difficult to find the documentation of CSS properties which can be used in the case. The only well-known setting is
input[type=date]::-webkit-inner-spin-button {
display: none;
}
which just remove the spinner. No spinner - no problem. It's probably exist a better way to customize the spinner, but I didn't found it.
Related
I have a toolbar of buttons that are gray by default but when one button is clicked on that button is made white to indicate that that is the page you are on. This is achieved using a class and the below css.
.btn-details:focus {
color: #fff;
}
This works fine except when I change windows and then go back. For example, if I have my page open it is working find, then I switch to an Excel window and then back to my page the white highlighting is now gone. How can I keep the button in focus even when the window is changed?
Unfortunately I think you need to take your time to focus on how CSS works.
You are using the: focus selector. Know that it does what you asked it to. If the button loses focus and your style no longer holds.
I think this is exactly what happens when you use other apps.
I advise you to add a CSS class on the button clicked and to remove this same class on the other buttons.
If you have difficulty implementing this, please come back to me. I would make a small example depending on your level.
See you soon !
I have an input type date on a web form. When a user prints the form, the clear button (the gray circle w/ an "x" in it) prints next to the date. Obviously this isn't ideal. I have played around w/ a few moz kits but I cant make that clear button invisible on print, no matter what I have tried thus far. Also, the form is being used exclusively in Firefox. Any advice on making this work would be greatly appreciated!
I have tried using this in a css document under #media print {}
input[type=date]::-ms-clear {
display: none;
}
I have tried the same thing with:
::-webkit-search-cancel-button
neither has any effect.
It is not possible to remove the clear button in FireFox. The ::ms-clear feature is only for Microsoft browsers, as described in the MDN documentation.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3A-ms-clear
You need to design your own date picker from scratch or use one from a library.
Please help!
Recently (probably with version 66), Chrome began displaying its autocomplete-suggestion drop-down on the initial mouse click into a search field instead of waiting until a character is typed.
How do I make Chrome go back to not displaying suggestions until I begin typing?
I have always made use of Chrome's suggestions drop-down for search fields, but I don't want or need to see a list of random suggestions just because I've clicked into an input field. I only want to see suggestions that match what I start to type (which is how it always worked until recently).
I tried disabling the "Single-click autofill" flag and even the "Show autofill predictions" flag as well, but these flags don't seem to affect the situation. Perhaps the term autofill in these flags doesn't refer to the same thing?
If anyone can help me with this, I'll be your best friend forever and ever!
Thanks for reading this.
I was having the same issue recently with a datepicker input. To get around it, I wrapped my inputs in a form and set autocomplete="off" in my form tag, as Chrome only recognizes that property for forms and not individual inputs. I added a keyup event so that if the input has text in it, autocomplete is re-enabled:
if (val.length > 0) {
$('#myForm').attr('autocomplete', 'on');
} else {
$('#myForm').attr('autocomplete', 'off');
}
You can also add an onBlur event to disable autocomplete suggestions each time you leave an input.
In most cases there doesn't seem to be any visual indication which must be difficult for users who rely on the keyboard.
This seems a really simple question but I've scoured the internet and can't find an answer. My first idea was to use Firefox's developer tools to create a visual indication using *some element*:focus {outline: 2px solid red;} but of course you'd need to already know which element was receiving focus for that to work, so I tried the universal selector *:focus {outline:2px solid red;} but that didn't work.
So can anyone answer the seemingly simple question of what element is gaining focus ... and for bonus kudos can anyone provide a code snippet that would allow me to actually see what is happening?
In the case of a modal dialog box, the focus should go back to where it were before the box appeared.
For example, if the dialog box appeared upon clicking a button, the focus should return to that button when the dialog is closed, regardless of how it has been closed (mouse click or enter on a close button or escape key).
The most keyboard accessible apps and websites are those where you always know where the focus is. The blur function must be banned; it should never have existed.
It depends on the implementation where focus goes after closing the dialog.
However, the WAI-ARIA best practices for keyboard interaction state the following for dialog in a note:
When a dialog closes, focus returns to the element that invoked the dialog […]
In other words, the link or button that opened the dialog is focused.
I checked the native implementation of the HTML <dialog> element in Firefox and Chrome.
Chrome 78: After leaving the dialog by means of the escape key, focus is set back on <body>.
Firefox 71: Did not implement any focus logic yet. Focus is not limited to the dialog, neither is it put anywhere else after the dialog closes.
For all other UI libraries there is different ways to implement the dialog, which will result in different elements being focussed after closing:
1 Conditional rendering: The dialog doesn't even exist in the DOM if it's not visible
2 Hiding the dialog via HTML hidden=true or CSS only display: none
In case 1 focus will be set on <body> in Chrome and Firefox.
In case 2 both browsers keep the focus on the element inside the (now hidden) modal.
If accessibility is a concern, the evaluation of different libraries should take that into account.
I have an issue in our currently running .net application. we are using autocomplete extender control associated with city textbox for city selection. Due to slow internet connection, when user uses this application with partially rendered, it is not suggesting for entered city (highlighted in red).
I have used Page_Init event for first disable the textbox, than enable it on Page_Load, but it's not working (to prevent user for enter text when the page is not loaded completely).
Is there any solution to overcome this problem?
After loaded successfully,
So you want to disable the textboxes until the page has loaded? I am not sure if it will work like you want but have you considered using jQuery to disable the textbox? For example here, here, here