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;
}
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.
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 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" />
I am using Symfony 1.3.6 on Ubuntu 10.0.4.
I am using the sfWidgetFormSelectRadio to allow a user to select a picture from a list, in a form.
In the action, the pictures are set up like this:
$this->form->setWidget('chosenpic', new sfWidgetFormSelectRadio(array(
'choices' => $this->pictures,
'default' => $this->pictures[count($this->pictures)-1] ))
);
In the template, the widget is displayed like this:
<?php echo $form['chosenpic']->render(array('id'=>'check'.($i+1), 'value'=> ($i+1), 'width' => "80", 'height' => "80")); ?>
This generates the following output:
<ul class="radio_list"><li><input type="radio" width="80" height="80" id="check1" value="1" name="flowers[chosenpic]"> <label for="flowers_chosenpic_0">http://example.com/media/images/48408000/jpg/_48408794_009829449-1.jpg</label></li></ul>
I do no want the the label for appearing, as it messes up the form. Short of manually generating the HTML myself (using the form and widget names, is there a way that I can prevent the widget from displaying a 'label for' ?
You need to provide a custom formatter. In your form's configure function, do the following:
public function configure()
{
$this->setWidget('chosenpic', new sfWidgetFormSelectRadio(array(
'formatter' => array($this, 'pictureRadioFormatterCallback')
)));
}
Then, add a formatter that doesn't render labels to your form:
public function pictureRadioFormatterCallback($widget, $inputs)
{
$rows = array();
foreach ($inputs as $input)
{
$rows[] = $widget->renderContentTag('li', $input['input']);
}
return !$rows ?
'' :
$widget->renderContentTag('ul', implode($widget->getOption('separator'), $rows), array('class' => $widget->getOption('class')));
}
However, ideally, you should be using the labels to display the images, rather than displaying the images outside of the labels. Also, it's typically a bad idea to be configuring widgets inside of an action, can that code go in it's own form?
You can do the above -- or use CSS to hide the label generated by default ... something along the lines of:
ul.radio_list li input label { display: none; }
the form itself probably has an #id to help you better specify the CSS selector better. But if you like adding boilerplate PHP code to your app feel free :)