I have used Bootstrap 3 for the table format , i need to add row in a dynamically with php but showing some misalignment, I have used row span 9, but need dynamic row ...Kindly review my html code and clear this issues....
<textarea name="textarea" rows="2" class="form-control" type="text" placeholder="Goals"></textarea>
<table border="1" class="table" >
<tr>
<th> </th>
<th width="15%">Goals</th>
<th width="15%">Comments</th>
<th width="10%">UOM</th>
<th width="10%">Weights</th>
<th width="10%">Pre. Year</th>
<th width="10%">Curr. Year</th>
<th width="10%">CYA</th>
<th width="10%">Achievements</th>
<th width="10%">Comments</th>
</tr>
<tr>
<td align="center" rowspan="9" class="first" ><br>
Financial <span class="addrow"> <i class="addplus fa fa-plus"></i> Add Goal </span> </td>
<td> </td>
<td><textarea type="text" rows="2" class="form-control" placeholder="Commands"></textarea></td>
<td><input type="text" class="form-control" placeholder="UOM"></td>
<td><input type="text" class="form-control" placeholder="Weights"></td>
<td><input type="text" class="form-control" placeholder="FY14"></td>
<td><input type="text" class="form-control" placeholder="FY15"></td>
<td><input type="text" class="form-control" placeholder="FY16"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Achievements"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Comments"></td>
</tr>
<tr>
<td><textarea type="text" rows="2" class="form-control" placeholder="Goals"></textarea></td>
<td><textarea type="text" rows="2" class="form-control" placeholder="Commands"></textarea></td>
<td><input type="text" class="form-control" placeholder="UOM"></td>
<td><input type="text" class="form-control" placeholder="Weights"></td>
<td><input type="text" class="form-control" placeholder="FY14"></td>
<td><input type="text" class="form-control" placeholder="FY15"></td>
<td><input type="text" class="form-control" placeholder="FY16"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Achievements"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Comments"></td>
</tr>
<tr>
<td><textarea type="text" rows="2" class="form-control" placeholder="Goals"></textarea>
</td>
<td><textarea type="text" rows="2" class="form-control" placeholder="Commands"></textarea></td>
<td><input type="text" class="form-control" placeholder="UOM"></td>
<td><input type="text" class="form-control" placeholder="Weights"></td>
<td><input type="text" class="form-control" placeholder="FY14"></td>
<td><input type="text" class="form-control" placeholder="FY15"></td>
<td><input type="text" class="form-control" placeholder="FY16"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Achievements"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Comments"></td>
</tr>
<tr>
<td><textarea type="text" rows="2" class="form-control" placeholder="Goals"></textarea></td>
<td><textarea type="text" rows="2" class="form-control" placeholder="Commands"></textarea></td>
<td><input type="text" class="form-control" placeholder="UOM"></td>
<td><input type="text" class="form-control" placeholder="Weights"></td>
<td><input type="text" class="form-control" placeholder="FY14"></td>
<td><input type="text" class="form-control" placeholder="FY15"></td>
<td><input type="text" class="form-control" placeholder="FY16"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Achievements"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Comments"></td>
</tr>
<tr>
<td><textarea type="text" rows="2" class="form-control" placeholder="Goals"></textarea>
</td>
<td><textarea type="text" rows="2" class="form-control" placeholder="Commands"></textarea></td>
<td><input type="text" class="form-control" placeholder="UOM"></td>
<td><input type="text" class="form-control" placeholder="Weights"></td>
<td><input type="text" class="form-control" placeholder="FY14"></td>
<td><input type="text" class="form-control" placeholder="FY15"></td>
<td><input type="text" class="form-control" placeholder="FY16"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Achievements"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Comments"></td>
</tr>
<tr>
<td><textarea type="text" rows="2" class="form-control" placeholder="Goals"></textarea></td>
<td><textarea type="text" rows="2" class="form-control" placeholder="Commands"></textarea></td>
<td><input type="text" class="form-control" placeholder="UOM"></td>
<td><input type="text" class="form-control" placeholder="Weights"></td>
<td><input type="text" class="form-control" placeholder="FY14"></td>
<td><input type="text" class="form-control" placeholder="FY15"></td>
<td><input type="text" class="form-control" placeholder="FY16"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Achievements"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Comments"></td>
</tr>
<tr>
<td><textarea type="text" rows="2" class="form-control" placeholder="Goals"></textarea></td>
<td><textarea type="text" rows="2" class="form-control" placeholder="Commands"></textarea></td>
<td><input type="text" class="form-control" placeholder="UOM"></td>
<td><input type="text" class="form-control" placeholder="Weights"></td>
<td><input type="text" class="form-control" placeholder="FY14"></td>
<td><input type="text" class="form-control" placeholder="FY15"></td>
<td><input type="text" class="form-control" placeholder="FY16"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Achievements"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Comments"></td>
</tr>
<tr>
<td><textarea type="text" rows="2" class="form-control" placeholder="Goals"></textarea></td>
<td><textarea type="text" rows="2" class="form-control" placeholder="Commands"></textarea></td>
<td><input type="text" class="form-control" placeholder="UOM"></td>
<td><input type="text" class="form-control" placeholder="Weights"></td>
<td><input type="text" class="form-control" placeholder="FY14"></td>
<td><input type="text" class="form-control" placeholder="FY15"></td>
<td><input type="text" class="form-control" placeholder="FY16"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Achievements"></td>
<td class="colum"><input type="text" class="form-control" placeholder="Comments"></td>
Related
I would like to size and align the header elements in a HTML table's thead section with the header elements in a nested table.
The parent table provides the alternating-row coloring, while the nested table allows me to position the fields in multiple rows.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>Project</th>
<th>Date</th>
<th>Starting</th>
<th>Ending</th>
<th>+/-</th>
<th>Duration</th>
<th>Rate</th>
<th>Total</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="9">
<form method="post" action="/edit">
<table>
<tbody>
<tr>
<td><input type="text" class="form-control form-control-sm" placeholder="Project"></td>
<td><input type="date" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="number" step="0.25" class="form-control form-control-sm"></td>
<td><input type="number" class="form-control form-control-sm" disabled=""></td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input disabled="" type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
Delete
</td>
</tr>
<tr>
<td colspan="8">
<input type="text" class="form-control form-control-sm" placeholder="Notes">
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
</tbody>
</table>
I tried adding column classes (class="col-sm-4") to the header and detail rows, but that didn't work well.
The Fiddle.
Seems to me you check all the boxes with a regular ol' table and a wee bit o' custom CSS. Why fight so hard to make the library do what you want?
To get the forms working, see this answer. Basically you can create a form element for each input row and then use the form attribute on any input in the table to associate it with the proper form.
Also, to be accessible your inputs all need labels. There are ways of doing that without them being visible in the page. It's important.
.table-striped-pairs tr:nth-child(4n-2) td,
.table-striped-pairs tr:nth-child(4n-3) td {
background-color: #f2f2f2;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<table class="table table-sm table-striped-pairs">
<thead>
<tr>
<th>Project</th>
<th>Date</th>
<th>Starting</th>
<th>Ending</th>
<th>+/-</th>
<th>Duration</th>
<th>Rate</th>
<th>Total</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control form-control-sm" placeholder="Project"></td>
<td><input type="date" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="number" step="0.25" class="form-control form-control-sm"></td>
<td><input type="number" class="form-control form-control-sm" disabled=""></td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input disabled="" type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
Delete
</td>
</tr>
<tr>
<td colspan="9">
<input type="text" class="form-control form-control-sm" placeholder="Notes">
</td>
</tr>
<tr>
<td><input type="text" class="form-control form-control-sm" placeholder="Project"></td>
<td><input type="date" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="number" step="0.25" class="form-control form-control-sm"></td>
<td><input type="number" class="form-control form-control-sm" disabled=""></td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input disabled="" type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
Delete
</td>
</tr>
<tr>
<td colspan="9">
<input type="text" class="form-control form-control-sm" placeholder="Notes">
</td>
</tr>
<tr>
<td><input type="text" class="form-control form-control-sm" placeholder="Project"></td>
<td><input type="date" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="number" step="0.25" class="form-control form-control-sm"></td>
<td><input type="number" class="form-control form-control-sm" disabled=""></td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input disabled="" type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
Delete
</td>
</tr>
<tr>
<td colspan="9">
<input type="text" class="form-control form-control-sm" placeholder="Notes">
</td>
</tr>
<tr>
<td><input type="text" class="form-control form-control-sm" placeholder="Project"></td>
<td><input type="date" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="number" step="0.25" class="form-control form-control-sm"></td>
<td><input type="number" class="form-control form-control-sm" disabled=""></td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input disabled="" type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
Delete
</td>
</tr>
<tr>
<td colspan="9">
<input type="text" class="form-control form-control-sm" placeholder="Notes">
</td>
</tr>
<tr>
<td><input type="text" class="form-control form-control-sm" placeholder="Project"></td>
<td><input type="date" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="number" step="0.25" class="form-control form-control-sm"></td>
<td><input type="number" class="form-control form-control-sm" disabled=""></td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input disabled="" type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
Delete
</td>
</tr>
<tr>
<td colspan="9">
<input type="text" class="form-control form-control-sm" placeholder="Notes">
</td>
</tr>
<tr>
<td><input type="text" class="form-control form-control-sm" placeholder="Project"></td>
<td><input type="date" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="number" step="0.25" class="form-control form-control-sm"></td>
<td><input type="number" class="form-control form-control-sm" disabled=""></td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input disabled="" type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
Delete
</td>
</tr>
<tr>
<td colspan="9">
<input type="text" class="form-control form-control-sm" placeholder="Notes">
</td>
</tr>
</tbody>
</table>
I have a screen that I want to align the textbox so they are all on the same position. Below is the screenshot where it's not aligned:
My code:
<label>File Name: </label>
<input type="text" size="30" name="Filename" value="<%=files%>" readonly>
<br><br>
<label>URL Link: </label>
<input type="text" size="100" name="URL Link" value="<%=url%>" readonly>
<br><br>
<label>Start Date: </label>
<input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly>
<br><br>
<label>End Date: </label>
<input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" readonly required />
<br><br>
<label>Enable: </label>
<input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked />On
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" /> Off
Note: label is not being used at the moment.
I am using &emsp and obviously can't get them to align together. Been trying to fix this for an hour. Is there any way to achieve what I want?
CSS Grid is the simplest way to go for forms.
A form is a two dimensional array and grid was design for just this purpose.
Tabular data without the need for tables.
Here is a simple example:
.grid {
display: grid;
grid-template-columns: 100px 400px;
grid-gap: 10px;
}
<div class="grid">
<label>File Name:</label>
<input type="text" size="30" name="Filename" value="<%=files%>" readonly>
<label>URL Link:</label>
<input type="url" size="100" name="URL Link" value="<%=url%>" readonly>
<label>Start Date:</label>
<input class="txtStartDate" type="date" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly>
<label>End Date:</label>
<input class="txtEndDate" type="date" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" readonly required/>
<label>Enable:</label>
<div>
<input id="on" class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>
<label for="on">On</label>
<input id="off" class="mandatory" type="radio" name="radioEnableStatus" value="0" />
<label for="off">Off</label>
</div>
</div>
Method 1: Set width to <label>
label {
display: inline-block;
width: 100px;
}
<label>File Name:</label><input type="text" size="30" name="Filename" value="<%=files%>" readonly><br><br>
<label>URL Link:</label><input type="text" size="100" name="URL Link" value="<%=url%>" readonly><br><br>
<label>Start Date:</label><input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly><br><br>
<label>End Date:</label><input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" readonly required/><br><br>
<label>Enable:</label>
<input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>On
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off
Method 2: Use <table>
<table>
<tr>
<td>
<label style="display:inline-block;width:120px;">File Name:</label>
</td>
<td>
<input type="text" size="30" name="Filename" value="<%=files%>" readonly>
</td>
</tr>
<tr>
<td>
<label style="display:inline-block;width:120px;">URL Link:</label>
</td>
<td>
<input type="text" size="100" name="URL Link" value="<%=url%>" readonly>
</td>
</tr>
<tr>
<td>
<label style="display:inline-block;width:120px;">Start Date:</label>
</td>
<td>
<input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly>
</td>
</tr>
<tr>
<td>
<label style="display:inline-block;width:120px;">End Date:</label>
</td>
<td>
<input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" readonly required/>
</td>
</tr>
<tr>
<td>
<label style="display:inline-block;width:120px;">Enable:</label>
</td>
<td>
<input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>On
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off
</td>
</tr>
</table>
<br><br>
This can be done by solely using HTML or also by including some CSS Styling Elements. The only HTML method can be executed by using the HTML tables and putting your data in different rows, which will automatically align your textboxes. I am uploading the sample code for the first two fields. You can use similar implementation for the rest.
<table>
<tr>
<th><label>File Name</label></th>
<td><input type="text" size="30" name="Filename" value="<%=files%>" readonly> </td>
</tr>
<tr>
<th> URL Link </th>
<td> <input type="text" size="100" name="URL Link" value="<%=url%>" readonly></td>
</tr>
</table>
You can use fieldset
label{
display:inline-block;
width:200px;
margin-right:30px;
text-align:right;
}
fieldset{
border:none;
width:500px;
margin:0px auto;
}
<fieldset>
<label>File Name:</label><input type="text" name="Filename" value="<%=files%>" size="20" readonly>
<label>URL Link:</label><input type="text" name="URL Link" value="<%=url%>" size="20" readonly>
<label>Start Date:</label><input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" size="20" readonly>
<label>End Date:</label><input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" size="20" readonly>
<label>Enable:</label> <input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>On
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off
</fieldset>
And with divs
form {min-width:30em}
.labels {float:left; line-height:1.7em; padding-right:.3em}
.inputs {line-height:1.7em}
fieldset{border:none;}
<form method="post" action="#">
<fieldset>
<div class="labels">
File Name:<br>
URL Link::<br>
Start Date:<br>
Start Date:<br>
Enable:<br>
</div>
<div class="inputs">
<input type="text" name="Filename" value="<%=files%>" size="20" readonly><br>
<input type="text" name="URL Link" value="<%=url%>" size="20" readonly><br>
<input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" size="20" readonly><br>
<input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" size="20" readonly><br>
<input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>On
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off
</div>
</fieldset>
</form>
You can try with a float property
<div style="width:100%">
<div style="width:100%">
<label style="width:30%">File Name: </label>
<input type="text" size="30" name="Filename" value="<%=files%>" readonly style="float:right;height:100%;width:70%">
</div>
<br/>
<div style="width:100%">
<label style="width:30%">URL Link: </label>
<input type="text" size="100" name="URL Link" value="<%=url%>" readonly style="float:right;height:100%;width:70%">
</div>
<br/>
<div style="width:100%">
<label style="width:30%">Start Date:</label>
<input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly style="float:right;width:70%">
</div>
<br/>
<div style="width:100%">
<label style="width:30%">End Date:</label>
<input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" readonly required style="float:right;width:70%"/>
</div>
<br/>
<div style="width:100%">
<label style="width:30%">Enable:</label>
<div style="float :right;width:70%">
<input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>On
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off
</div>
</div>
</div>
.box{
display:flex;
align-items:center;
width:100%
}
input[type=text]{
width:350px
}
<div class="box">
<label>File Name: </label>
<input type="text" size="30" name="Filename" value="<%=files%>" readonly>
</div>
<br><br>
<div class="box">
<label>URL Link: </label>
<input type="text" size="100" name="URL Link" value="<%=url%>" readonly>
</div>
<br><br>
<div class="box">
<label>Start Date: </label>
<input class="txtStartDate" type="text" id="txtStartDate" name="Start Date"
value="<%=currentDate%>" readonly>
</div>
<br><br>
<div class="box">
<label>End Date: </label>
<input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="
<%=defaultDate%>" readonly required />
</div>
<br><br>
<div class="box">
<label>Enable: </label>
<input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked
/>On
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off
</div>
I am making a registeration form for study purpose and i am new to using php and html.
So far what I have done is :
<div style="text-align: center;"><label><span class="glyphicon glyphicon-lock"></span> Register</label></div>
<div id="register_wrapper">
<form id="frm_reg" name="frm_reg" method="POST" onsubmit="return validateForm();" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" autocomplete="off">
<!--<span class="error" id="error_blank"></span>--><input id="blank_focus" name="tp" type="text" style="border: 0px none;background-color: #FFF;box-shadow: none;cursor: default;color: transparent;" readonly/>
<br>
<table cellpadding="5">
<tr>
<td>
<div align="left"><label><span class="bold">Personal Details</span></label></div>
</td>
</tr>
<tr>
<td>
<div align="left"><label><span class="glyphicon glyphicon-user"></span> First Name</label></div>
<input id="firstname" name="firstname" type="text" required="required" placeholder="First Name" autofocus=""><br/><span id="first_error" class="error"></span>
</td>
<td>
<div align="left"><label>Last Name</label></div>
<input id="Lastname" name="lastname" type="text" required="required" placeholder="Last Name" autofocus=""><br/><span id="first_error" class="error"></span>
</td>
</tr>
<tr>
<td>
<div align="left"><label><span class="glyphicon glyphicon-home"></span> Address</label></div>
<textarea id="address" name="address" required="required" rows="5" cols="32" style="text-transform: uppercase;resize: none;"></textarea><br/><span id="address_error" class="error"></span>
</td>
<td>
<div align="left"><label><span class="glyphicon glyphicon-flag"></span> Country</label></div>
<select class="register_select" id="country" name="country" required="required" onchange="print_state('state',this.selectedIndex);"></select><br/><span id="country_error" class="error"></span>
<script language="javascript">print_country("country");</script>
<div align="left" style="margin-top: 3%;"><label><span class="glyphicon glyphicon-envelope"></span> Email</label></div>
<input id="uemail" name="uemail" type="email" required="required" placeholder="example#email.com" autofocus="" onblur="return validateEmail(this.value)"><br/><span class="error" id="email_error"><?php echo $email_error; ?></span><span class="error" id="email_error1"></span>
</td>
</tr>
<tr>
<td>
<div align="left"><label><span class="glyphicon glyphicon-lock"></span> Password</label></div>
<input id="pword" name="pword" type="password" required="required" placeholder="Password" onblur="check(this.value);" onfocus="this.value=''" ><br/><span id="pass_error" class="error"></span></td>
<td>
<div align="left"><label><span class="glyphicon glyphicon-repeat"></span> Confirm Password </label> <span id='message'></span></div>
<input id="cpword" name="cpword" type="password" required="required" placeholder="Confirm Password" onfocus="this.value=''" onblur="validateCpass()"><br/><span id="cpass_error" class="error"></span>
</td>
</tr>
<tr>
<td>
<div align="left"><label><span class="glyphicon glyphicon-pushpin"></span> Pincode</label></div>
<input id="pincode" name="pincode" type="text" required="required" maxlength="8" placeholder="Pincode" ><br/><span id="pincode_error" class="error"></span></td>
<td>
<div align="left"><label><span class="glyphicon glyphicon-phone"></span> Contact Number</label></div>
<input id="contact" name="contact" type="text" required="required" size="11" maxlength="11" placeholder="Contact Number" ><br/><span id="contact_error" class="error"></span>
</td>
</tr>
which gives me the output as shown below in the screenshot:
The problem i encountered was after completing the form , i tried to use it on a smaller device.
The input fields on the right side are not visible.
Is there any way for the fields starting from lastname ie right column input fields to appear one below other if the device width changes below certain pixels.
Please excuse me if i have erred because i have just started learning the basics.
You can use simple CSS Media queries to change the CSS styling of tbody > tr > td, Like:
/* If the screen size is less than equal to 767px (default bootstrap width) */
#media screen and (max-width: 767px) {
tbody tr td {
display: table-row;
}
}
Have a look at the snippet below (Use full screen preview & adjust the browser width to see the difference):
#media screen and (max-width: 767px) {
tbody tr td {
display: table-row;
}
}
<div style="text-align: center;"><label><span class="glyphicon glyphicon-lock"></span> Register</label></div>
<div id="register_wrapper">
<form id="frm_reg" name="frm_reg" method="POST" onsubmit="return validateForm();" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" autocomplete="off">
<!--<span class="error" id="error_blank"></span>--><input id="blank_focus" name="tp" type="text" style="border: 0px none;background-color: #FFF;box-shadow: none;cursor: default;color: transparent;" readonly/>
<br>
<table cellpadding="5">
<tr>
<td>
<div align="left"><label><span class="bold">Personal Details</span></label></div>
</td>
</tr>
<tr>
<td>
<div align="left"><label><span class="glyphicon glyphicon-user"></span> First Name</label></div>
<input id="firstname" name="firstname" type="text" required="required" placeholder="First Name" autofocus=""><br/><span id="first_error" class="error"></span>
</td>
<td>
<div align="left"><label>Last Name</label></div>
<input id="Lastname" name="lastname" type="text" required="required" placeholder="Last Name" autofocus=""><br/><span id="first_error" class="error"></span>
</td>
</tr>
<tr>
<td>
<div align="left"><label><span class="glyphicon glyphicon-home"></span> Address</label></div>
<textarea id="address" name="address" required="required" rows="5" cols="32" style="text-transform: uppercase;resize: none;"></textarea><br/><span id="address_error" class="error"></span>
</td>
<td>
<div align="left"><label><span class="glyphicon glyphicon-flag"></span> Country</label></div>
<select class="register_select" id="country" name="country" required="required" onchange="print_state('state',this.selectedIndex);"></select><br/><span id="country_error" class="error"></span>
<script language="javascript">print_country("country");</script>
<div align="left" style="margin-top: 3%;"><label><span class="glyphicon glyphicon-envelope"></span> Email</label></div>
<input id="uemail" name="uemail" type="email" required="required" placeholder="example#email.com" autofocus="" onblur="return validateEmail(this.value)"><br/><span class="error" id="email_error"><?php echo $email_error; ?></span><span class="error" id="email_error1"></span>
</td>
</tr>
<tr>
<td>
<div align="left"><label><span class="glyphicon glyphicon-lock"></span> Password</label></div>
<input id="pword" name="pword" type="password" required="required" placeholder="Password" onblur="check(this.value);" onfocus="this.value=''" ><br/><span id="pass_error" class="error"></span></td>
<td>
<div align="left"><label><span class="glyphicon glyphicon-repeat"></span> Confirm Password </label> <span id='message'></span></div>
<input id="cpword" name="cpword" type="password" required="required" placeholder="Confirm Password" onfocus="this.value=''" onblur="validateCpass()"><br/><span id="cpass_error" class="error"></span>
</td>
</tr>
<tr>
<td>
<div align="left"><label><span class="glyphicon glyphicon-pushpin"></span> Pincode</label></div>
<input id="pincode" name="pincode" type="text" required="required" maxlength="8" placeholder="Pincode" ><br/><span id="pincode_error" class="error"></span></td>
<td>
<div align="left"><label><span class="glyphicon glyphicon-phone"></span> Contact Number</label></div>
<input id="contact" name="contact" type="text" required="required" size="11" maxlength="11" placeholder="Contact Number" ><br/><span id="contact_error" class="error"></span>
</td>
</tr>
Hope this helps!
More References: Responsive Web Design: CSS Media Queries
I have the following code for my form. I am trying to make it responsive but it is not possible. When I add this code I have to scroll horizontally which I do not want. I want the whole table to fit in to my desktop without scrolling! any help?
<form id="calculateform_id" name="calculateform_name" method="post" onsubmit="return false;">
<div>
<div class="bs-example">
<table class="table table-bordered">
<thead>
<tr class="info">
<th></th>
<th><h4>Member A</h4></th>
<th><h4>Member B</h4></th>
<th><h4>Member C</h4></th>
<th><h4>Member D</h4></th>
</tr>
</thead>
<tbody>
<tr class="active">
<th>Name</th>
<td>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="name" name="member1_name">
</div>
</td>
<td><div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="name" name="member2_name">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="name" name="member3_name">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="name" name="member4_name">
</div>
</td>
</tr>
<tr class="active">
<th>Opportunity Cost / Salary</th>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="member1_ocs_id" class="form-control" onkeypress="return inputNumber(event);" name="member1_ocs" value="100,000" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="member2_ocs_id" class="form-control" onkeypress="return inputNumber(event);" name="member2_ocs" value="100,000" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="member3_ocs_id" class="form-control" onkeypress="return inputNumber(event);" name="member3_ocs" value="100,000" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="member4_ocs_id" class="form-control" onkeypress="return inputNumber(event);" name="member4_ocs" value="100,000" required="required">
</div>
</td>
</tr>
<tr class="active">
<th>Hours Worked</th>
<td>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="member1_hw_id" name="member1_hw" onkeypress="return inputNumber(event);" value="30" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="member2_hw_id" name="member2_hw" onkeypress="return inputNumber(event);" value="40" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="member3_hw_id" name="member3_hw" onkeypress="return inputNumber(event);" value="50" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="member4_hw_id" name="member4_hw" onkeypress="return inputNumber(event);" value="60" required="required">
</div>
</td>
</tr>
<tr class="active">
<th>Invested Cash</th>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member1_ic_id" name="member1_ic" value="0" onkeypress="return inputNumber(event);" >
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member2_ic_id" name="member2_ic" value="0" onkeypress="return inputNumber(event);" >
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member3_ic_id" name="member3_ic" value="0" onkeypress="return inputNumber(event);" >
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member4_ic_id" name="member4_ic" value="0" onkeypress="return inputNumber(event);" >
</div>
</td>
</tr>
<tr class="active">
<th>Contributed Cash</th>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member1_cc_id" name="member1_cc" value="500" required="required" onkeypress="return inputNumber(event);">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member2_cc_id" name="member2_cc" value="600" required="required" onkeypress="return inputNumber(event);">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member3_cc_id" name="member3_cc" value="750" required="required" onkeypress="return inputNumber(event);">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member4_cc_id" name="member4_cc" value="1,000" required="required" onkeypress="return inputNumber(event);">
</div>
</td>
</tr>
<tr class="active">
<th>Date Joined The Project</th>
<td>
<div class="input-group date" id='member1_datetimepicker'>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" min="0" name="member1_djtp" placeholder="yyyy/mm/dd">
</div>
</td>
<td>
<div class="input-group date" id='member2_datetimepicker'>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" min="0" name="member2_djtp" placeholder="yyyy/mm/dd">
</div>
</td>
<td>
<div class="input-group date" id='member3_datetimepicker'>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" min="0" name="member3_djtp" placeholder="yyyy/mm/dd">
</div>
</td>
<td>
<div class="input-group date" id='member4_datetimepicker'>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" min="0" name="member4_djtp" placeholder="yyyy/mm/dd">
</div>
</td>
</tr>
<tr class="success">
<th>Your Share ($)</th>
<td><input type="text" class="blue-color form-control" name="member1_ysc" disabled/></td>
<td><input type="text" class="red-color form-control" name="member2_ysc" disabled/></td>
<td><input type="text" class="orange-color form-control" name="member3_ysc" disabled/></td>
<td><input type="text" class="green-color form-control" name="member4_ysc" disabled/></td>
</tr>
<tr class="success">
<th>Your Share (%)</th>
<td><input type="text" class="blue-color form-control" name="member1_ysp" disabled/></td>
<td><input type="text" class="red-color form-control" name="member2_ysp" disabled/></td>
<td><input type="text" class="orange-color form-control" name="member3_ysp" disabled/></td>
<td><input type="text" class="green-color form-control" name="member4_ysp" disabled/></td>
</tr>
<tr class="success">
<th>Total Share (#)</th>
<td colspan="4"><b><input type="text" id="totalshare_id" class="form-control centered" name="totalshare" disabled/></b></td>
</tr>
</tbody>
</table>
</div>
</div>
Your HTML structure is not adequated to bootstrap (no .container / container-fluid element(s), no .row element(s), no col-* elements). Furthermore, you want a 5 columns table-like form to be responsive and i don't think it's a good idea for mobile devices.
I suggest you to muck-up a mobile view and a tablet devices like view (you already have desktop view), then proceed to use bootstrap to style each view.
I have a simple example of an html table yet it will not display correctly and I do not understand why.
code for the table:
<div class="container">
<form id="testform" data-parsley-validate>
<div class="row">
<input class="form-control typeahead" name="customerSearch" type="text"
placeholder="Customer Search:" autofocus="on"
autocomplete="off" spellcheck="off" data-open="open" data-close="close"
data-select="select" data-autocomplete="autocomplete"
data-source="customersTypeAhead"/>
<button type="button" class="btn btn-warning">Clear</button>
<button type="button" class="btn btn-success">Create</button>
</div>
<div class="row">
<div class="col-md-4 smPadding">
<br>
<!-- Customr Contact info and factoring company info -->
<input class="form-control box-size" type="text" name="customerName" placeholder="Customer:"
data-parsley-trigger="change" minlength="6" required />
<input class="form-control box-size" type="text" name="customerAddress" placeholder="Address:"
data-parsley-trigger="change" minlength="6" required />
<table>
<tr>
<td>
<input class="form-control box-size" type="text" name="customerSuite" placeholder="Suite:" />
</td>
<td>
<input class="form-control box-size" type="text" name="customerCity" placeholder="City:"
data-parsley-trigger="change" minlength="3" required />
</td>
</tr>
<tr>
<td>
<input class="form-control box-size" type="text" name="customerState" placeholder="State/Prov:"
data-parsley-trigger="change" minlength="2" maxlength="2" required />
</td>
<td>
<input class="form-control box-size" type="text" name="customerZip" placeholder="Zip/Postal:"
data-parsley-trigger="change" minlength="5" required />
</td>
</tr>
</table>
<input class="form-control box-size" type="text" name="customerPhone1" placeholder="Phone 1:"
data-parsley-trigger="change" minlength="10" required />
<input class="form-control box-size" type="text" name="customerPhone2" placeholder="Phone 2:"
data-parsley-trigger="change" minlength="10"/>
<input class="form-control box-size" type="text" name="customerFax" placeholder="Fax:"
data-parsley-trigger="change" minlength="10"/>
<input type="checkbox" name="customerFactorInvoices" {{isFactoredCheckAnswer}}> Does Company Use Invoice Factoring?<br>
{{#if isFactoredCheck}}
<input class="form-control box-size" type="text" name="factoringName" placeholder="Customer:"
data-parsley-trigger="change" minlength="6" {{factorRequired}}/>
<input class="form-control box-size" type="text" name="factoringAddress" placeholder="Address:"
data-parsley-trigger="change" minlength="6" {{factorRequired}}/>
<table>
<tr>
<td>
<input class="form-control box-size" type="text" name="factoringSuite" placeholder="Suite:"
data-parsley-trigger="change" />
</td>
<td>
<input class="form-control box-size" type="text" name="factoringCity" placeholder="City:"
data-parsley-trigger="change" minlength="3" {{factorRequired}} />
</td>
</tr>
<tr>
<td>
<input class="form-control box-size" type="text" name="factoringState" placeholder="State/Prov:"
data-parsley-trigger="change" minlength="2" maxlength="2" {{factorRequired}} />
</td>
<td>
<input class="form-control box-size" type="text" name="factoringZip" placeholder="Zip/Postal:"
data-parsley-trigger="change" minlength="5" {{factorRequired}} />
</td>
</tr>
</table>
<input class="form-control box-size" type="text" name="factoringPhone1" placeholder="Phone 1:"
data-parsley-trigger="change" minlength="10" />
<input class="form-control box-size" type="text" name="factoringPhone2" placeholder="Phone 2:"
data-parsley-trigger="change" minlength="10"/>
<input class="form-control box-size" type="text" name="factoringFax" placeholder="Fax:"
data-parsley-trigger="change" minlength="10"/>
<input class="form-control box-size" type="text" name="factoringEmail" placeholder="Email:"
data-parsley-trigger="change" />
{{/if}}
</div>
<div class="col-md-4 smPadding">
<br>
<input class="form-control box-size" type="text" name="customerEmail1" placeholder="Email 1:"
data-parsley-trigger="change" required />
<table>
<tr>
<td>
<input type="checkbox" name="emailRoles1" value="onOrderCreate">On Order Create
</td>
<td>
<input type="checkbox" name="emailRoles1" value="onPuDel" > On Pick/Del
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="emailRoles1" value="invoicing"> Invoicing
</td>
<td>
<input type="checkbox" name="emailRoles1" value="accountsPayable" > Accounts Payable
</td>
</tr>
</table>
<br>
<input class="form-control box-size" type="text" name="customerEmail2" placeholder="Email 2:"
data-parsley-trigger="change" required />
<table>
<tr>
<td>
<input type="checkbox" name="emailRoles2" value="onOrderCreate">On Order Create
</td>
<td>
<input type="checkbox" name="emailRoles2" value="onPuDel" > On Pick/Del
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="emailRoles2" value="invoicing"> Invoicing
</td>
<td>
<input type="checkbox" name="emailRoles2" value="accountsPayable" > Accounts Payable
</td>
</tr>
</table>
<br>
<input class="form-control box-size" type="text" name="customerEmail3" placeholder="Email: 3"
data-parsley-trigger="change" required />
<table>
<tr>
<td>
<input type="checkbox" name="emailRoles3" value="onOrderCreate">On Order Create
</td>
<td>
<input type="checkbox" name="emailRoles3" value="onPuDel" > On Pick/Del
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="emailRoles3" value="invoicing"> Invoicing
</td>
<td>
<input type="checkbox" name="emailRoles3" value="accountsPayable" > Accounts Payable
</td>
</tr>
</table>
<br>
<input class="form-control box-size" type="text" name="customerEmail4" placeholder="Email 4:"
data-parsley-trigger="change" required />
<table>
<tr>
<td>
<input type="checkbox" name="emailRoles4" value="onOrderCreate">On Order Create
</td>
<td>
<input type="checkbox" name="emailRoles4" value="onPuDel" > On Pick/Del
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="emailRoles4" value="invoicing"> Invoicing
</td>
<td>
<input type="checkbox" name="emailRoles4" value="accountsPayable" > Accounts Payable
</td>
</tr>
</table>
</div>
<div class="col-md-4 smPadding">
<br>
<input type="checkbox" name="customerOriginalInvoices" value="true" > Customer Require Original Invoices<br>
<input type="checkbox" name="customerAccountHold" value="true" > Account on Hold<br>
</div>
</div>
</form>
</div>
The css that I was asked to place in
th, td {
width: 50%;
text-align: left;
}
picture of the problem.
Picutre of the full form showing that the textboxes line up proper with the table code.
Picture after applying the above css. Seems to make it worse.
So if you can tell me what I am doing wrong here it would be greatly appreciated.
This is the proper way after some research on div layouts.
<div class="row">
<div class="col-md-6">
<input type="checkbox" name="emailRoles3" value="onOrderCreate">On Order Create<br>
<input type="checkbox" name="emailRoles3" value="onPuDel" > On Pick/Del
</div>
<div class="col-md-6">
<input type="checkbox" name="emailRoles3" value="invoicing"> Invoicing<br>
<input type="checkbox" name="emailRoles3" value="accountsPayable" > Accounts Payable
</div>
</div>