Radio button not rendering in Safari only - asp.net-mvc-4

I want to create a radio button in a .cshtml file. This simple code is not rendering a radio button in Safari:
<input type="radio" value="1" name="testme"/>
It works perfectly in IE8, but in Safari 5.1.7, radio buttons are not rendered. This happens only for .cshtml files.

You should have unique ids. Right now all your input fields have the same id which is invalid HTML. I don't if the rendering issue is related to this but it's a problem that needs fixing. Also AFAIK param is an invalid attribute for the <input> element.

I removed the overflow:hidden style for the <td> which was causing the radio button not to be rendered in Safari - overflow:hidden is behaving differently in Safari.

Related

Keyboard Accessibility - links not getting focus on tabbing - Safari Browser

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.

Angular2 v4.0.2 and radio FormControls

I'm just curious if anyone else has had any issues with FormControl's and radio buttons. We recently updated to Angular2 v4 and radio controls which were working before have stopped. Given the below HTML and an associated FormGroup (not shown), the radio buttons can both be selected. I really hope I'm just overlooking something simple but was curious if anyone else has experienced similar behavior.
<input type="radio" formControlName="fcAdjustmentType" value="amount"/> <label>Amount</label>
<input type="radio" formControlName="fcAdjustmentType" value="percentage"/> <label>Percentage</label>
And before it's mentioned, the "name" attribute on the element is optional according to Angular:
Blockquote When using radio buttons in a reactive form, radio buttons in the same group should have the same formControlName. You can also add a name attribute, but it's optional.

unable to identify tooltip message present for the textboxes in selenium

i am trying to automate the login functionality of a site.I want to verify whether the tooltip is present or not and to capture the tooltip text displayed for the textboxes.The tooltip is displayed when trying to click on the login btn without filling the textboxes.The tooltip text is attached to the input elements via bootstrap javascript.No tilte attribute is present for the textboxes
https://elasticbox.com/login/ is the site address.Any ideas on how to capture the tooltip text .Thanks in advance
This is not a bootstrap tool-tip as you commented for #Varun's reply.
This is just the HTML5 form validation which comes into action when you put "required" as the attribute of textfield.
Make an html file 'test.html' file using the below code:
<html>
<body>
<form name='form1' post="http://www.google.com">
<input type='email' required placeholder='email address please' />
<input type='password' required placeholder='password please' />
<input type='submit' value='button1' />
</form>
</body>
</html>
Herein, when you click on "button1" (after opening the file in browsers like: Chrome, Firefox, etc.), you will see the necessary validation under the textfield(s).
But, there is no possible way to inspect them.
You can, however, use Sikuli/Autoit to check the presence of that validation text, but that again will be a lost cause as the image of the validation messages/tooltip differs from one browser to another.
Looks like developer needs to be consulted for this.
In javascript it seems like the signin button will remain disabled until both values are filled i.e. username and password.
I am not much into javascript, may be you can consult the developer in order to understand this more.
You can refer image below:

Flash object not loading in Safari

I've built a form, and next to my form element I've placed a flash object. When the page is loaded, the form is display: block, and the flash object is display: none.
The layout looks something like (the img is there so that if the user doesn't have flash, the gif animation will play instead):
<form id="form"></form>
<div id="upload-anim-div">
<object type="application/x-shockwave-flash"
data="<?= PAL_STATIC_HOST ?>/music/introducing/flash/upload_animation.swf"
width="626"
height="600">
<param name="movie" value="<?= PAL_STATIC_HOST ?>/music/introducing/flash/upload_animation.swf"/>
<img src="<?= PAL_STATIC_HOST ?>/music/introducing/img/Anim-placeholder.gif" alt="upload animation (gif)"/>
</object>
</div>
When I submit my form, which is just to upload a file, I hide the form and display my animation div as follows in javascript:
$('#form').hide();
$('#upload-anim-div').show();
This works great in all browsers except Safari, where a big white space appears. Right clicking this white space simply gives me the following menu:
Flash movie not loaded... _not clickable_
About Adobe Flash Player 10.5.blah...
Why is the movie not loaded/loading?! If I simply display the movie when the document first loads (by removing the javascript line that initially hides it) it loads and displays fine! Any ideas would be greatly appreciated!
---EDIT---
I've now tried using swfobject, but get exactly the same problem. I used this kind of code in my javascript to embed my swf with javascript after displaying the upload-anim-div:
swfobject.embedSWF("myContent.swf", "upload-anim-div", "626", "600", "10");
Anyone have any further ideas?
Sounds like Safari tries to shave the page load time by not rendering Flash in a hidden div. How are you putting the Flash into the div, is it just an object tag, or are you using something like swfobject? If you're using swfobject you could write the Flash to the div when you reveal it.
I think you should try to embed your Flash content with swfobject:

Disabling iPhone keyboard when selecting an HTML textarea

I am trying to disable the iPhone keyboard for only some of the textAreas in an HTML document. This document is displayed in a UIWebView. I have tried the CSS webkit tags such as: -webkit-user-select:none; -webkit-touch-callout:none; -webkit-user-modify:none;. I have also tried the readonly property, but it does not suppress the keyboard, either. Is there any way to disable the keyboard for only certian text areas? I think users of my app will find it frustrating that the keyboard is popping up at inappropriate times.
do you use html for this? if yes you can use the disabled attribute <textarea name="mytextarea" cols="2" rows="2" disabled></textarea>