Hi I need to add textfield in html table using bootstrap, but when using the bootstrap class in html table cell teh textfield is too small.
In the following code example the problem is in textfield id="Winvnetv".
<table class="table table-bordered table-striped">
<tr>
<form id="formSuppliestrn" method="post" class="form-horizontal" >
<td>
<input type="text" name="Wsupplyid" id="Wsupplyid" >
</td>
<td><input type="text" name="Wsupplydesc" id="Wsupplydesc"></td>
<td><input type="text" name="Wquantity" id="Wquantity"></td>
<td>
<div class="form-group">
<label class="col-xs-3 control-label">Ποσό τιμολογίου</label>
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-addon">€</span>
<input type="text" class="form-control" name="Winvnetv" id="Winvnetv"/>
</div>
</div>
</div>
</td>
<td>
<input type="text" name="Wtotv" id="Wtotv">
</td>
<td> <button type="submit" class="btn btn-sm btn-primary" id="trnadd">
<span class="glyphicon glyphicon-plus-sign"></span>
</button>
</td>
</form>
</tr>
</tbody>
</table>
any idea?
You can add the input-lg or input-sm class to the textbox. It will increase its size.
<input type="text" class="form-control input-lg" name="Winvnetv" id="Winvnetv"/>
Related
I use Java EE with JSTL and Materialize css for my project.
When i try to submit a Materialize css form in a jsp file i get an error.
> com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolationException:
> Column 'name' cannot be null
Here is the form:
<div class="row">
<form class="col s12" action="update_comment" method="post">
<input type="hidden" name="comment_id" value="${comment.comment_id}" >
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
<input disabled value="${comment.name}" id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">Имя комментатора</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">mode_edit</i>
<textarea id="icon_prefix2" class="materialize-textarea">${comment.text}</textarea>
<label for="icon_prefix2">Отредактируйте комментарий</label>
</div>
</div>
<div>
<button class="btn waves-effect waves-light" type="submit" name="submit-button" id="submit-button">Подтвердить
<i class="material-icons right">send</i>
</button>
<a id="buttonCancel" class="waves-effect waves-light red btn">
<i class="material-icons right">close</i>Отмена</a>
</div>
</form>
</div>
But when i use normal html code like this it works:
<div>
<form action="update_comment" method="post" id="commentForm">
<table class="form">
<input type="hidden" name="comment_id" value="${comment.comment_id}">
<tr>
<td align="right">Category name:</td>
<td align="left"><input type="text" id="name" name="name" size="20" value="${comment.name}" /></td>
</tr>
<tr>
<td align="right">text:</td>
<td align="left"><input type="text" id="text" name="text" size="20" value="${comment.text}" /></td>
</tr>
<tr><td> </td></tr>
<tr>
<td colspan="2" align="center">
<button type="submit">Save</button>
<button id="buttonCancel" >Cancel</button>
</td>
</tr>
</table>
</form>
</div>
What is my mistake? Thanks
I've been trying to align the textboxes but i can't seem to get it right. i also tried to google it but i can't figure it out.
<form name="salary" id="salary">
<b> <tr>
Name: <input type="text"> <br>
Sales: <input type="text" name="sales" id="sales"> </td>
<br> <br> <br>
Commission: <input type="text" name="comm" id="comm">
Housing & Utilities: <input type="text" name="housing" id="housing">
<br>
Gross Pay: <input type="text" name="gross" id="gross">
Food & Clothing: <input type="text" name="food"
id="food">
<br>
Deductions: <input type="text" name="deduction" id="deduction">
Entertainment: <input type="text" name="entertainment" id="entertainment">
<br>
Net Pay: <input type="text" name="net" id="net">
Miscellaneous: <input type="text" name="mis" id="mis">
<br>
<input type="button" value="Calculate" onclick="bonus()" >
<input type="reset" value="reset">
<b> </form>
To better alignment you need to use css.
You can use in 2 way;
Pure CSS
CSS Frameworks (Bootstrap, Tailwind ...)
I will share second solution which is generated by bootstrap.
If you prefer first one that would be great loss of time so frameworks better if you know the basics of html and css.
First Step: You need to embed bootstrap files to your html file.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Second Step: Create a bootstrap form (it is actually same form but css specifications would be inheritance by bootstrap, so that's mean you don't need a lot of lines css)
<form>
<!--Creates a row with 12 columns-->
<div class="row">
<!--Use 12/12 columns that's mean 1 row-->
<div class="col-md-12">
<!--Form Group allows you a define label dependent to input and some extra features-->
<div class="form-group">
<!--Label's for and input's Id matches-->
<label for="exampleInputEmail1">Name</label>
<!--Placeholder is very useful, you can route user.-->
<input type="text" class="form-control" id="exampleInputName" aria-describedby="emailHelp"
placeholder="Enter your name">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="exampleInputEmail1">Surname</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Enter your surname">
</div>
</div>
<!--Use 6/12 columns that's mean a half row-->
<div class="col-md-6">
<div class="form-group">
<label for="exampleName">Commission</label>
<input type="text" class="form-control" id="exampleName" placeholder="Enter Commission">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Housing & Utilities</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleName">Gross Pay</label>
<input type="text" class="form-control" id="exampleName">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Food & Clothing</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleName">Deductions</label>
<input type="text" class="form-control" id="exampleName">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Entertainments</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
For detail bootstrap forms manual: https://getbootstrap.com/docs/4.2/components/forms/
Codepen: https://codepen.io/bananamaster/pen/eYYoQPw
People tend to act iffy about HTML tables, but this is a perfectly good situation to use a table for
/* kindly match container width for aesthetics */
#salary, #salary table, #salary input[type="text"] {
width: 100%;
box-sizing: border-box;
}
<form name="salary" id="salary"><table><tr>
<td colspan="2"><!-- these two are two-cell-wide -->
Name:
<br><input type="text">
</td>
</tr><tr>
<td colspan="2">
Sales:
<br><input type="text">
</td>
</tr><tr>
<td width="50%">
Commission:
<br><input type="text">
</td>
<td width="50%">
Housing & Utilities:
<br><input type="text">
</td>
</tr><tr>
<td><!-- no need to specify width from hereon -->
Gross Pay:
<br><input type="text">
</td>
<td>
Food & Clothing:
<br><input type="text">
</td>
</tr><tr>
<td>
Deductions:
<br><input type="text">
</td>
<td>
Entertainment:
<br><input type="text">
</td>
</tr><tr>
<td>
Net Pay:
<br><input type="text">
</td>
<td>
Miscellaneous:
<br><input type="text">
</td>
</tr><tr>
<td colspan="2"><!-- this one's also wider -->
<input type="button" value="Calculate" onclick="bonus()" />
<input type="reset" value="Reset"/>
</td>
</tr></table></form>
When I put HTML5 Input type "datetime-local" in a Table td, it takes some min-width and becomes non responsive when we adjust the screen size. Here is my code
<div class="container">
<table class="table table-bordered table-striped table-responsive table-hover">
<tbody>
<tr>
<td><input type="text" class="form-control" value="Sample" /></td>
<td><input type="datetime-local" class="form-control" value=""/></td>
<td><input type="datetime-local" class="form-control" value=""/></td>
<td><input type="text" class="form-control" value="Sample" /></td>
</tr>
</tbody>
</table>
</div>
But when I put the same control in Div it is responsive and works fine.
<div class="container" style="margin-top:10px">
<div class="row">
<div class="col-xs-1">
<input type="text" class="form-control" value="Sample" />
</div>
<div class="col-xs-5">
<input type="datetime-local" class="form-control" value="" />
</div>
<div class="col-xs-5">
<input type="datetime-local" class="form-control" value="" />
</div>
<div class="col-xs-1">
<input type="text" class="form-control" value="Sample" />
</div>
</div>
But I want to use the Table. How can I use HTML5 Input type "datetime-local "control in Table and be responsive?
Add one more <div class="table-responsive"></div> inside container you can solve this problem...........
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="Sample" />
</td>
<td>
<input type="datetime-local" class="form-control" value="" />
</td>
<td>
<input type="datetime-local" class="form-control" value="" />
</td>
<td>
<input type="text" class="form-control" value="Sample" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
Model is saving but all is null values excepts dates
There is not thrown error.
$fillable are directly copied from the field at my migrations.
I cant find why is that it is saving null values on the database
Here is my Code
My Model
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;
class Disbursement_Information extends Model
{
use SoftDeletes;
protected $table = 'disbursement';
protected $fillable = [
'cv_number',
'payee_id',
'amount',
'check_number',
'release_date',
'first_collection_date',
'last_collection_date',
'maturity_date'
];
protected $dates = [
'created_at',
'updated_at',
'deleted_at'
];
}
My Controller
public function postDisbursement(Request $request, $id){
$loans = new Disbursement_Information;
$input = $request->all();
$loans->save($input);
}
HTML FORM
<div id="step-1">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"> List of All Clients</h1>
<h2>Total Clients: <b>3</b></h2>
<div class="row">
</div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<hr>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="cv_number"> Check Voucher # </label>
<input type="text" class="form-control" name="cv_number" id="cv_number" required>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="check_number"> Check # </label>
<input type="text" class="form-control" name="check_number" id="check_number" required>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="first_collection_date"> First Payment </label>
<input type="date" class="form-control" name="first_collection_date" id="first_collection_date" required>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="last_collection_date"> Last Payment </label>
<input type="date" class="form-control" name="last_collection_date" id="last_collection_date" required>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="maturity_date"> Maturity Date </label>
<input type="date" class="form-control" name="maturity_date" id="maturity_date" required>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="payee_name"> Payee </label>
<input type="text" class="form-control" name="payee_name" id="payee_name" readonly>
<input type="hidden" class="form-control" name="payee_id" id="payee_id" required>
</div>
</div>
<input type="hidden" name="_token" value="JvvXJbloRAzQnj4oz4ve6Z8OLLia270Fs6utSO5a">
<table class="table table-striped">
<thead>
<th>Name</th>
<th style="">Loan Amount</th>
<th style="text-align:center">Action</th>
</thead>
<tbody>
<tr >
<td class="">
Morgado, Ashbee, Allego
</td>
<td>
<input type="number" min="2000" max="99000" name="loan_amount[1]" class="form-control loan-amount">
</td>
<td style="text-align:center">
<div class="radio">
<label><input type="checkbox" class="reloan" name="reloan[1]" p_id = "1 "p_name="Morgado, Ashbee, Allego" target-rdb="rdb1"> Not re-loaning/loaning </label>
<label id="rdb1"><input type="radio" class="rdbPayee" name="payee_id" value="1" p_name="Morgado, Ashbee, Allego">Mark As Payee</label>
<button type="button" class="btn btn-sm btn-default loan-summary"><i class="fa fa-info-circle fa-5" aria-hidden="true"></i></button>
</div>
</td>
</tr>
<tr >
<td class="">
Melton, Barbara, None
</td>
<td>
<input type="number" min="2000" max="99000" name="loan_amount[2]" class="form-control loan-amount">
</td>
<td style="text-align:center">
<div class="radio">
<label><input type="checkbox" class="reloan" name="reloan[2]" p_id = "2 "p_name="Melton, Barbara, None" target-rdb="rdb2"> Not re-loaning/loaning </label>
<label id="rdb2"><input type="radio" class="rdbPayee" name="payee_id" value="2" p_name="Melton, Barbara, None">Mark As Payee</label>
<button type="button" class="btn btn-sm btn-default loan-summary"><i class="fa fa-info-circle fa-5" aria-hidden="true"></i></button>
</div>
</td>
</tr>
<tr >
<td class="">
Bonyton, Ester, Jaxis
</td>
<td>
<input type="number" min="2000" max="99000" name="loan_amount[3]" class="form-control loan-amount">
</td>
<td style="text-align:center">
<div class="radio">
<label><input type="checkbox" class="reloan" name="reloan[3]" p_id = "3 "p_name="Bonyton, Ester, Jaxis" target-rdb="rdb3"> Not re-loaning/loaning </label>
<label id="rdb3"><input type="radio" class="rdbPayee" name="payee_id" value="3" p_name="Bonyton, Ester, Jaxis">Mark As Payee</label>
<button type="button" class="btn btn-sm btn-default loan-summary"><i class="fa fa-info-circle fa-5" aria-hidden="true"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="modal-footer">
<button type="submit" class="btn btn-success"> Submit </button>
</div>
</div>
I tried to use bootstrapping to my whole project. But, the bootstrap works for the heading tag and not for the others. My codes are as follows.
<div class="container">
<div class="col-md-12">
<form class="form-horizontal templatemo-create-account templatemo-container" enctype="multipart/form-data" role="form" action="" method="post">
<div class="form-inner">
<center><em><h2>New Cumulative Deposit Account</h2></em></center>
<div id="cum_app_info">
<center> <h3> Personal Information </h3></center>
<table class="table table-striped">
<tr>
<td> <label for="cumfirstapp" class="control-label">First Applicant</label> </td>
<td> <input type="text" name="first_app" id="first_app" required class="form-control" value=""> </td>
<td> <label for="cumfirstappid" class="control-label">Member Id</label> </td>
<td> <input type="text" name="first_cum_app_id" id="first_cum_app_id" required class="form-control" value=""> </td>
</tr>
<tr>
<td> <label for="cumsecondapp" class="control-label">Second Applicant</label> </td>
<td> <input type="text" name="second_app" id="second_app" class="form-control" value=""> </td>
<td> <label for="cumsecondappid" class="control-label">Member Id</label> </td>
<td> <input type="text" name="second_cum_app_id" id="second_cum_app_id" class="form-control" value=""> </td>
</tr>
<tr>
<td colspan="4"><input type="submit" name="cum_app_next" class="btn btn-info" id="cum_app_next" value="Next" />
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
</div>
I've made some minor changes like replacing the "center" elements with .text-center classes but it was working fine for me.
http://jsfiddle.net/c6b2trmw/1/
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal templatemo-create-account templatemo-container" enctype="multipart/form-data" role="form" action="" method="post">
<div class="form-inner">
<h2 class="text-center">
<em>New Cumulative Deposit Account</em>
</h2>
<div id="cum_app_info">
<h3 class="text-center">
Personal Information
</h3>
<table class="table table-striped">
<tr>
<td>
<label for="first_app" class="control-label">First Applicant</label>
</td>
<td>
<input type="text" name="first_app" id="first_app" required="" class="form-control" value=""/>
</td>
<td>
<label for="first_cum_app_id" class="control-label">Member Id</label>
</td>
<td>
<input type="text" name="first_cum_app_id" id="first_cum_app_id" required="" class="form-control" value=""/>
</td>
</tr>
<tr>
<td>
<label for="second_app" class="control-label">Second Applicant</label>
</td>
<td>
<input type="text" name="second_app" id="second_app" class="form-control" value=""/>
</td>
<td>
<label for="second_cum_app_id" class="control-label">Member Id</label>
</td>
<td>
<input type="text" name="second_cum_app_id" id="second_cum_app_id" class="form-control" value=""/>
</td>
</tr>
<tr>
<td colspan="4">
<input type="submit" name="cum_app_next" class="btn btn-info" id="cum_app_next" value="Next"/>
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
</div>
</div>