I'm trying to find the best way to render a li-element :
I've read that i should never replace this.el
So it seems that i have to unwrap my template in my LiView render() function :
// replace element content with html generated from template
var $rendered = $.tmpl(this.template, this.model.toJSON());
this.el.html($rendered.unwrap().html());
I just get the contents inside the $rendered li, since i should not replace it.
But how should i transfer attributes ?
I tried :
this.el.attr('class', $rendered.attr('class'));
this.el.attr('title', $rendered.attr('title'));
But it replaces attributes... And some (like jQuery ui ui-draggable) could be lost.
All this seems a bit clunky...
Thanks !
I'm not sure I fully grasp what you're trying to do Olouv, but I'll have a stab at answering your question regardless :)
You have an liView that corresponds to an li dom element
So you need to specify
el: "li"
Do not have an li in your template. Then the result of your render will be
<li>
contents of template
</li>
Now you want to add attributes to this li element?
Class names are pretty simple, just add the className attribute to your view
className: "ui-draggable myGreatClass ui-corner-all"
If you need to add additional attributes to your root (li) element
$(el).attr("title","your title")
If that doesn't work for you, and you want to put the li attributes in your template perhaps consider some form of the following:
Tolerating HTML of the form:
Instead of an liView (list item view), just have a ulView (List view), and put a loop construct in your template
Related
I'm having a little difficulty finding a way to insert data programmatically into my ckeditor instance.
An example of what i'm trying to accomplish:
<html>
<body>
<div id="top-area"></div>
<div id="mid-area"></div>
<div id="bottom-area"></div>
</body>
</html>
On a button click I am trying to add data inside of the div with id mid-area. I would even be okay with replacing that div with the data I have.
When I use
.insertHtml(
'<div>This is a test insert for a random area</div>',
);
It just populates that div at the very top.
I have tried targeting the div with
document.getElementById('mid-area')
but even that doesnt return any value.
Any help is appreciated. Thanks!
Since I am using the ckeditor4-angular package I am able to find the element and set the html by doing
#ViewChild('editor', { static: false }) component;
const element = this.component.instance.document.getById('mid-area');
element.setHtml('<div>This is a test insert for a random area</div>');
I will not mark this as the answer incase somebody else comes up with another solution that works better. Thanks!
Hi I am trying add custom 'li' to the list of files.
let element = document.createElement("li");
element.innerHTML = "hello";
let ulEle = document.querySelector(".filepond--list");
let liItem = document.querySelector(".filepond--item");
ulEle.insertBefore(element, liItem);
I can see element inserted but filepond's ul li item is overflowing my custom element.
When I try to modify css, than it doesn't work as intended.
please assist
The styling/positioning of the file items in the list is very custom to allow for all the animations (it's done from JavaScript), adding your own elements to the list will not work.
You can however add elements to a list item. To do this I advise to write a custom plugin, the best starting point I think is the image-edit plugin.
When I use an empty span, let's say
<span class="anchor" id="jumptome"></span>
ckeditor removes it.
To the config.js of ckeditor I added
CKEDITOR.editorConfig = function( config ) {
config.IgnoreEmptyParagraphValue = true;
};
CKEDITOR.dtd.$removeEmpty.span = 0;
Now ckeditor does not remove the spans, but they are wrapped in p's like
<p><span class="anchor" id="jumptome"></span></p>
Is there any configuration to remove the p's (I need the paragraphs for other elements, just want to avoid them for the spans).
Thanks in advance!
Why would you need the spans? If you need an anchor, why not use for example a DIV which can be styled to be a visible block in the Editor but an invisible ... anchor in the output content? I do this in my CKE app. Although I use widgets for anchors but same princible anyway.
I'm guessing the reason is because of caret positioning and user targeting - how would the user target that anchor? If it can't be targeted - why do you need it in the contents? Why not something targetable?
I am trying to alternate a CSS class in a <fieldset>. Normally a #helper function would work fine (see the #helper below), however I have two (2) circumstances that won't allow it to work properly.
First, I am using a Input.Edit.cshtml field template in ~/Views/EditorTemplates/Fields.
This basically means that as I build up a form, the Input.Edit.cshtml file is being called each time for as many <input>'s as I have in my form.
Second, I am using a condition to check the path of the URL in order to only apply this CSS alternating class on pages below a certain path. Specifically, I want to apply this change to pages under my ~/Services path. On all other pages I do not want the change applied. I check this condition using Request.Url.AbsoluteUri as you see below.
This is where I think my problem lies, as the alternating code is applied but then because it is called again for the same condition on the same page it is applied incorrectly due to my logic.
Now it could be that I am just stuck with the problem.
Here is the code:
#{
string CurrentUrl = Request.Url.AbsoluteUri;
}
#helper ResponsiveCss(string cssClass)
{
if (ViewBag.count == null) { ViewBag.count = 0; }
<text>class="#(ViewBag.count % 2 == 1 ? cssClass : "one-half last")"</text>
ViewBag.count++;
}
#if (CurrentUrl.Contains("Services"))
{
<fieldset #ResponsiveCss("one-half")>
//Label and Input code
</fieldset>
}
What should happen is that the class="one-half" is applied on the first <fieldset> that is created in the form, and then class="one-half last" on the second that is created.
Instead what is happening is that class="one-half" is NOT being applied on the first <fieldset> that is created, but rather ALL <fieldset>'s are being created with class="one-half last".
Sorry if that is not clear. Any thoughts on if I can make this work given the circumstances (and how)? Thanks.
Hopefully this solves your problem.
Alternating style
Instead of alternating the class name, you can use the nth-of-type or nth-child pseudo-classes.
fieldset:nth-of-type(odd) {}
fieldset:nth-of-type(even) {}
See this example: http://jsfiddle.net/cx9UG/
Note: These pseudo-classes can also be used in JQuery selector and document selector (querySelector and querySelectorAll)
CSS depending on URL
This is really CSS depending on the view. Just create two CSS bundles then apply in to the appropriate views.
View with alternating style #Styles.Render("~/Content/alternating")
View without alternating style #Styles.Render("~/Content/mono")
The EditorTemplate should not need to know the URL.
I am getting a w3c validation error here as
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
This is my source code
<ul class="link">
<li><span>1<div class="clr"> </div><label>Vul Postcode in </label></span></li>
<li><span>2<div class="clr"> </div><label>Restaurants </label></span></li>
<li><span>3<div class="clr"> </div><label>Menukaart</label></span></li>
<li><span>4<div class="clr"> </div><label>Afrekenen</label></span></li>
</ul>
Please help me to find out the issue,
Thanks
Pallavi
You have a block element (div) inside of an inline element (span). This is not allowed.
Solution 1: Change span to div:
<div>2<div class="clr"> </div><span class="label">Restaurants </span></div>
(You have to use HTML5 (<!DOCTYPE html>), otherwise block elements wouldn’t be allowed inside of a elements.)
Solution 2: Change div to span:
<span>2<span class="clr"> </span><span class="label">Restaurants </span></span>
Note that you can’t have label inside of an a element (I changed the label to span here). Use the label element only when you have a form.