I want to add a simple inline style to my div tag if a certain criteria is met.
I am able to apply the "disabled" class successfully, but I can't get my cursor style to show up.
<div class="item #(item.AvailableTimeSlots == "0" ? "disabled" : "")" #(item.AvailableTimeSlots == "0" ? "style='cursor: default;'" : "")>
any pointers?
Working Snippet
<div class="item #("0" == "0" ? "disabled" : "")" #Html.Raw("0" == "0" ? "style='cursor: default;'" : "")>
Adding Html.Raw() fixed the problem for me. Without it, you end up with something like:
<div class="item disabled" style='cursor: default;'>
I tried a few different browsers, and each gave different results when inspecting the DOM. IE8 mangles it; Chrome incorrectly reworks it; IE9 appears to correctly make it well-formed.
Few notes:
#James' solution that removes inline styles is a good one. The current code is really hard to read, and inline styles are rarely a good idea anyway.
It looks like item.AvailableTimeSlots should be an integer, not a string.
Any pointers?
It's always best to try avoid inline-styles whenever you can. I would advise you move your cursor code into it's own CSS class & work purely with classes e.g.
CSS
.default {
cursor: default;
}
.disabled {
...
}
View
#{
var itemCLass = #item.AvailableTimeSlots == "0" ? "disabled" : "default";
}
<div class="item #itemClass" />
Related
I am trying to make a mat-card navigable from the keyboard. Right now, when pressing tab the element is focused however the redirect event (should be the same as the click event) isn't triggered when pressing enter.
I've tried keydown.enter and onKeyDown (from a11y package) but no success so far.
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown.enter)="addQueryParam(group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript
addQueryParam(groupName) {
this.router.navigate(['/data'], { queryParams: { ['groups.title']: groupName }, queryParamsHandling: 'merge' });
}
Any idea how to solve this issue?
TIA,
Isabela
I suggest you two things:
try using (keyup.enter)=.... I used it a couple of times and it worked well
If that doesn't work try using (keyup) or (keydown) and in your function check if the key code is 13 (enter key code), something like this:
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown)="addQueryParam($event, group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript:
addQueryParam($event, groupName) {
if($event.keyCode === 13){
this.router.navigate(['/data'], { queryParams: ...);
}
}
If i remember correctly you can check the type of the event in a field like event.type, or something like that.
Additionally check this discussion out, because theese functions are not well documented, and here you can find som infos :
What are the options for (keyup) in Angular2?
EDIT
I also found this very useful article: https://medium.com/claritydesignsystem/angular-pseudo-events-d4e7f89247ee
I'm developing a web app with MVC 3 / Razor and jquery-mobile. In jquery-mobile, normally you can add data_inline = "true" to an object's attributes and it will prevent the element from stretching all the way across the screen, like so:
#Html.DropDownListFor(m => m.value, options, new { data_inline = "true" })
#Html.ActionLink("Text", "Action", null, new {data_role="button", data_inline="true"})
Both of those work fine. But on a checkbox...
#Html.CheckBoxFor(m => m.value, new { data_inline = "true" })
... it doesn't seem to do anything, and I still get a nasty stretched checkbox. Adding data_role="button" doesn't help (not that I expected it to).
Is there any reason why this is so? Any good way I can get my checkbox to not be stretched without resorting to manual CSS modifications?
The jQM Checkbox does not support data-inline. All you need to do is change the label CSS property display to inline-block.
<label class="inline">
<input type="checkbox" name="chk0" class="ui-btn-inline" />Check me
</label>
.inline {
display: inline-block !important;
}
I am using Knockout.js and I have the following binding to add spacing (margin-left).
<div class="editor-field" data-bind="style : { 'margin-left' : ($root.getHierarchyLevel($index()) * 30 + 'px')}">
This works in IE9 and IE8 compatibility mode. But when I run the same code in IE8 on Windows XP, I do not see any spacing.
I created a jsfiddle example. This add spacing before blah in IE9 but not in IE8.
Any ideas??
From: http://knockoutjs.com/documentation/style-binding.html
"If you want to apply a font-weight or text-decoration style, or any other style whose name isn’t a legal JavaScript identifier (e.g., because it contains a hyphen), you must use the JavaScript name for that style."
Try this instead:
<div class="editor-field" data-bind="style : { 'marginLeft' : ($root.getHierarchyLevel($index()) * 30 + 'px')}">
For people having the same issue, I had to use css binding to get this to work. We cann also directly add "class" binding as part of attr.
Had to change, as it was not working in IE8
<div data-bind="style: { display: $data.items.isLoading() ? 'flex' : 'none' }">
to
<div data-bind="css: { 'searchLoaderFlex' : $data.items.isLoading(), 'searchLoaderGone': !$data.items.isLoading() }">
or
<div data-bind="css: $data.items.isLoading() == true ? 'searchLoaderFlex' : 'searchLoaderGone'">
How could I correctly use the following?
{ bool submitter = value; }
...
#(submitter ? "" : #"<a href=""" + Url.Action(actionName, "Queue") + #""">")
<div>
...
</div>
#(submitter ? "" : "</a>")
My error is that the anchor tag definition is being outputed like it should be in a HTML code right to the web browser and instead of seeing a link around the <div> I see the <a href="... etc.
Why?
If you don't want that encoded, then you need to use the Raw extension method:
#Html.Raw(submitter ? "" : #"<a href=""" + Url.Action(actionName, "Queue") + #""">")
<div>
...
</div>
#Html.Raw(submitter ? "" : "</a>")
This is because you cannot put block level elements, like div, inside inline elements like a, unless you use HTML5. I guess from your description you aren't.
If you're checking in a browser DOM inspector, you will see your code looks something like this:
<div></div>
<div></div>
<a></a>
The alternative is to change your div to span and set display: block on it in CSS if you require.
Also, that kind of logic would be better placed in a ViewModel.
Solution that I've: found
#(new MvcHtmlString(#"blah blah"))
I'm using the pageProperty function to drive some of my menus that are in my layout. I need to apply specific classes to links depending on which meta.nav pageProperty returns. Right now, it looks like this...
<g:if test="${pageProperty(name:'meta.nav') == 'support'}">
<g:link class="selected" ...>support</g:link>
</g:if>
<g:else>
<g:link ...>support</g:link>
</g:else>
I'd like to clean this up, however, this does not work
<g:link class="${pageProperty(name:'meta.nav') == 'support' ? selected : null}" ...>support</g:if>
I've tried several different variations of paranthesis and none seem to get what I need. For example:
${(pageProperty(name:'meta.nav') == 'support') ? selected : null}
${(pageProperty(name:'meta.nav') == 'support' ? selected : null)}
Just can't seem to get it to act right. Any help is appreciated.
As a wild stab in the dark, how about:
${ pageProperty(name:'meta.nav').equals( 'support' ) ? 'selected' : null }
Not as groovy, but might be less confusing to the parser (it looks like something somewhere is getting confused and dumping == support out where it shouldn't)
I would try making the true condition a String:
${(pageProperty(name:'meta.nav') == 'support') ? 'selected' : null}
It may be trying to access a variable named selected within the GSP script, which would be undefined.
Hope that helps.