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;
Related
I'm doing an ASP.NET MVC website. Which needs a feature let admin set if the membership of each clubs member joined are valid still.
After a bit survey, I figure jQuery UI Checkboxradio quite fit my demand.
When I check the checkbox it seems fine, ticked and the background becomes blue.
However, when I move the mouse out the tick disappears while the background remains blue.
Then if I move the mouse over it, the tick will show up again but only when the cursor remains on the widget.
I check the post value of viewmodel which is correct and if I comment
//$("input[type=checkbox]").checkboxradio();
The original checkboxes work as expected.(tick won't disapear)
So I think it should be a frontend problem.
Here is the part of my View
<div class="form-group">
#Html.LabelFor(model => model.ClubMultiChosen.Clubs, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#for (int i = 0; i < Model.ClubMultiChosen.SelectedClubs.Count; i++)
{
var memberships = Model.ClubMultiChosen.SelectedClubs;
#Html.Label(#memberships[i].Club.Abbr, new { #for = $"cbxClub{i}" })
#Html.CheckBox($"ClubMultiChosen.SelectedClubs[{i}].IsActive",
#memberships[i].IsActive, new { id = $"cbxClub{i}" });
}
</div>
</div>
At the same page I have included
bootstrap 3.3.7
bootstrap-chosen 1.0.0
jQuery 3.1.1
jQuery UI 1.12.1
And My mvc version is 5.2.3.0
Not sure if I provided enough info. Any suggestion or question will be appreciated!
I figured it out myself.
For some reason when it is checked(class=ui-state-active). It uses ui-icons_ffffff_256x240.png as background which is white yet the background of checkbox(span) is white as well, so it looks like the tick was disappeared.
After I override it with
#form1 .ui-state-active .ui-icon,
#form1 .ui-button:active .ui-icon {
background-image: url("/Content/themes/base/images/ui-icons_555555_256x240.png");
}
It works as I expected.
I'm creating a website with ASP.NET MVC5 and I'm using MaterializeCSS for the first time, which looks like a very exciting framework.
However, the checkboxes generated by CheckBoxFor helper become hidden !
When I write :
#Html.CheckBoxFor(m => m.IsAgreeTerms)
The generated HTML is :
<input name="IsAgreeTerms" type="hidden" value="false">
Why does Materialize change my type=checkbox into type=hidden ?
I tried to add type="checkbox" in the CheckboxFor helper, but it doesnt change anything. The only way is to modify in in my browser's console.
The only solution I found is this SO thread.
However, the accepted answer doesn't change anything for me.
The other answer works, but I think it's ugly to add some JS script to modify what Materialize modifies without my consent.
Is there any way to say "Hey, I ask for a type=checkbox, so just let my type=checkbox in the generated HTML" ?
Thank you
UPDATE :
My full ASP.NET MVC code is :
#Html.CheckBoxFor(m => m.IsAgreeTerms, new { #type = "checkbox" })
#Html.LabelFor(m => m.IsAgreeTerms, new { #class = "login-label" })
The full generated HTML is
<input data-val="true" data-val-required="Le champ IsAgreeTerms est requis." id="IsAgreeTerms" name="IsAgreeTerms" type="checkbox" value="true"
<input name="IsAgreeTerms" type="hidden" value="false">
<label class="login-label" for="IsAgreeTerms">IsAgreeTerms</label>
Here's a solution in the form of a html helper. It constructs a checkbox and label in the correct order:
public static IHtmlString CheckBoxWithLabelFor<TModel>(
this HtmlHelper<TModel> htmlHelper,
Expression<Func<TModel, bool>> expression,
string labelText,
object htmlAttributes = null
)
{
if (expression == null)
{
throw new ArgumentNullException(nameof(expression));
}
var checkBoxWithHidden = htmlHelper.CheckBoxFor(expression, htmlAttributes).ToHtmlString().Trim();
var pureCheckBox = checkBoxWithHidden.Substring(0, checkBoxWithHidden.IndexOf("<input", 1, StringComparison.Ordinal));
var labelHtml = htmlHelper.LabelFor(expression, labelText).ToHtmlString().Trim();
var result = pureCheckBox + Environment.NewLine + labelHtml + Environment.NewLine + $"<input type=\"hidden\" name=\"{ExpressionHelper.GetExpressionText(expression)}\" value=\"false\" />";
return new MvcHtmlString(result);
}
Is there other html generated by materialize.css? I think this happens because it is not possible apply a custom CSS to element input of type checkbox.
So, the checkbox becomes hidden and other html component represents visually the checkbox. Many components work like that.
UPDATE:
Why is Html checkbox generating an additional hidden input
OP here. Problem looks like more complex.
Actually, when using #Html.CheckBoxFor, MVC5 generates 3 fields, in that order :
Your input, with type="checkbox", binded to your model property
An hidden field (see the Claudio's link for an explaination)
Your label, generated by #Html.LabelFor
Problem is Materialize expects that in another order to work.
In your browser's console, just move the <label> element between the input and the hidden field, and everything works fine !
I found this very useful link, where, basically, it is said that the order of the generated fields by #Html.checkBoxFor will change ... In MVC6 !
As I'm working with MVC5, I use this very ugly solution in my _Layout:
$(":checkbox").each(function () {
$(this).nextAll("label").before($(this))
})
If anyone has a better idea, please feel free to post an elegant solution.
How can I use jquery to change the id of a div acting as a jquery mobile popup as well as the href of the anchor pointing to the popup?
In my webapp I have an anchor that, when clicked, brings up a jquery mobile popup div all of which I'm inserting dynamically. In any instance of the webapp, I don't know how many times this code will be inserted. Therefore, my understanding is that I need to be able to dynamically create a unique id for the jquery mobile popup div and set the href of my popup icon.
I am not currently succeeding at dynamically changing the id and href. I've created the following test (JSFiddle Test).
Here is my sample html:
<div class="phone1">
<p class="textLeft"> <strong>Number: </strong><span>(555)555-5555</span>
Learn more
</p>
<div id="myPopup" data-role="popup" class="ui-content" data-theme="a" style="max-width:350px;">
<p class="flagText">This number has been flagged as incorrect</p>
</div>
</div>
Change href property
Here is my sample javascript / jquery:
$('#changeButton').click(function () {
alert("Handler for .click() called.");
$('.phone1 > a').prop('href', 'myNewPopup');
$('#myPopup').attr('id', 'myNewPopup');
});
Thank you for your help in advance!
As your anchor is not a direct child of .phone1 but rather a grandchild, the > selector does not work. Also the href needs the # symbol:
$('.phone1 a').prop('href', '#myNewPopup');
Technically you should also use prop to update the id as well:
$('#myPopup').prop('id', 'myNewPopup');
Updated FIDDLE
Are you sure you need to do this. After dynamically inserting the popup the first time, you could just update it each successive time by testing if it exists in the DOM first:
if ($("#myPopup").length > 0){
//update
} else {
//create
}
Update 2: A The following repo on github shows the problem.
Update 1: Calling #firstNode in Template.editor.rendered returns <div class="editor"></div>.
I have the following template:
<template name="editor">
<div class="editor">
{{#each objects}}
<div class="object">{{content}}</div>
{{/each}}
</div>
</template>
The data is provided by iron-router in the data callback.
The coffeescript for my template:
Template.editor.rendered = ->
#findAll('.object').draggable()
When I go into my browser and try to drag one of the objects I get the text selection cursor and begin to select the text with the div instead of the object being dragged. So what is wrong and how can I get the drag and drop to work?
The drag and drop functionality is being provided by jquery-ui. Which is installed as a smart package.
Also feel free to edit the title of this post as I had a tough time coming up with one that made sense
The solution I found was to abstract <div class="object">{{content}}</div> into a seperate template like so:
<template name="object">
<div class="object">{{content}}</div>
</template>
Then change
Template.editor.rendered = ->
#findAll('.object').draggable()
to
Template.object.rendered = ->
#findAll('.object').draggable()
As stated in meteorpedia.
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;
}