I am working on a checkbox display .In my form I am selecting the check box and saving it and in the display of the form I am not able to see it. How to rectify it
Enclosing the screenshot and code
selected checkbox
To be displayed(the check box shd be displayed below experience
<div class="form-group">
<label *ngIf="isEdit" for="checkbox1">
<label *ngIf="!isEdit" for="hf-checkbox1">{{modelr.College_Grad}}</label>
<input id="checkbox1" *ngIf="isEdit" name="checkbox1" type="checkbox"
value="option1" [value]="modelr.College_Grad"
(input)="modelr.College_Grad = $event.target.value" >
Iam college grad
</label>
</div>
Related
I have multiple checkboxes binded from ViewBag list. I have used this pattern while Add Record. But now I have situation of Edit . I have saved the selected checkbox IDs in different table. Now in Edit,how I can make them selected as per user selection done while adding that record?
#foreach (var item in ViewBag.Features)
{
<div class="form-group form-animate-checkbox col-md-4 col-sm-12">
<input type="checkbox" class="checkbox Amenities" value="#item.ID" name="#item.Name">
<label class="lblamenities">#item.Name</label>
</div>
}
In ViewBag.Features is list type variable, this contain the id and name, but in your requirement you need to select those check box previous you save.
So you can take another parameter or variable selected as bool type, those id are saved in our database the selected variable is true otherwise false.
In view page make check for checked or not, Plz see the below code....
#foreach (var item in ViewBag.Features)
{
<div class="form-group form-animate-checkbox col-md-4 col-sm-12">
<input type="checkbox" class="checkbox Amenities" value="#item.ID" name="#item.Name" checked='#(item.selected?"checked":"")'>
<label class="lblamenities">#item.Name</label>
</div>
}
I have an input that will display data in model. There supposed to be 2 ways to access this form. Either by entering ID no at the form before, so
the name displayed here, or without entering ID no, which means it is only a blank textbox. I successully retrieved the value from model where the
value is displayed inside the textbox. The problem is when the form is access without model. Textbox are not shown. It only displayed the label.
I am not sure why but i think it is maybe because the input value are assign to model. All i need is a textbox so user can input the data.
<div Class="form-group">
<Label Class="control-label col-md-4">Appointment Start</Label>
<div Class="col-sm-8">
#For Each Item In Model
#<input type="text" name="name" Class="form-control" value="#Html.DisplayFor(Function(modelItem) Item.name)">
Next
</div>
</div>
This should be easy to fix, but I can't find out why it's not working.
I have a web "app" that runs in Safari, and it's made for users to add to the home screen. There's a web form where the user enters a first and last name. Here's the simple code for that form.
<fieldset>
<div class="row">
<label>First Name</label>
<input type="text" name="first_name" id="pFirstName" value="" autocapitalize="on" autocorrect="off" placeholder="John" />
</div>
<div class="row">
<label>Last Name</label>
<input type="text" name="last_name" id="pLastName" value="" autocorrect="off" autocapitalize="on" placeholder="Doe" />
</div>
</fieldset>
Very simple. The problem is that the Last Name form is not capitalized when the user switches to it. I ran it directly in mobile Safari, and it worked fine. When I added to the home screen, I had the same issue...
Is this just a bug in iOS/webkit (because it used to work...)? Not sure if there's some sort of script to force the auto-capitalization? Thanks!
Edit: If I click on the field directly, it capitalizes. The problem is when I fill in text for first name, and click the "Next" arrow on the top of the keyboard.
Try using autocapitalize="sentences"
I'm trying to use the semantic UI checkbox in an MVC application, however, I've noticed that when using CheckBoxFor() it creates 2 inputs, one of which is hidden:
<div class="field">
<div class="ui checkbox">
<input data-val="true" id="OilStarvation" name="OilStarvation" type="checkbox" value="true">
<input name="OilStarvation" type="hidden" value="false">
<label for="OilStarvation">Oil Starvation</label>
</div>
</div>
Then I activate the checkbox like so:
$('.ui.checkbox').checkbox();
When I then click the checkbox, the "tick" animation doesnt show if the checkbox is ticked, although the value of true IS being set. Is there a way I can tell semantic UI checkbox method to target the non-hidden element?
You can set css to show the tick/checked effect.
.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after
{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
I am getting started with JQueryMobile and love it. I am wondering if there is a way to place a prepended a select menu beside a standard text input.
For example, if the text input were to be for a name, then the prepended select would contain Mr, Mrs, etc.
Edit 1:
I've looked at the control group docs and for a case like buttons it works e.g.
<div data-role="controlgroup" data-type="horizontal">
Icon only
Icon only
</div>
However if I use an input like
<div data-role="controlgroup" data-type="horizontal">
Icon only
<input type = "text" name = "some_input" id = "some_input">
</div>
It gives a weird result with the input overlapping the button.
Edit 2:
I've looked at grids but cannot see a way to have a div span 2 grids. e.g.
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b ui-block-c">Block C</div>
</div>
I've tried the above, but it doesn't work as desired, for example
<div class="ui-grid-c">
<div class="ui-block-a">
<label for = "full_name">
Name
<select id = "honorific" data-mini="true" data-inline="true">
<option value = "mr">Mr</option>
<option value = "mrs">Mrs</option>
<option value = "miss">Miss</option>
</select>
</label>
</div>
<div class="ui-block-b ui-block-c ui-block-d">
<input type="tel" data-clear-btn="true" id = "full_name" name = "full_name">
</div>
</div>
simply yeilds the select box below the full name label, and the input only spans what appears to be one cell/block - rather than the 3 cells/blocks of the grid.
From what I've seen control group works best with buttons, check boxes, etc. Not with the combination you're expecting to do. So here are two solutions for you.
Without using grids
You'll just have to make the two elements as an inline-block, like this :
.ui-select, .ui-input-text {
display:inline-block
}
Demo with No grids, No control group.
Using grids
The way you're using grids is wrong. You'll have to use two-column grid, which will have these two two classes alone: ui-block-a & ui-block-b, like this :
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
</div>
This will scale your markup accordingly. Here's how the HTML looks like :
<div class="ui-grid-a">
<div class="ui-block-a" style="width:100px">
<select name="select-choice-min" id="select-choice-min" data-mini="true">
<option>Mr.</option>
<option>Mrs.</option>
<option>Ms.</option>
</select>
</div>
<div class="ui-block-b">
<input type="text" name="name" id="name" value="" placeholder="Enter Name" />
</div>
</div>
Demo with grids