How to make label for radio button - css

I have some radio buttons. But I also want to the text clickable. So that the ratio button is selected. So not only if you click on the radio button that the ratio buttion is selected, but also if you click on the text, that the ratio button is selected.
I have this:
<td>
<input id="upload" name="folder" type="radio" value="#item" />
<label>#Html.Label(item)</label>
</td>
Thank you
I try it like this:
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<table>
#foreach (var item in Model.Directories)
{
<tr>
<td>
<input id="upload" name="folder" type="radio" value="#item" />
<label for="upload">#Html.Label(item)</label>
</td>
</tr>
}
</table>
</div>
</div>
I have it now like this:
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<table>
#foreach (var item in Model.Directories)
{
<tr>
<td>
<label>
<input type="radio" name="folder" value="#item" id="upload">
<label for="folder">#Html.Label(item)</label>
</label>
</td>
</tr>
}
</table>
</div>
</div>
but the radio buttons are in a foreach loop, so the id is different of every radio button
I try it like this:
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<table>
#foreach (var item in Model.Directories)
{
#for(var i=0; i < item.Count; i++){
<tr>
<td>
<fieldset>
<input type="radio" name="folder" value="#item" id="folder">
<label for="folder">#Html.Label(item)</label>
</fieldset>
</td>
</tr>
}
}
</table>
</div>
</div>

You can use for attribute with the value of the input's id attribute:
<input id="upload" name="folder" type="radio" value="#item" />
<label for="upload">#Html.Label(item)</label>

the simple way
<td>
<label>
<input id="upload" name="folder" type="radio" value="#item" />
#Html.Label(item)</label>
</td>

use label for
<td>
<input id="upload" name="folder" type="radio" value="#item" />
<label for="upload">#Html.Label(item)</label>
</td>

Using for attribute:
<label for="folder">#Html.Label(item)</label>

You need to enclose the radio within a label tag, To display some text add a tag inside the label:
<label for="upload">
<span>#Html.Label(item)</span>
</label>
<input type="radio" name="folder" value="#item" id="upload" >

Related

Background move to left when I open a modal-lg

