I am trying lots of time to change class and inline styles too.
but not getting any change.
This is my html code (what i want to modify my checkbox):
<div class="checkbox-custom checkbox-primary mb5">
<input type="checkbox" id="checkboxExample1">
<label for="checkboxExample1"></label>
</div>
This is my Razor Syntax:
#Html.CheckBoxFor(m =>m.isNewlyEnrolled, new {#style="width:25px; height:25px;", #class = "checkbox-custom checkbox-primary mb5", id="checkboxExample1"})
Related
I have the following inside my asp.net mvc web application:-
#Html.CheckBox("#Model.SubmissionQuestionSubmission[i].Answer", new { #class = "form-control" }) <label>#Model.SubmissionQuestion[i].Question</label>
currently the checkbox and the label will be shown on 2 separate lines, so can i force them to show on the same line?
here is the markup generated from the above:-
<input class="form-control" id="zModel_SubmissionQuestionSubmission_i__Answer" name="#Model.SubmissionQuestionSubmission[i].Answer" type="checkbox" value="true">
<label>Are you currently participating ?</label>
According to your description, I suggest you could try to use bootstrap's form-check instead of the form-control.
More details, you could refer to below codes:
<div class="form-check">
#Html.CheckBox("#Model.SubmissionQuestionSubmission[i].Answer", new { #class = "form-check-input" }) <label class="form-check-label">#Model.SubmissionQuestionSubmission[i].Question</label>
</div>
Result:
I am trying to implement a checkbox that has a clickable label with the Html.CheckboxFor syntax. However, I am running into an issue where my checkbox is not allowing me to click it to toggle its state and is not being set properly when the page is loaded even thought the checked attribute is correct.
From what I have been reading, it seems that this is do to the extra hidden input field that gets generated to pass back false values to the controller on a form submittal. However, I still need to figure out a way around this and I feel like I am not the first one to be looking for a solution.
Here is my HTML:
<div class="form-check">
#Html.CheckBoxFor(x => x.ProfilePublicViewable, new { #class = "form-check-input", #id = "val1", #value = "val1", #checked = "checked" })
<label class="form-check-label" for="val1">Profile Public Viewable</label>
</div>
And here is what gets rendered to the DOM:
<div class="form-check">
<input checked="checked" class="form-check-input" id="val1" name="val1" type="checkbox" value="val1">
<input name="ProfilePublicViewable" type="hidden" value="false">
<label class="form-check-label" for="val1">Profile Public Viewable</label>
</div>
I have been looking around for examples on how to achieve this design, but seem to be coming up empty handed. Does anyone have any ideas as to where i am going wrong?
I'm trying to implement validation by Bootstrap and I've pasted the following sample on my page:
<div class="form-group has-success">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control form-control-success" id="inputSuccess1">
<div class="form-control-feedback">Success! You've done it.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
I can see that the appearance of the input control has changed (it's a bit rounded and much more aesthetic now) but it still doesn't show the green border as can be seen on the page linked to. The Bootstrap I'm linking to is pointed out as follows.
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
I have tried to google for this issue but to no avail. I have a fiddle illustrating the issue.
What can I do about it? What am I missing?
Bootstrap 5 (Update 2021)
Since jQuery is no longer required for Bootstrap 5, it's easy to do client-side validation with vanilla JavaScript. The docs include a generic code example that should work on all forms with needs-validation..
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
Bootstrap 5 Form Validation Demo
Bootstrap 4 (Original Answer)
Validation has changed as of the Bootstrap 4 beta release.
The valid state selectors use the was-validated class which would be added dynamically after validating the form via client-side JavaScript. For example...
<form class="container was-validated" novalidate="">
<div class="form-group">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" name="i1" id="inputSuccess1">
<div class="valid-feedback">Success! You've done it.</div>
</div>
<div class="form-group">
<label class="form-control-label" for="inputSuccess2">Input with danger</label>
<input type="text" class="form-control" name="i2" required="" id="inputSuccess2">
<div class="invalid-feedback">That didn't work.</div>
</div>
<div class="">
<button type="submit" class="btn btn-secondary">Text</button>
</div>
</form>
https://codeply.com/go/45rU7UOhFo
Form Validation Example Demo - Bootstrap 4.0.0
As explained in the docs, if you intend to use server-side validation you can simply set the is-valid or is-invalid classes on the form-controls...
<form class="container">
<div class="form-group">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control is-valid" id="inputSuccess1">
<div class="valid-feedback">Success! You've done it.</div>
</div>
</form>
It appears the validation changes again in the final release version of Bootstrap 4: http://getbootstrap.com/docs/4.0/components/forms/#validation.
It becomes more complicated than I thought.
Custom style client side validation is recommended:
When validated, the form adds a class named was-validated.
Feedback messages are wrapped within .valid-feedback or .invalid-feedback.
For server-side validation:
No need for was-validated class on the <form> tag.
Add .is-valid or .is-invalid on the input control.
Add .invalid-feedback or .valid-feedback for the feedback message.
my simple way....
<input type="text" class="form-control" id="unombre"
placeholder="su nombre" name="vnombre" required
onblur="valida(this.id)">
<script>
function valida(v) {
var dato = document.getElementById(v).value
document.getElementById(v).className +=' is-valid';
}
</script>
How do you nest HTML elements using Razor?
Take this simple HTML for example
<label class="input">
<i class="icon-prepend fa fa-user"></i>
<input type="text" name="fname" placeholder="First name">
</label>
What would the equivalent to this be in Razor? For whoever thought this is too broad. I basically want to register #Html.Label() then go on and set child attributes for it which will include an icon and and textbox.
Is it even possible to do what I'm trying to achieve with razor?
It will create something like this
I tried to figure it out but failed badly. This is the best I got.
<label class="input">
#Html.Bootstrap().Icon("icon-prepend fa fa-user")
#Html.Bootstrap().TextBoxFor("fname", htmlattributes: new { placeholder = "First name" })
</label>
I was hoping to create the label in razor too.
Create a custom HTML helper. The output of the HTML helper will be what #CarlosAraujo suggests:
<label class="input">
<i class="icon-prepend fa fa-user"></i>
#Html.TextBoxFor("fname", htmlattributes: new { placeholder = "First name" })
</label>
You call it something like this:
#Html.MyCustomAwesomeTextBoxFor(...)
In this way you can encapsulate and re-use this component anywhere in your code.
You can do something like this:
<label class="input">
<i class="icon-prepend fa fa-user"></i>
#Html.TextBoxFor("fname", htmlattributes: new { placeholder = "First name" })
</label>
Having a bizarre issue that I'm hoping people can shed some like on.
When I've been making forms with check boxes and radio buttons in my jQuery Mobile MVC 4 project, if I use Razor syntax to spit out the controls according to the view model e.g. #Html.RadioButtonFor etc instead of just writing the standard input type="radio", jQuery Mobile doesn't apply the styles to the elements. Screen shots and code differences included. Is this something to do with the way the controls are being rendered? Happens in both Views and Partial Views.
I have changed just the first set of radio buttons here to demonstrate the point. If I change the whole form to Razor HTML helpers, I would get the same across all of the controls.
Non-Razor:
Razor:
Non-Razor code:
<fieldset data-role="controlgroup" data-type="vertical" class="recurrencyArea">
<legend></legend>
<input type="radio" data-theme="b" name="Period" id="Daily" value="Daily" checked="checked" />
<label for="Daily">Daily</label>
<input type="radio" data-theme="b" name="Period" id="Weekly" value="Weekly" />
<label for="Weekly">Weekly</label>
<input type="radio" data-theme="b" name="Period" id="Monthly" value="Monthly" />
<label for="Monthly">Monthly</label>
</fieldset>
Razor code:
<fieldset data-role="controlgroup" data-type="vertical" class="recurrencyArea">
<legend></legend>
#Html.LabelFor(x=>x.Period, "Daily")
#Html.RadioButtonFor(x => x.Period, "Daily", new { data_theme = "b", #Checked = "checked", id = "Daily" })
#Html.LabelFor(x=>x.Period, "Weekly")
#Html.RadioButtonFor(x => x.Period, "Weekly", new { data_theme = "b", #Checked = "checked", id = "Weekly" })
#Html.LabelFor(x=>x.Period, "Monthly")
#Html.RadioButtonFor(x => x.Period, "Monthly", new { data_theme = "b", #Checked = "checked", id = "Monthly" })
</fieldset>
Is the razor html being generated after the jquery mobile scripts have run over the page?
Anybody with any helpful ideas/or indeed anyone who can spot any stupid mistakes would be a hero!
Many thanks,
Christian
I'm not too familiar with jquerymobile, but the on glitch i can see here, is that for the html code you have labels that look like this:
<label for="Daily">Daily</label>
while the razor code will output the labels like this:
<label for="Period">Daily</label>
The "for" attribute is wrong for your sceanrio in the razor code, maybe jquery mobile is sensitive to that?