I need to make the text input field in responsive. Currently, it matches width of other input elements, but when I decrease my screen size, the input field does not respond accordingly.
<div class="col-sm-12">
<div class="col-sm-8">
<table border="0" id="dynamic_field">
<tr>
<td><input type="text" placeholder="Digite o link da arquitetura" class="form-control"
id="txt-link[]" name="txt-link[]" value="{{old('txt-link[]')}}" style="width: 730px;">
#if($errors->has('txt-link.0'))
#foreach ($errors->get('txt-link.0') as $message)
<span class="help-block" style="margin-top:5px; margin-bottom:-5px; color:rgb(170, 56, 56)"><b>{{ $message }}</b></span>
#endforeach
#endif </td>
<td><button type="button" name="add" id="add"
<a class="btn btn-primary"><i class="fa fa-plus"></i>
</a></button></td>
</tr>
</table>
</div>
</div>
You should not fixed your width. Remove style="width: 730px;"
You have to give your table width 100%. In Bootstrap 4 there is a class w-100 to do that.
<table border="0" id="dynamic_field" class="w-100">
----
</table>
I think it will solve your problem.
Related
I have a in item list in each row has an edit button, which is supposed to open a partial view with the elements data to edit.
In the loop I use to fill tge datatable, I also create the partial views for each row element.
When I click the buton it always opens the first element partial view, even if I press the Nth element.
How do I get the code to open the corresponding partial view?
Code:
<table class="table table-hover" id="tabela_rota">
<thead>
<tr>
<th>
</th>
<th>
Cliente
</th>
<th>
Rota
</th>
<th>
Distância Ideal
</th>
<th>
Ativa
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<partial>
#{await Html.RenderPartialAsync("Edit", item);}
</partial>
<tr>
<td width="15">
</td>
<td width="15%">
#Html.DisplayFor(modelItem => item.id_cliente)
</td>
<td width="25%">
#Html.DisplayFor(modelItem => item.nome)
</td>
<td width="15%">
#Html.DisplayFor(modelItem => item.distancia_ideal)
</td>
<td width="10%">
#Html.DisplayFor(modelItem => item.activa)
</td>
<td>
<button type="button" class="btn btn-outline-primary" onclick="openNavEdit()">
Editar
</button>
<button type="button" class="btn btn-outline-danger">Delete</button>
</td>
</tr>
}
</tbody>
</table>
JS Function:
function openNavEdit() {
document.getElementById("mySidepanelEdit").style.width = "350px";
}
View:
#model GestaoCircuitos.Models.Rota
#{
ViewData["Title"] = "Editar";
}
<div id="mySidepanelEdit" class="sidepanel">
<div id="top_title">
<h6 id="nova_rota">Editar Rota</h6>
<button class="closebtn" onclick="closeNavEdit()">×</button>
</div>
<div class="row form-row-rotas">
<div class="col-12">
<form asp-action="Edit" class="form-rotas">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="id" />
<div class="form-label-group">
<input id="nome" class="form-control" placeholder="Nome" />
<label asp-for="nome" class="control-label">Nome</label>
<span asp-validation-for="nome" class="text-danger"></span>
</div>
<div class="form-label-group">
<input type="text" asp-for="distancia_ideal" class="form-control" placeholder="Distância ideal" />
<label asp-for="distancia_ideal" class="control-label">Distância ideal</label>
<span asp-validation-for="distancia_ideal" class="text-danger"></span>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" asp-for="activa" /> Ativa
</label>
</div>
<div class="form-group">
<input type="submit" value="Editar" class="btn btn-primary" />
</div>
</form>
</div>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
It's because you're opening based on ID. An ID attribute needs to be unique throughout a document. If you select on an ID, you'll only get the first element.
You'll have to give each edit modal either a unique ID or a class to select from. Try this:
#model GestaoCircuitos.Models.Rota
#{
ViewData["Title"] = "Editar";
}
<div id="sidepanel-edit-#(item.id)" class=" sidepanel">
<div id="top_title">
<h6 id="nova_rota">Editar Rota</h6>
<button class="closebtn" onclick="closeNavEdit(#(item.id))">×</button>
</div>
<div class="row form-row-rotas">
<div class="col-12">
<form asp-action="Edit" class="form-rotas">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="id" />
<div class="form-label-group">
<input id="nome" class="form-control" placeholder="Nome" />
<label asp-for="nome" class="control-label">Nome</label>
<span asp-validation-for="nome" class="text-danger"></span>
</div>
<div class="form-label-group">
<input type="text" asp-for="distancia_ideal" class="form-control" placeholder="Distância ideal" />
<label asp-for="distancia_ideal" class="control-label">Distância ideal</label>
<span asp-validation-for="distancia_ideal" class="text-danger"></span>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" asp-for="activa" /> Ativa
</label>
</div>
<div class="form-group">
<input type="submit" value="Editar" class="btn btn-primary" />
</div>
</form>
</div>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Above, we add a unique id for each edit edit form. Then we can reference those unique id attributes in the main template:
<table class="table table-hover" id="tabela_rota">
<thead>
<tr>
<th>
</th>
<th>
Cliente
</th>
<th>
Rota
</th>
<th>
Distância Ideal
</th>
<th>
Ativa
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<partial>
#{await Html.RenderPartialAsync("Edit", item);}
</partial>
<tr>
<td width="15">
</td>
<td width="15%">
#Html.DisplayFor(modelItem => item.id_cliente)
</td>
<td width="25%">
#Html.DisplayFor(modelItem => item.nome)
</td>
<td width="15%">
#Html.DisplayFor(modelItem => item.distancia_ideal)
</td>
<td width="10%">
#Html.DisplayFor(modelItem => item.activa)
</td>
<td>
<button type="button" class="btn btn-outline-primary" onclick="openNavEdit(#(item.id)">
Editar
</button>
<button type="button" class="btn btn-outline-danger">Delete</button>
</td>
</tr>
}
</tbody>
</table>
and your Javascript would look like:
function openNavEdit(id) {
document.getElementById("sidepanel-edit-" + id).style.width = "350px";
}
function closeNavEdit(id) {
document.getElementById("sidepanel-edit-" + id).style.width = "0";
}
Something to note, I'm assuming your model has an id attribute.
I have a table in which there are several rows. For instance a table with flight reservations. To delete one reservation I need to have the customer id number as well as the flight id.
Considering I have only one button to try to submit these values to my Servlet, how do I do so?
I tried hiding one button but the solution doesn't seem to work for me.
I use request.getParameter() (with 2 separate variables of course) to try to fetch both values but at the end only one is captured and the other is null. Any other ideas?
This is an example of the table I have.
flight_id customer_id
Value 1 Value 2
Form buttons :
<section class="about-info-area section-gap">
<div class="container">
<div class="row align-items-center">
<form method="post" action="/admin_reservations" id="form_reservation"></form>
<table class="table table-bordered table-striped" style="float: left;">
<caption style="text-align: center; caption-side: top"><h2>Liste des réservations</h2></caption>
<thead class="thead-dark">
<tr>
<th scope="col">N°Flight</th>
<th scope="col">N°Client</th>
<th scope="col">Flight price</th>
</tr>
</thead>
<tbody>
<% for (Reservation reservation : allReservations) { %>
<tr>
<th scope="row"><% out.println(reservation.getFlight().getFlightNum()); %></th>
<td><% out.println(reservation.getClientNum()); %></td>
<td><% out.println(reservation.getFlightPrice()); %> €</td>
<td align="center">
<input type="submit" class="btn btn-default btn-sm" name="delete_reservation_client"
form="form_reservation" onClick="window.location.reload();" hidden
value="<% out.println(reservation.getClientNum()); %>">
</input>
<button type="submit" class="btn btn-default btn-sm" name="delete_reservation_flight"
form="form_reservation" onClick="window.location.reload();"
value="<% out.println(reservation.getFlight().getFlightNum()); %>"><span
class="glyphicon glyphicon-trash"></span>
Delete
</button>
</td>
</tr>
<%}%>
</tbody>
</table>
</div>
</div>
And my Servlet :
if(request.getParameter("delete_reservation_client")!=null &&request.getParameter("delete_reservation_flight")!=null){
int delete_reservation_client = Integer.parseInt(request.getParameter("delete_reservation_client").trim());
int delete_reservation_flight = Integer.parseInt(request.getParameter("delete_reservation_flight").trim());
System.out.println("Client : " + delete_reservation_client);
System.out.println("Flight : " + delete_reservation_flight);
try {
DBUtils.deleteReservation(conn,delete_reservation_client,delete_reservation_flight);
} catch (SQLException e) {
e.printStackTrace();
}
}
Thanks in advance for any help.
Fares
Instead of button use <a> tag and attached both value which you want to delete . i.e :
<td align="center">
<a href="/admin_reservations?delete_reservation_client=<% out.println(reservation.getClientNum()); %>&delete_reservation_flight=<% out.println(reservation.getFlight().getFlightNum()); %>">
<span class="glyphicon glyphicon-trash"></span>
Delete
</a>
And in Servlet get these values in doGet method by writing i.e request.getParameter("delete_reservation_client") and request.getParameter("delete_reservation_flight")
I have a table like this:
<table>
<tbody>
...
<tr>
<td>
<div class="radio-inline">
<input name="sms_provider" type="radio" value="2" id="2">
<label class="text-gray-dark" for="2"> </label>
</div>
</td>
<td data-label="Server name">ServerA3</td>
<td data-label="Description"></td>
<td data-label="Status">
<label class="text-success">
<clr-icon shape="check"></clr-icon>
Default
</label>
</td>
<td data-label="Actions">
<a href="http://example.com/public/smsconfigurations/2/edit" data-tooltip="Edit Server">
<clr-icon shape="pencil" size="22" style="width: 22px; height: 22px;"></clr-icon>
</a>
</td>
</tr>
...
</tbody>
</table>
Now I wanna to check ServerA3 has Default status or no. As matter of fact I expect ServerA3 has Default text as siblings. What should I do?
I try with this code, but it doesn't work:
expect(element(by.xpath('//td[contains(text(), "ServerA3")]')).getWebElement().getDriver().findElement(by.css('*[data-label="status"]')).getText()).toContain('Default');
var status = element(by.xpath('//tr[td[.="ServerA3"]]/td[#data-label="Status"]'))
.getAttribute('innerText');
expect(status).toEqual('Default')
I'm creating an application with list of employees. An admin can see the list of employees and change their data. When he clicks "change" button, html form should be filled with chosen employee data so he could change it. I used standard mechanism in play framework but it doesn't work. I was debugging it and everything looks ok (employee data is set to form) but it doesn't display on my html form... I have no idea why...
def loadEmployee(id: Int) = Action { implicit request =>
val loadedEmployee = EmployeeService.getEmployee(id)
val employee = Await.result(loadedEmployee, Duration(5, SECONDS)).get
val employees = Await.result(EmployeeService.listAllEmployees, Duration(5, SECONDS))
val form = EmployeeForm.form.fill(EmployeeFormData(employee.name, employee.additionalInformation, employee.resume))
Ok(views.html.index(form,employees))
}
View file:
#(employeeForm: Form[models.EmployeeFormData],employees : Seq[models.Employee])
#main() {
<form id="employee-data-form" role="form" action='#routes.ApplicationController.addInformation()' method="post" class="form-horizontal" align="center" autocomplete="off">
<fieldset class="employee-fieldset">
<div class="employee-form">
<label class="form-title" style="color: #F8741B; font-size: 22px;font-weight: bold; text-decoration:none">title</label>
</div>
<br/>
<table align="center" cellspacing="20">
<tr>
<td align="left">
<div class="employee-form" id="name_field_label">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<strong>name</strong> :
</div>
</div>
</div>
</td>
<td align="center">
<div class="employee-form" id="name_field_value">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<input type="text" id="name" name="name" value="" placeholder="First Name" class="form-control input-lg" required>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td align="left">
<div class="employee-form" id="additionalInformation_field_label">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<strong>Additional information</strong> :
</div>
</div>
</div>
</td>
<td align="center">
<div class="employee-form" id="additionalInformation_field_value">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<textarea rows="4" cols="50" id="additionalInformation" name="additionalInformation" value="" class="form-control input-lg" required></textarea>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td align="left">
<div class="employee-form" id="resume_field_label">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<strong>resume</strong> :
</div>
</div>
</div>
</td>
<td align="center">
<div class="employee-form" id="resume_field_value">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<textarea rows="4" cols="50" id="resume" name="resume" class="form-control input-lg" required></textarea>
</div>
</div>
</div>
</td>
</tr>
</table>
<br/>
<div class="form-actions controls ynt-btn-xlarge">
<button type="submit" class="btn btn-primary ynt-btn-orange">Add</button>
</div>
</fieldset>
</form>
<div class="employee-display" >
<fieldset>
<legend align="center"><h3>Registered Employees</h3></legend>
<table cellspacing="20">
<tr>
<th>employeeid</th>
<th>firstname</th>
<th>lastname</th>
<th>resume</th>
</tr>
#for(employee <- employees){
<tr>
<td>#employee.id</td>
<td>#employee.name</td>
<td>#employee.additionalInformation</td>
<td>#employee.resume</td>
<td>delete</td>
<td>loadEmployee</td>
</tr>
}
</table>
</fieldset>
</div>
}
Your controller code looks OK - you're filling a Form[EmployeeFormData] and passing it to your template. The trouble is, you never use your employeeForm inside the template - there's no way that form can be populated.
If you read up on the Play documentation for showing forms in a view template you'll see that there is a whole family of helpers available for this purpose. In many cases, they are almost as easy to write as the "plain HTML" version such as you've used. Here's an example:
Where you had:
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<input type="text" id="name" name="name" value="" placeholder="First Name" class="form-control input-lg" required>
</div>
You will need:
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
#helper.inputText(
employeeForm("name"),
'id -> "name",
'placeholder -> "First Name",
'class -> "form-control input-lg",
'required -> "true"
)
</div>
Notice how you can pass any number of arbitrary arguments into the generated HTML by prefixing with the ' character. This can be very handy, for example if you would like to set extra data- attributes on the input.
I have two tables for my inventory first is the Item List then the Item Info
I bind the Item List to a HTML Table the add a button for each row the purpose of the button is to show the Item Info or table via modal
I have already done the table and modal design but i cant get or pass the Item ID for my Item List to my modal
can anyone help me i'm kind a new in HTML (noob hir :3)
<thead>
<tr>
<th class="text-center">Item ID</th>
<th class="text-center">Particular</th>
</tr>
</thead>
<tbody class="searchable">
<% List<Inventory.MODEL.adminView>x = new List
<Inventory.MODEL.adminView>(); Inventory.BAL.ItemBAL z = new Inventory.BAL.ItemBAL(); x = z.getAdminView().ToList(); foreach (var item in x) {%>
<tr>
<td>
<%=i tem.ID %>
</td>
<td>
<%=i tem.Particulars %>
</td>
<%}%>
<td class="text-center">
<span class='glyphicon glyphicon-info-sign'></span>
</td>
</tr>
<%} %>
</tbody>
</table>
</div>
</div>
<div id="Modal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Item Inventory</h4>
</div>
<div class="modal-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-center">Item ID</th>
<th class="text-center">Total Quantity</th>
</tr>
</thead>
<tbody>
<% iteminvents(); %>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
that's my code, anyone can advice or can help me ?
Pass this in myFunction() as argument , As myFunction(this)
and inside function you can get ItemId as below. I have used jquery here.
function myFunction(sender)
{
var CurrentRow=$(sender).closest("tr");
var ItemId=$("td:eq(0)",$(CurrentRow)).html(); // Can Trim also if needed
}