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.
Related
This is the (new) native datepicker found in Chrome/Edge on desktops.
As far as I can tell it isn't respecting my OS/browser color scheme (dark/light) and it's always rendering as white. Is there way to overwrite this behaviour in CSS?
Or is there a way to provide custom styles, e.g change the highlight color.
Thanks for any help.
P.s: I tried following the instructions given in Microsoft's blog post, but didn't get it to work (forced-color-adjust)
Live Example (run in Chrome/Edge)
<br />
<label>force-color-adjust: auto <input style="forced-color-adjust: auto;" type="date"></label>
<br />
<label>force-color-adjust: none <input style="forced-color-adjust: none;" type="date"></label>
If you want to apply some styles to the date picker then you can refer to this answer.
I also try to check the blog-post and your sample code.
I see the date picker shown in the blog and noticed that they are talking about Windows High Contrast.
That means to get a similar output shown in that blog, you need to turn on the High Contrast mode on your Windows 10 OS.
You can refer to the steps below to turn on/off High Contrast mode.
Click the right mouse button on the desktop screen.
Click on personalise option.
Select the Background tab from the left sidebar and click on High Contrast settings option.
Toggle the button to turn on High contrast mode.
Now, if you see the web page in the MS Edge (Chromium) browser then you can see the same result as shown in the blog.
I suggest you also try to check the code samples mentioned in this link. It can be helpful to apply CSS to elements, especially for contrast mode.
I'm trying to inspect the shadow DOM for certain HTML5 controls, like the date picker for the input type="date" and the actual suggestion dropdown list for inputs bound to a datalist. Preferably in Chrome, but other browsers will do too.
I've found that by enabling the Shadow DOM setting in Chrome's inspector options allows me to inspect the shadow DOM for the actual input (which includes the ::-webkit-calendar-picker-indicator arrow to show the datepicker) but not the datepicker itself:
The same goes for the datalist. It appears as these controls are not part of the input, but I also can't find them anywhere else in the elements panel.
Is it possible to inspect such elements?
Small edit for clarification: I'm actually looking for which pseudo-classes apply to which controls. There's plenty of sites that list some of them, but I have yet to find a source that manages to list ::-webkit-calendar-picker-indicator for the datalist element, which does get applied. I'm looking for more of those sneaky bastards, and the best source for that of course is the horse's mouth.
Looks like the actual picker is loaded in an entirely different layer (basically a different window without the titlebar). So I guess the answer is: no, you can't.
I agree it would be great to be able to customize it. And similar popups too. Mozilla in XUL has display:popup which is used by context menus, flyout and similar things. Would be definitely great being able to use that in userland content too.
The calendar popup of Google Chrome is not in Shadow DOM.
It's in a separated page mapped to a popup window. See WebPagePopupImpl.cpp
And the popup content is written by HTML/JavaScript.
I have a code fragment similar to this:
<select class="abcd" id="aaaa" />
<option selected>yes</option>
<option>no</option>
</select>
Firefox shows Yes as a default option when page loads.
But, same is not true with Chrome, and Safari. The select box shows up with a blank box and I have to click on the box to reveal the options and see what's the default one (Yes was chosen when the box is dropped down).
Can you please me understand if I'm missing some boolean argument here? Thanks!
? It actually seems to work as expected in chrome and IE (sorry don't have Safari handy).
Did you try looking with dev tools at the cascading and computed style rules? There might be a script or !important rule etc overriding your code.
I have also posted this question to Codiqa support some time ago, so I am not trying to turn stackoverflow into a Codiqa support center, just know alot of the guys supporting Codiqa are on here, but let me know if I am not allowed to be asking for support for a product on this site...
That aside, I have a select box with size="5" attribute that displays a max of 5 options that are populated via for loop with information from a database. The idea is for this select box to act as a listbox to show the user said information in the select box. However, Codiqa or maybe jquery mobile in general, converts any select box into a button that only can view the content when clicked on. This adds an extra and unnecessary step for my client in this instance. How can I force Codiqa or jquery mobile to honor my size attribute, so the user can see the populated information without having to click to view?
Thank you!
Chrome Browser
Codiqa
Creator of Codiqa here. This is jQuery Mobile behavior that you can disable by telling it to not enhance that form element:
<label for="foo">
<select name="foo" id="foo" size="5" data-role="none">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
We don't have a way to do this right inside of Codiqa yet, but it would be easy enough to add.
Working example: http://jsfiddle.net/bagz8/
You can programatically force select to open itself when page is available:
$(document).on('pagebeforeshow', '#index', function(){
$( "#select-choice-4" ).selectmenu( "open" );
});
This would be a workaround.
EDIT :
Then force jQuery Mobile not to style select boxes. There are several solutions but this one is probably the best: http://jsfiddle.net/bagz8/1/
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select";
});
Warning, mobileinit event MUST be initialized before jQuery Mobile is loaded. You can see it in my example.
There are several other solutions of enhancement prevention and you can find theme here, just look for a chapter: Methods of markup enhancement prevention
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">.