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'">
Related
In a Razor View I have a simple textarea
#Html.TextAreaFor(model => model.Text, new { htmlAttributes = new { #class = "form-control ckHolder" } })
to give to the back-end users a nice html support I am using cKEditor, to bind the plug in to the text area I am doing this:
CKEDITOR.replace("#Html.IdFor(m => m.Text)", {});
All works fine, but today I am started to try to implement a tag system.
<div class="tag-editor">
<span class="tag-editor-tags"></span>
<div class="tag-editor-editable" contenteditable="true"></div>
</div>
The rendering is following:
<div class="tag-editor-editable ui-autocomplete-input cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" contenteditable="true" autocomplete="off" tabindex="0" spellcheck="false" style="position: relative;" role="textbox" aria-label="Rich Text Editor, editor1" title="Rich Text Editor, editor1" aria-describedby="cke_107"><p><br></p></div>
But I wouldn't have the editor to the content editable div of tags, why I use the explicity CKEDITOR.replace with id of my textarea and I have this behaviour? It's strange, If I don't use .replace the editor doesn't work at all...
Ok, solved, I found the solution on official documentation
Inline Editing is a new technology introduced in CKEditor 4 that
allows you to select any editable element on the page and edit it
in-place. As a result, the editor can be used to edit content that
looks just like the final page.
...
Note that in this case you need to turn off automatic editor creation
first by setting the CKEDITOR.disableAutoInline option to true.
So I have just to add this line under .replace
CKEDITOR.disableAutoInline = true;
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 building my system and I wanted to use jQuery UI, but I am experiencing some trouble with FF, it works fine with IE and Chrome no problem, and as these are the two main browsers used by the company, it is not urgent, but as I use jQuery UI a lot on other projects, and it's an interesting little quirk (maybe a bug?), it needs mentioning.
I want to assign two database table to another and insert the assignment into another table.
<div id="to" style="width:100px;">
<table border="1">
<tr class="tableHeader">
<td>Employee</td>
</tr>
<tr><td>...</td></tr>
</table>
</div>
<div id="from" style="height:8em">
<table>
<tr><td>...</td></tr>
</table>
</div>
and JS:
$('#from tr').draggable({
revert: "invalid", appendTo : "#content", helper : "clone" });
$('#to').droppable({drop : function(event, ui) {
alert("Drop")
}});
Please see my JSFiddle to demonstrate, if you're using FF, you will notice that when you drag a record from near the bottom of the "from" table, the div scrollbar will snap back to the top, and the helper is displayed a way down from the Y of the mouse, meaning that you can't drop the record as it is too far down.
As I said, no problem in IE or Chrome, and that's what my client use, but isn't it funny?
Thanks
Luke
Hei Luke,
Try to add cursorAt: { bottom: 0 } in your draggable function. It should work in FF.
$('#from tr').draggable({
revert: "invalid",
cursorAt: { bottom: 0 },
appendTo : "#content",
helper : "clone"
});
Update fiddle: http://jsfiddle.net/vS3EH/11/
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" />
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"))