When I open modal-lg, the background screen moves to the left. I tried many ways, but it failed. Please see the code and change accordingly I am using Bootstrap 4. Thank you.
When I open modal-lg, the background screen moves to the left. I tried many ways, but it failed. Please see the code and change accordingly I am using Bootstrap 4. Thank you.
<!-- The Modal -->
<div class="modal fade mt-5 " id="myModal2#(count)">
<div class="modal-dialog modal-lg " style=" padding-left: 0 !important;">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h6 class="modal-title Bold">ویرایش قرارداد</h6>
</div>
<!-- Modal body -->
<div class="modal-body">
<form asp-controller="AmorMalie" asp-action="EditSubmitGhrardad" method="post">
<table class="table table-bordered text-sm ">
<thead class="text-center">
<tr style="background-color:#416992; color: white">
<th>نام پروژه</th>
<th>نوع خدمات</th>
<th>مبلغ قرارداد (ریال)</th>
<th style="width:80px">ت ج ماه</th>
<th style="width:130px">ارزش افزوده</th>
</tr>
</thead>
<tr>
<td>
<input type="hidden" class="hf_selected_val" value="#item.projectID" />
<select class="form-control " name="projectID" required autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
#foreach (var items in ViewBag.pros) {
<option value="#items.projectID">#items.projectName</option>
}
</select>
</td>
<input class="d-none" name="id" value="#item.id" />
<td>
<input type="hidden" class="hf_selected_val" value="#item.NoeaKhadmat" />
<select class="form-control" name="NoeaKhadmat" required autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
<option value="1">حسابرسی</option>
<option value="2">مالیاتی</option>
<option value="3">منابع انسانی</option>
</select>
</td>
<td><input class="form-control num" name="MablghGhrardad" onkeyup="javascript:this.value=itpro(this.value);" value="#item.MablghGhrardad" autocomplete="off" /></td>
<td><input class="form-control num" name="TadadJelse" autocomplete="off" value="#item.TadadJalaseDrMoaheGhrardad" /></td>
<td class="text-center">
<input type="checkbox" name="MashmolArzeshAfzoode" #(item.MashmolArzeshAfzoode ? "checked" : "") style="width: 1.25rem; height: 1.25rem; top: .8rem; " class="flat-red" value="True">
</td>
</tr>
<thead class="text-center mr-3">
<tr style="background-color:#416992; color: white">
<th>تاریخ شروع</th>
<th>تاریخ پایان</th>
<th style="background-color:darkgreen">تعین کارشناس</th>
<th colspan="2" class="text-center">عملیات</th>
</tr>
</thead>
<tr>
<td>
<div class="input-group" style="padding-left:9px; padding-right:9px;">
<div class="input-group-addon" style="border:1px solid gray; padding:6px">
<span> <i class="right fa fa-calendar"></i></span>
</div>
<input name="bgainDate2" id="bgainDate2#(count)" type="text" autocomplete="off" value=" #ConvertDateTime.ConvertMiladiToShamsi(item.ShoroeeProjectDate, " yyyy/MM/dd ")" class="form-control" />
</div>
</td>
<td>
<div class="input-group" style="padding-left:9px; padding-right:9px;">
<div class="input-group-addon" style="border:1px solid gray; padding:6px">
<span> <i class="right fa fa-calendar"></i></span>
</div>
<input name="EndDate2" id="EndDate2#(count)" type="text" autocomplete="off" value=" #ConvertDateTime.ConvertMiladiToShamsi(item.PayanProjectDate, " yyyy/MM/dd ")" class="form-control" />
</div>
</td>
<td>
<input type="hidden" class="hf_selected_val" value="#item.UserID" />
<select class="form-control" name="TaeenKarShnas" autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
#foreach (var items in ViewBag.userss) {
<option value="#items.Id">#items.FirstName #items.Family</option>
}
</select>
</td>
<td colspan="2" class="text-center">
<button type="submit" class="btn btn-success" style="color:white">ویرایش قرارداد</button>
</td>
</tr>
</table>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
#{count++;}
This is what I tried and it works perfectly. You do an external CSS or internal CSS. Your choice. If you want internal. Just do a <style> insert the CSS here </style
CSS:
body:not(.modal-open){
padding-right: 0px !important;
}
Internal CSS:
<style>
body:not(.modal-open){
padding-right: 0px !important;
}
</style>
Full code:
<!-- The Modal -->
<div class="modal fade mt-5 " id="myModal2#(count)">
<div class="modal-dialog modal-lg " style=" padding-left: 0 !important;">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h6 class="modal-title Bold">ویرایش قرارداد</h6>
</div>
<!-- Modal body -->
<div class="modal-body">
<form asp-controller="AmorMalie" asp-action="EditSubmitGhrardad" method="post">
<table class="table table-bordered text-sm ">
<thead class="text-center">
<tr style="background-color:#416992; color: white">
<th>نام پروژه</th>
<th>نوع خدمات</th>
<th>مبلغ قرارداد (ریال)</th>
<th style="width:80px">ت ج ماه</th>
<th style="width:130px">ارزش افزوده</th>
</tr>
</thead>
<tr>
<td>
<input type="hidden" class="hf_selected_val" value="#item.projectID" />
<select class="form-control " name="projectID" required autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
#foreach (var items in ViewBag.pros) {
<option value="#items.projectID">#items.projectName</option>
}
</select>
</td>
<input class="d-none" name="id" value="#item.id" />
<td>
<input type="hidden" class="hf_selected_val" value="#item.NoeaKhadmat" />
<select class="form-control" name="NoeaKhadmat" required autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
<option value="1">حسابرسی</option>
<option value="2">مالیاتی</option>
<option value="3">منابع انسانی</option>
</select>
</td>
<td><input class="form-control num" name="MablghGhrardad" onkeyup="javascript:this.value=itpro(this.value);" value="#item.MablghGhrardad" autocomplete="off" /></td>
<td><input class="form-control num" name="TadadJelse" autocomplete="off" value="#item.TadadJalaseDrMoaheGhrardad" /></td>
<td class="text-center">
<input type="checkbox" name="MashmolArzeshAfzoode" #(item.MashmolArzeshAfzoode ? "checked" : "") style="width: 1.25rem; height: 1.25rem; top: .8rem; " class="flat-red" value="True">
</td>
</tr>
<thead class="text-center mr-3">
<tr style="background-color:#416992; color: white">
<th>تاریخ شروع</th>
<th>تاریخ پایان</th>
<th style="background-color:darkgreen">تعین کارشناس</th>
<th colspan="2" class="text-center">عملیات</th>
</tr>
</thead>
<tr>
<td>
<div class="input-group" style="padding-left:9px; padding-right:9px;">
<div class="input-group-addon" style="border:1px solid gray; padding:6px">
<span> <i class="right fa fa-calendar"></i></span>
</div>
<input name="bgainDate2" id="bgainDate2#(count)" type="text" autocomplete="off" value=" #ConvertDateTime.ConvertMiladiToShamsi(item.ShoroeeProjectDate, " yyyy/MM/dd ")" class="form-control" />
</div>
</td>
<td>
<div class="input-group" style="padding-left:9px; padding-right:9px;">
<div class="input-group-addon" style="border:1px solid gray; padding:6px">
<span> <i class="right fa fa-calendar"></i></span>
</div>
<input name="EndDate2" id="EndDate2#(count)" type="text" autocomplete="off" value=" #ConvertDateTime.ConvertMiladiToShamsi(item.PayanProjectDate, " yyyy/MM/dd ")" class="form-control" />
</div>
</td>
<td>
<input type="hidden" class="hf_selected_val" value="#item.UserID" />
<select class="form-control" name="TaeenKarShnas" autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
#foreach (var items in ViewBag.userss) {
<option value="#items.Id">#items.FirstName #items.Family</option>
}
</select>
</td>
<td colspan="2" class="text-center">
<button type="submit" class="btn btn-success" style="color:white">ویرایش قرارداد</button>
</td>
</tr>
</table>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
</div>
enter code here
</div>
</div>
</div>
#{count++;}
// this is internal css
<style>
body:not(.modal-open){
padding-right: 0px !important;
}
</style>

