I failed to find a way for changing html element background color according to the model entity state property (active will be green, not active red ....). The easiest procedure I thought about is to bind those 2 attribute/property one in the view and other in module, like I used to do in WPF. But unfortunately I failed to find any simple reference how to do it.
cshtml:
<div class=" mybox" style="background-color:#contact.color">
<label asp-for="#contact.Name"></label>
<label>#contact.Status</label>
</div>
Related
If you visit www.arbetsformedlingen.se from a mobile, you will find a menu.
If you open that menu, you can only access items within that menu since tapping outside of the menu will close the menu.
If you for some reason are using a keyboard, you cannot tab out of
that menu.
However, visitors who uses the screen reader VoiceOver in IOS can simply move out of that menu by using the swipe left/right gestures to access the previous/next object in the DOM.
Question: Is there some way to prevent those users to access objects outside of the menu when the menu is visible?
An unsuitable solution due to the CMS would be to place the main content and the menu on the same node level, like in the simplified code below:
<body>
<div class=”maincontent” aria-hidden=”false”>
// Main content.
</div>
<div class=”mobilemenu” aria-hidden=”true” style="display:none">
// Menu.
</div>
</body>
When the menu is opened, the aria-hidden and display:none are toggled in order to just show the page contents or the menu.
Another unsuitable solution would be to toggle aria-hidden to every other object when the menu is opened, but that is impossible due to performance issues.
So, any piece of advice, thoughts etc are very welcome!!!
Using HTML5, you can set the "tab-index" to positive numbers on the elements within the menu. This will set focus to those elements. `
<div class="menu-container">
<div class="menu">
<div tabindex="1">Menu Item 1</div>
<div tabindex="2">Menu Item 2</div>
<div tabindex="2">Menu Item 3</div>
</div>
</div>
This may not be the best solution depending on what your trying to accomplish and what your code structure looks like.
You'll want to be sure to use the "tab-index" attribute correctly as to not break accessibility.
Good description and example
WebAIM-tabindex-accessibility
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 have been using display.none, for the hid-whens for example, all the hidden fields were kept in a section and section was hidden from web by using Display.none.
This is working for Internet Explorer till IE 9, but for IE 10 all the hidden fields are shown.
Can anyone help in this matter. Any alternative or approach.
Without seeing the page it sis very difficult to guess.
Try validating the html through one of the many online html validators as something may not be closed or Notes might have given you an unwanted code addition .
Try adding a background color to the css #wrapper to make sure the css is being called.
Take a copy of the form and start removing all other elements one section at a time to see if something else is causing the issue.
Add {meta http-equiv="X-UA-Compatible" content="IE=10;IE=9; IE=8; IE=7; IE=EDGE" /} as the very top meta tag and see if that fixes it. Replace the curly braces obviously.
All the best in finding the issue.
It sounds like just the section element is getting hidden. Without seeing the code I can't tell why that changes between ie 9 and 10 but ie is famous for having varying behavior between versions.
One alternative that comes to mind: You could wrap the section and the fields in a DIV element using pass thru HTML and set that div's style to display:none. That is pretty standard and should work across browsers.
Update: To give you an idea what I'm talking about, check out this jsfiddle.
HTML:
<form>
<div class="wrapper">
<input type="text" name="Field 1" /><br />
<input type="text" name="Field 2" /><br />
<input type="text" name="Field 3" />
</div>
<span>Some text that won't be hidden.</span>
</form>
CSS:
.wrapper {
#display:none;
}
You can remove the # next to the display:none and see the difference, even in IE 10.
You'll need to look closely at the HTML being rendered by Domino and make sure that in fact all the fields you are trying to hide are surrounded by the DIV that is hidden.
I'm using groovy to render templates in Play framework. I have a checkbox inside a list loop:
<input type="checkbox" name="chkUser[]" id="chkUser{users.getId()}" value="${users.getId()}">
How can i get the state of the checkbox array in Controller page.
Came across this a couple of monthes ago. It seems you can use find those back in controller using :
public static myFormFunction(boolean[] chkUser) {
...
Not sure of it and I cannot check this right now.
Take a look at the official documentation.
It can be achieved using hidden fields for every checkbox.
<input type="hidden" name="HdChkUser${users.getId()}">
<input type="checkbox" name="ChkUser${users.getId()}">
If the state of the checkbox changes then updating the hidden field value. Which can be used in for msubmission.
I would like to know how Wikipedia does its search field. What I mean by this is two things: Its gradient and its button.
How does it make a gradient in the field? This can be easily done with CSS cross browser at this point, but when you do the IE CSS code, it aliases the text. Wikipedia has a gradient background, but the text is still anti-aliased! How do they do that?
Also, how did they put a clickable search button INSIDE the text field?
Thanks.
It appears that the actual search input has no styling -- meaning no border and a transparent background. The containing div is styled to look like an input field (border and gradient). The clickable button is inside the div but not inside the actual input element.
You could just look at the code. The search box as it appears is only a div element with a border. This div itself has the gradient set via CSS (background-image). As you can see the button element is also not inside the text field.
<div id="simpleSearch">
<input id="searchInput" name="search" type="text" title="Search Wikipedia [f]" accesskey="f" value="" />
<button id="searchButton" type='submit' name='button' title=""><img src="[x]" alt="Filltext" /></button>
</div>