Mobile Safari app on iOS 6 appears to have an issue with <optgroup> elements inside a <select multiple="multiple"> element. I've created a demo jsfiddle that works fine in iOS 5 Safari but appears not to work on iOS 6. I'm using html from the second w3c example on this page for the demo so I think it should be valid but I'm wondering if there's something I'm missing in the formatting and if the best workaround in the meantime is:
<option disabled="disabled">Option Group Label</option>
Related
I'm using autocomplete="off" for inputtext in blazor but its not working for Edge 18 version.
also trying autocomplete="anytext" but still its not working. both autocomplete="off" and autocomplete="anytext" are working fine for every browser.
Is there any other way to keep away autofill box from InputText?
On Edge 18 is only partially supported, read here : https://caniuse.com/?search=autocomplete
The only other possibility, I think, is to disable it from browser settings.
I'm facing an accessibility issue with Safari browser on tabbing. Anchor tags are not getting focus on tabbing.
I have checked with and without tabindex. Setting tabindex="0", but nothing changed, not sure this is a bug in Safari or not. Tested in other websites including https://www.microsoft.com , the same experience.
Safari Version 10.1.1 (11603.2.5)
Mac : OS X El Capitan
Button element is getting focus, only issue is with anchor tag
<a id="footer-linkedin-link" target="_blank" class="social-footer-icon" aria-label="Follow on LinkedIn" href="https://www.linkedin.com/"></a>
Any valuable inputs will help me. Thanks in advance.
You can't have an empty anchor tag - there's nothing to tab to. That's an HTML validation error so browsers may handle it differently. Without your CSS I'm not sure exactly what you should do, but I'm guessing you really want something like this:
<a target="_blank" href="https://www.linkedin.com/">
<span id="footer-linkedin-link" class="social-footer-icon" role="img" aria-label="Follow on LinkedIn" ></span>
</a>
The icon being inserted with CSS needs to be the content within the anchor, be properly cast as an image using role="img", and that should have the aria-label.
I am trying to automate a hybrid app build in ionic2/cordova and typescript
HTML page somewhat looks like
<ion-input _ng_somename class="header-signin-part">
<input class="header" placeholder="heading" color="abc">
When I am trying to identify element using Xpath I am not able to
//ion-input//input[#class='header']
//input[#placeholder='heading']
I tried various other combinations but in vain. Can anybody tell me why am I struggling to identify elements. is it something in ionic which is stopping the element identification(ionic specific tags for not identifiable in webview)
Steps whih I am doing
Launching the app using appium
Switching the context with driver.Context="WebView_1";(C# way of switching context)
Opening the safari browser and navigating to "localhost:27753" (Note: I have already started the webkit debug proxy on same port)
Identifying the elements
Also, app gets close everytime after some time without I doing anything. It doesn't hold on to webview
I am using only appium(not protractor) for automation
there are multiple ways you can locate this element:
<ion-content class="scroll-content ionic-scroll has-header">
You can try:
xpath: //ion-content[#class='scroll-content ionic-scroll has-header'] (please bear in mind, it looks like there are two space chars between ionic-scroll and has-header)
xpath: //ion-view[#view-title='Home']/ion-content
css selector: ion-content[class='scroll-content ionic-scroll has-header']
css selector: ion-view[view-title='Home'][class='pane']>ion-content
I know there are plenty of answers to this question already, but none of them work now. Probably due to Bootstrap update.
Here is jsfiddle: http://jsfiddle.net/N0ir/Yh33b/
Who can figure this out?
<select>
<option value="1">Misha, davai po novoi</option>
</select>
.caret {
display:none;
}
You cannot change or alter the caret using css as the select element is generated by the browser by default (that's why they look different from browser to browser). You need to use js/css to get the change you want as well as keep it browser compatible. Here is a link to a nice one for Bootstrap users:
http://silviomoreto.github.io/bootstrap-select/3/
I'm looking for a JavaScript/jQuery plugin which allows to use a fixed header on mobile browser.
iScroll seems to be the most popular solution but I was interested in a plugin that isn't constantly calculating the position of the header while scrolling.
The idea is the same used by jQueryMobile fixed toolbars, while the user is scrolling the header disappears and only reappears after finishing scrolling.
It's more simple than what you think.
I use this code:
<div data-role="header" data-position="fixed">
<h1>Fixed Header!</h1>
</div>
See more info:
http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html