How to convert HTML table to List using Thymeleaf

I am creating an spring-boot MVC web application.
When I get the contents from the controller I can display them correctly on the view. The content is an object with a List. The list is displayed on a table.
<form th:action="#{/}" th:object="${homeVO}" method="post">
<div align="center">
<table width="80%" id="sectionsTable">
<thead>
<th width="10%"><label class="tableTextTitle">ORDER</label></th>
<th width="50%"><label class="tableTextTitle">TITLE</label></th>
<th width="10%"></th>
<th width="10%"><label class="tableTextTitle">HIDE</label></th>
<th width="10%"></th>
<th width="10%"></th>
</thead>
<tbody>
<tr th:each="section, stat :${homeVO.sections}">
<td>
<input type="number" th:value="${section.id}" hidden="true" id="sectionid" />
<input type="number" class="form-control" th:value="${section.position}" id="position"/>
</td>
<td>
<input type="text" class="form-control" th:value="${section.name}" disabled="true" id="name"/>
</td>
<td align="center">
<a th:href="#{./sectionprofile(id=${section.id})}" class="btn btn-default">EDIT</a>
</td>
<td>
<input type="text" class="form-control" th:value="${section.column}" id="column"/>
</td>
<td>
<select class="form-control" id="condition">
<option value="0" th:selected="(${section.condition} == 0)"/>
<option value="1" th:text="#{minor}" th:selected="(${section.condition} == 1)"/>
<option value="2" th:text='#{minorEq}' th:selected="(${section.condition} == 2)"/>
<option value="3" th:text="#{different}" th:selected="(${section.condition} == 3)"/>
<option value="4" th:text='#{equals}' th:selected="(${section.condition} == 4)"/>
<option value="5" th:text='#{biggerEq}' th:selected="(${section.condition} == 5)"/>
<option value="6" th:text='#{bigger}' th:selected="(${section.condition} == 6)"/>
</select>
</td>
<td>
<input type="text" class="form-control" th:value="${section.criteria}" id="criteria"/>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12">
Add Section
<input type="submit" class="btn btn-default" value="SAVE" />
</div>
</form>
When I change some values on the table I want to save them. When I save, I get in the controller the object with an empty List.
#RequestMapping(method = RequestMethod.POST)
public String set(HomeVO homeVO, Model model) {
if (homeVO != null) {
for (SectionVO sectionVO : homeVO.getSections()) {
Section section = sectionRepository.findOne(sectionVO.getId());
section.setPosition(sectionVO.getPosition());
section.setColumn(sectionVO.getColumn());
section.setCondition(sectionVO.getCondition());
section.setCriteria(sectionVO.getCriteria());
sectionRepository.save(section);
}
}
...
return "home";
}
What shall I do to get the table elements back into a List?
To accomplish this rows bindings properly follow the Thymeleaf Spring guide specificaly Dynamic Fields section. There is a special syntax so your HTML should be similar to this:
<tr th:each="row,rowStat : *{rows}">
<td th:text="${rowStat.count}">1</td>
<td>
<select th:field="*{rows[__${rowStat.index}__].variety}">
<option th:each="var : ${allVarieties}"
th:value="${var.id}"
th:text="${var.name}">Thymus Thymi</option>
</select>
</td>
<td>
<input type="text" th:field="*{rows[__${rowStat.index}__].seedsPerCell}" />
</td>
<td>
<button type="submit" name="removeRow"
th:value="${rowStat.index}" th:text="#{seedstarter.row.remove}">Remove row</button>
</td>
</tr>

