I am using custom policies for our sign-up/sign-in etc user flows. When navigating to the sign-up form in Chrome & Edge, the form displays scrolled part-way down the screen. I believe this is because the lowest input field (a check-box) has an autofocus attribute, i.e.:
<input name="xxx" id="xxx" autofocus="" type="checkbox" value="True" />
I can verify that the lowest input (the checkbox) has focus as when I press the space-bar, it toggles.
It appears that Microsoft's javascript in the page is dynamically setting this autofocus attribute. Searching through the javascript it looks like every input has an AUTOFOCUS=True property:
{
"USER_INPUT_TYPE": "CheckboxMultiSelect",
"IS_TEXT": false,
"IS_EMAIL": false,
...
"OPTIONS": [{
"DISP": "I agree.",
"VAL": "True",
"PRESEL": false,
-->> "AUTOFOCUS": true <<--
}
]
}
Is there any way to change this autofocus behaviour? Currently it is very annoying as it means that Chrome users see the bottom half of the form when the page loads.
I think this is essentially answered as JavaScript is now available for use on custom pages.
https://azure.microsoft.com/en-au/resources/samples/active-directory-b2c-javascript-msal-singlepageapp/
I'd suggest using JQuery to deselect the input element or remove the tab index value after rendering, but there are a myriad of options now available.
Related
How to prevent browser from remembering the password fields ... especially FireFox ( using jsf 2.0.9 ) I tried autocomplete= "off" ,still not working , Is there any possibility for this without migrating to jsf 2.2 ? Am using "h:inputSecret"
The autocomplete attribute is ignored and therefore not rendered in the output html. I had a similar problem, i wanted to use placeholder attribute. I ended up using jquery to accommodate the need
<script type="text/javascript">
jQuery(document).ready(function() {
document.getElementById("entityForm:searchField").setAttribute('placeholder','Search');
});
</script>
You can use this to set the autocomplete attribute
document.getElementById("passwordField").setAttribute('autocomplete','off');
You will never find a way to achieve this, cause the autocomplete in this case is happening on the client-side.
You can make it a little more difficult, but at the end of a day it's the users browser which decideds whether to store a password or not. If a user wants to store the password, he can always do it. (A Lot of Browsers are simply ignoring things like autocomplete="false", because its a user decision, nothing the website should decide.)
Hi all thanks fr yur solutions , Fixed the issue , just made some work around so that code is compatable with both Firefox and Chrome ,
Use "p:inputText"(Primefaces Component) instead of "h:inputSecret"
Code :
p:inputText onfocus="validate('Id')"
use javascript to change type to "password" upon focus :
function validate(Id){
document.getElementById(pwd).type = 'password'};
then comes the important workaround,adding tags before and after
<input type="text" name="faketext" id="faketext" style="display:none;"/>
<input type="password" value=" " name="fakepassword" id="fakepassword" style="display:none;" />
<!-- - After <p:inputText> -->
<input type="password" value=" " name="fakepassword1" id="fakepassword1" style="display:none;"/>
Thus issue Resolved.
I'm trying to customize the form layout of edit/add/del dialogs but the problem is that the height of my custom fields are not following the standard height (from the fields created automatically by jqgrid). Here is an image:
What I want is that the height of td.DataTD from my custom fields 'Responsável' and 'Componente' keep the same as the other fields. Here is the important part of my code:
beforeShowForm: function(form) {
$('#tr_responsavel').html('<td class="CaptionTD">Responsável</td><td class="DataTD"> <table><td><select role="select" id="resp" name="responsavel" size="1" class="FormElement ui-widget-content ui-corner-all"><option role="option" value="1">Usuário</option><option role="option" value="2">Área</option><option role="option" value="3">Grupo</option></select></td><td><input id="inputResponsavel" type="text" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td><td> <img src="img/search.png" width="25" height="25"></td></table></td>');
$('#tr_componente').html('<td class="CaptionTD">Componente</td><td class="DataTD"> <table><td><input id="comp" type="text" role="textbox"></td><td> <img src="img/search.png" width="25" height="25"></td></table></td>');
},
Why you replace existing jqGrid fields with another HTML code? Additionally it seems strange to set <table> inside of the field 'Responsável'. How you imagine that jqGrid get the results from such custom fields? Is it not more easy to append or prepend standard input fields of the Add/Edit form with additional information. In the case the standard fields with the standard ids will stay unchanged and you will have less problems. jqGrid will get the information from the fields without any problems. If one uses jQuery UI Autocomplete or jQuery UI Datepicker controls it do that.
If you really need custom field you should follow the documentation and use edittype: "custom". Look at the demo from the answer for more information.
I'm trying to use HTML radio buttons in my Spotify app.
When the Inspector tool is used, the code for radio button is present there, but the radio button is not getting rendered in the browser inside the Spotify client. I am also getting the same result for the checkbox.
The same code is used with normal browsers like IE, Mozilla, or Chrome and the radio button gets rendered without any trouble.
Can anybody tell me why the radio button is not getting rendered in the sandboxed browser inside the Spotify client?
Thanks,
When looking at the radio button in the inspector, you can see that the input tag is getting the -webkit-appearance:none attribute set in the sp://import/css/shared.css and sp://import/css/reset.css files.
button, input, textarea {
-webkit-appearance: none;
font-family: inherit;
font-size: 12px;
}
The sp://import/css/adam.css and sp://import/css/eve.css files import the sp://import/css/shared.css file, which is how you are probably getting that attribute. The behavior only exists for the radio and checkbox types because the other input types are overridden elsewhere.
Tip: If you view the css attributes in the inspector, you can actually check them to remove or re-add the style.
Solution:
<input type="radio" style="-webkit-appearance:radio" />
<input type="checkbox" style="-webkit-appearance:checkbox" />
Be warned: It may have been the intention of the developers to not show radio/checkbox buttons, so your app may have approval issues because of the UI guidelines.
Regards,
Kevin
This post says it's a bug:
Spotify - Using Checkbox UI elements
(didn't check on spotify api doc tought...)
I'm trying to set icon to <aui:button> like on this tutorial.
But solution described there doesn't work well in my case, because I have a table and on each row I have a button with different resourceUrl. Like this:
<portlet:resourceURL id="saveReport" var="saveReportURL">
<portlet:param name="reportId" value="${report.reportId}" />
</portlet:resourceURL>
<aui:button onclick="location.href = '${saveReportURL}'">
Is it possible to set icon in <aui:button> without using JavaScript as described in tutorial?
Thanks
You can write this below code for setting icon in liferay alloy button
<aui:button type="cancel" cssClass="btn-info" icon="icon-upload-alt" iconAlign="right" value="upload" />
you need to use the icon attribute for this setting "Icon glyphs"
you need to use cssClass for adding extra design button class for the designing
you need to set iconAlign attribute for left or right side of the button text value
You should be able to add an icon to a button without using JavaScript by adding one of these Icon CSS classes to your button. For example, if you wanted to create a button with a calendar icon, your code should look something like this:
<aui:button class="icon-calendar" ... />
I have an HTML table on a page that embeds a tiny Silverlight app to provide cross-browser "Copy to Clipboard" functionality. The entire "app" is a single button that copies a value to the clipboard from the row in which it is embedded. I am also using the jQueryUI Dialog widget for other areas of the page. When the dialog opens it is displayed on top of all other content on the page except those Silverlight buttons. For some reason I cannot get the modal dialog to sit on top of those buttons and it's obviously a big usability issue.
I've done quite a bit of research and have yet to find a solution that works. I'm sure this problem stems from my lack of in-depth understanding of Silverlight's relationship to the DOM and how it affects layout and and styling.
I've tried several things, including setting the "windowless" property to true and the background to "transparent", I've also played around with some styling workaround I found on blogs. Unfortunately nothing has worked.
Here's the code used to instantiate the Silverlight plugin for each row.
Silverlight.createObjectEx({
"source": src,
"parentElement": cell,
"id": String.format("pluginHost_{0}", id),
"properties": {
"height": "16",
"width": "16",
"background": "transparent",
"windowless": true,
"enableHtmlAccess": true,
"version": "4.0.50826.0"
},
"events": {
"onLoad": null,
"onError": null
},
"initParams": String.format("url={0}", item.Url),
"context": null
});
As I said before, it's just a small (16px) button that takes a URL from its associated data row as an initialization parameter and copies that to the clipboard whenever the button is pressed. Because data is loaded dynamically via an external web service, I am loading the plugin using the Silverlight.js library so that I can pass in data as the plugin is initialized on each row.
Can anyone tell me why the buttons in my table display on top of the modal dialog (and any other element I move on top of the table)?
Here's a screenshot of what I'm seeing.
Thanks!
I faced a similar problem where I was trying to display a gif progress image over a silverlight container. For this I had a pre-written javascript. It did not work as expected because silverlight always used to come on the top of other elements in the webpage.
I tried the following which worked for me:
add the following where you are creating silverlight object in your webpage:
<param name="windowless" value="true" />
Example:
<div id="silverlightControlHost">
<object id="SilverlightObject" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="800" height="500" style="z-index:1" >
<param name="source" value="ClientBin/GIF2.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="windowless" value="true" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
</div>
I also had to use the z-index property in addition to the above parameter.
To show one above another, I simply change their z-index using javascript, as required.
Example:
var divelement = document.getElementById("element_to_be_on_top");
divelement.style.zIndex = 999;
Reference:
http://weblogs.asp.net/dwahlin/archive/2010/05/10/integrating-html-into-silverlight-applications.aspx