html align column right

I have this Html code :
<tr>
<td>
<a type="text"
name="color" >#client.Login</a>
</td>
<td>
<a type="text"
name="color" >#client.Mail</a>
</td>
<td>
<a type="text"
name="color" >#client.Password</a>
</td>
<td>
<a type="text"
name="color" >#client.Name</a>
</td>
<td width=10px align="left">
#if (i == 0)
{
<input type="radio"
name="color" checked >
}
else
{<input type="radio" name="color" >
}
</td>
</tr>
My problem is in the radio button : it is so far to the other elements. the attribute align is obsolete in HTML5 .
the dimensions :
So how can modify this snippet to got a good result?
Use CSS text-align instead of align:
<td width=10px style="text-align: right;">
#if (i == 0)
{
<input type="radio" name="color" checked >
} else{
<input type="radio" name="color" >
}
</td>

input tag bigger size and text in input tag centered vertically

This is the form I need to do:
For now I'm in this point:
As you can observe I need to create the input buttons bigger. Otherwise visually it will not work. My question would be how to create the input buttons bigger vertically and the input text stay centered vertically in middle of the box.
CSS solution would be the best.
This is my html code if it helps:
<form name="bookingform" action="form-to-email.php" method="post">
<div id="form_box" class="gradient">
<div id="center_box">
<h3>WANT TO BOOK ME?</h3>
<div id="form_data">
<br>
<table>
<tr>
<td><input type="text" value="Company name" name="company" /></td>
<td class="tdright"><input type="text" value="Name" name="name" /></td>
</tr>
<tr>
<td><input type="text" value="Telephone" name="telephone" /></td>
<td class="tdright"><input type="text" value="Email" name="email" /></td>
</tr>
<tr>
<td><input type="text" value="Booking date" name="date" /></td>
<td><input type="button" /></td>
</tr>
</table>
</div>
<div id="form_text">
<br>
<textarea rows="10" cols="40" name="message">Your text...</textarea>
<input type="submit" value="SEND" name="submit" />
</div>
<input type="image" src="" name="Send" />
</div>
</div>
</form>
input[type=button] {
height: 35px; /* increase the height */
line-height: 35px; /* vertically align the text */
}
DEMO

How can I get the value(s) of the selected item(s) of CheckBoxList using Jquery?

If I have the following CheckBoxList
<asp:CheckBoxList ID="typeCheckBoxList" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="0">Student</asp:ListItem>
<asp:ListItem Value="1">Parent</asp:ListItem>
<asp:ListItem Value="2">Educational</asp:ListItem>
<asp:ListItem Value="3">Specialist </asp:ListItem>
<asp:ListItem Value="5">Other</asp:ListItem>
</asp:CheckBoxList>
Using Jquery i want to get the values of the selected items, I use the following code
$('#<%= typeCheckBoxList.ClientID %> input:checked').each(function() {
alert($(this).val());
alert($(this).next('label').text());
});
$(this).val() always returns "on" and I can't return values such as 0 ,1, etc.
Is there any way to do that ?
EDIT : Rendered Markup:
<table id="RegisterationWUC1_typeCheckBoxList" class="listVertical" border="0">
<tr>
<td>
<input id="RegisterationWUC1_typeCheckBoxList_0" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$0" />
<label for="RegisterationWUC1_typeCheckBoxList_0">Student</label>
</td>
<td>
<input id="RegisterationWUC1_typeCheckBoxList_1" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$1" />
<label for="RegisterationWUC1_typeCheckBoxList_1">Parent</label>
</td>
<td>
<input id="RegisterationWUC1_typeCheckBoxList_2" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$2" />
<label for="RegisterationWUC1_typeCheckBoxList_2">Educational</label>
</td>
<td>
<input id="RegisterationWUC1_typeCheckBoxList_3" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$3" />
<label for="RegisterationWUC1_typeCheckBoxList_3">Specialist </label>
</td>
<td>
<input id="RegisterationWUC1_typeCheckBoxList_4" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$4" />
<label for="RegisterationWUC1_typeCheckBoxList_4">other</label>
</td>
</tr>
</table>
Since ASP.Net 2.0 doesn't render this appropriately (it's intended purpose is to get the values server-side) you can do a bit of hackery. In the code-behind, do something like this:
foreach (ListItem li in typeCheckBoxList.Items)
li.Attributes.Add("data-value", li.Value);
Then your markup will look like this (ignore the shorter names, my test wasn't in another named container, and it doesn't matter one bit for the question at hand):
<table id="typeCheckBoxList">
<tr>
<td>
<span data-value="0">
<input id="typeCheckBoxList_0" type="checkbox" name="H$M$typeCheckBoxList$0" />
<label for="typeCheckBoxList_0">Student</label>
</span>
</td>
<td>
<span data-value="1">
<input id="typeCheckBoxList_1" type="checkbox" name="H$M$typeCheckBoxList$1" />
<label for="typeCheckBoxList_1">Parent</label>
</span>
</td>
<td>
<span data-value="2">
<input id="typeCheckBoxList_2" type="checkbox" name="H$M$typeCheckBoxList$2" />
<label for="typeCheckBoxList_2">Educational</label>
</span>
</td>
<td>
<span data-value="3">
<input id="typeCheckBoxList_3" type="checkbox" name="H$M$typeCheckBoxList$3" />
<label for="typeCheckBoxList_3">Specialist </label>
</span>
</td>
<td>
<span data-value="5">
<input id="typeCheckBoxList_4" type="checkbox" name="H$M$typeCheckBoxList$4" />
<label for="typeCheckBoxList_4">Other</label>
</span>
</td>
</tr>
</table>
Notice that extra <span data-value="valueHere"></span> wrapped around it now? You can just use .closest() or .parent() to get to the <span> and retrieve that value via .attr(), like this:
$('#typeCheckBoxList input:checked').each(function() {
alert($(this).closest('span').attr('data-value'));
alert($(this).next('label').text());
});
Give it a try in a demo here :) If it helps at all. the default rendering mode for ASP.Net 4.0 does render the value in markup, as it should. The reason for the data-thing format on the attribute is to be as valid as possible, these are called data attributes, added to the spec in HTML5, but cause no issues for this in 4.

Resources