I have some this kind of structure
<table>
<tr>
<td valign="top" style="width: 48%;">
<fieldset>
<legend><b>Company Info:</b> </legend>
<table width="100%">
<tr>
<td>
<br />
dynamic data
<br />
dynamic data
<br />
dynamic data
<br />
dynamic data
</td>
</tr>
</table>
</fieldset>
</td>
<td valign="top" style="width: 48%;">
<fieldset id="crew">
<legend><b>Crew Company Info:</b> </legend>
<table width="100%">
<tr>
<td>
<br />
dynamic data
<br />
dynamic data
<br />
dynamic data
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
</table>
Which produces two fieldsets side by side filled with dynamic data, I want to make sure that both fieldsets have same size I mean if one has more data than another one, the another one should increase it's size (height mainly) to overcome that difference so that they both look of same size,
Any suggestion how can I achieve this using CSS or JavaScript ??
I think you can place the fieldset with DIV and use equal size.
Refer Setting Equal Heights with jQuery
Related
Using ng-repeat I'm displaying Item related textboxes and on click of SaveAll button I want to read all text box values based on ITEM ID and Save it to DB.
<tr>
<td>
<table ng-repeat="item in itemDtls">
<tr>
<td>
<label for="lblItemName">Item ID: </label> {{item.ITEM_ID}}
</td>
</tr>
<tr>
<td>
<label for="lblPriority">Item Priority </label>
<input type="text" id="inpPriority" ng-model="ValuesPriority" value="{{item.PRIORITY}}" />
</td>
</tr>
<tr>
<td>
<label for="lblComment">Comment</label>
<input type="text" id="inpComment" ng-model="ValuesComment" value="{{item.COMMENT}}" />
</td>
</tr>
<tr>
</table>
</td>
<tr>
<td>
<button type="submit" ng-click="SaveAll()">SaveAll</button>
</td>
</tr>
Do not use "value" tag instead use "ng-model" only.
Eg:
<td>
<label for="lblComment">Comment</label>
<input type="text" id="inpComment" ng-model="item.COMMENT" />
</td>
So whatever comments you change, it will update in that variable.
Later you can send "itemDtls" in backend to store in DB.
You must need a backend to store in DB.
In a webpage, when a button is click, a table hidden is shown within another table. However, each time, when the hidden table is toggled, the width of the outside table would resize itself. The fiddle demo is here: http://jsfiddle.net/bEK8f/5/
I hope the initial width of the outer table would take into account of the size of the inner table. Therefore, the outer table width should not change by showing/hiding the inner table.
As cebirci showed below, fixing the width of the outer table and using the fixed layout would work. Note sure if the width of the outer table can be decided based on the hidden table. In this way, there is no need to manually set the outer table width.
Thank you very much!
I also include my code below:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(e){
e.preventDefault();
$('#cat1').toggle();
});
$("#calculate").click(function(e){
var diff = $('#diff').val();
var sd = $('#sd').val();
var effect = diff/sd;
$('#es').val(effect.toFixed(2));
$('#cat1').toggle();
});
});
</script>
<style>
table{border: 1px solid black;}
</style>
</head>
<body>
<table style="width:500px;table-layout: fixed;">
<tr class="row2">
<th class="col0">Effect size <button id="show">Show</button></th><td class="col1"><input type="text" id="es" value="0.1"></td>
</tr>
<tr class="cat1" id='cat1' style="display:none">
<th class="col0" id='test'></th>
<td class="col1">
<table>
<tr><th class="col0 centeralign" colspan="2"> Effect size calculation </th></tr>
<tr><td>Difference</td> <td> <input type="text" id="diff" value=".1"> </td></tr>
<tr><td>sd</td> <td> <input type="text" id="sd" value="1"> </td></tr>
<tr><td></td> <td> <button id="calculate">Calculate</button> </td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You should use th tag for only header row of your table. In your table using td is better because you dont have any header row for titles etc..
In your html, your new table is appearing in a cell, and the cell is small for your table so it resizes. You can use colspan for merging two cells of your second row.
Your html code can be like that:
<table style="width:340px;table-layout: fixed;">
<tr class="row2">
<td class="col0">Effect size <button id="show">Show</button></td>
<td class="col1"><input type="text" id="es" value="0.1" /></td>
</tr>
<tr class="cat1" id='cat1' style="display:none">
<td class="col1" colspan="2">
<div style="display:inline"><table style="width:100%">
<tr><th class="col0 centeralign" colspan="2"> Effect size calculation </th></tr>
<tr><td>Difference</td> <td> <input type="text" id="diff" value=".1" /> </td></tr>
<tr><td>sd</td> <td> <input type="text" id="sd" value="1" /> </td></tr>
<tr><td></td> <td> <button id="calculate">Calculate</button> </td></tr>
</table></div>
</td>
</tr>
</table>
And jsfiddle link is http://jsfiddle.net/bEK8f/2/
I have one form with input fields. After the first part there are 2 buttons (external, internal) the external redirects you somewhere else the internal button should show (set visible) more input fields.
like
<form action="servlet_link" method="post">
<table class="ui-widget">
<colgroup width="350" span="2"></colgroup>
<tbody>
<tr>
<td>
<p class="form">
Familyname
</p><td>
<input class="ui-widget-content ui-state-default ui-corner-all" name="familyname" type="text"">
</td>
</tr>
<tr>
<td>
<p class="form">
Givenname
</p></td>
<td>
<input class="ui-widget-content ui-state-default ui-corner-all" name="ustid" type="text">
</td>
</tr>
</tbody>
</table>
<div class="center">
<!-- Buttons -->
<table align="center">
<tr>
<td>
<!-- sends data post and redirects u -->
External
</td>
<td>
<!-- shows more input fields and sets both buttons invisible -->
<a href="???" class="btn" name="intern" >Internal</a>
</td>
</tr>
</table>
</div>
<!-- part 2 should be shown -->
<table class="ui-widget">
<colgroup width="350" span="2"></colgroup>
<tbody>
<tr>
<td>
<p class="form">
Companyname
</p><td>
<input class="ui-widget-content ui-state-default ui-corner-all" name="companyname" type="text"">
</td>
</tr>
<tr>
<td>
<p class="form">
address
</p></td>
<td>
<input class="ui-widget-content ui-state-default ui-corner-all" name="address" type="text">
</td>
</tr>
</tbody>
</table>
<div class="center">
<!-- Buttons -->
<table align="center">
<tr>
<td>
<!-- sends data post and redirects u -->
External
</td>
</tr>
</table>
</div>
</form>
Do i have to give all elements a id tag and set it invisible through:
JS:
function invisbleForm() {
document.getElementById("companynameText").style.display ="block";
}
Is there better solution to do that ?
thx for any help :)
UPDATE 1
Ok to set it visible and invisible is not the problem put i have a big white block on my page how can i dynamically resize it?
Well you could do this:
Assing an id to your form then add a class 'myFields' to the input fields you wish to show.
Then try this:
var myForm = document.getElementById('FormId');
var ipnutFieldsToShow = myForm.getElementsByClassName('myFields');
for(var i = 0; i < inputFieldsToShow.length; i++) {
inputFieldsToShow[i].style.display ="block";
}
You could add a class name to each element you want to show and the use the native method "document.getElementsByClassName".
Take a look at: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName
I am having a problem with HTML table layout. I have created an HTML form and layout the form using HTML table :
<form id="form1">
<table class="ui-widget">
<tbody>
<tr>
<td>
<label for="CreateName">Name</label>
</td>
<td>
<input type="text" id="CreateName" name="Name" />
</td>
</tr>
<tr>
<td>
<label for="CreateDate">Date</label>
</td>
<td>
<input type="text" id="CreateDate" name="Date" />
</td>
</tr>
..
...
</tbody>
</table>
</form>
I have inserted jquery validation on form fields. Now my problem is when validation error shown, than whole table layout is affected. I used :
table-layout: fixed;
But still it is not working. How can i get rid of this issue ?
I have a HTTP interface page that requires the user to upload various independent files. For this I have created multiple tables that each have its own form.
In two of the tables I need one checkbox each that allows the user to select it which then requires that the file is installed on system startup.
Both tables are for uploading system firmware, one table for primary firmware, and the other for backup firmware.
The system will crash if both firmwares are being uploaded, hence separate forms.
Because of this crashing issue, for the two checkboxes it needs to be: One selected, or the other selected, or neither selected.
Here is a sample html code:
<body>
<div id="container">
<table width="1000" border="0" cellpadding="1" class="uploadBox">
<tr>
<td width="460" rowspan="2">
<form action="fileupload.html" method="post" enctype="multipart/form-data">
<b>Update Primary System Firmware</b>
<p style="margin-bottom: 2px"> <b>File: </b>
<input type="file" name="firmwaremain" size="30" />
<input type="submit" value="Upload" />
</p>
</td>
<td width="210" height="23">Current File Name:</td>
<td width="117">Current File Size:</td>
<td width="102">File Upload Date:</td>
<td width="93">Install on Start</td>
</tr>
<tr>
<td>~curFirmName~</td>
<td width="117">~curFirmSize~</td>
<td width="102">~curFirmDate~</td>
<td width="93"><input type="checkbox" name="firmPrim" id="firmPrim" /></td>
</tr>
</table>
</form>
<table width="1000" border="0" cellpadding="1">
<tr>
<td width="460" rowspan="2">
<form action="fileupload.html" method="post" enctype="multipart/form-data">
<b>Update Backup System Firmware</b>
<p style="margin-bottom: 2px"><b>File: </b>
<input type="file" name="firmwarebackup" size="30" />
<input type="submit" value="Upload" />
</p>
</td>
<td width="210" height="23">Current File Name:</td>
<td width="117">Current File Size:</td>
<td width="102">File Upload Date:</td>
<td width="93">Install on Start</td>
</tr>
<tr>
<td>~curBackName~</td>
<td width="117">~curBackSize~</td>
<td width="102">~curBackDate~</td>
<td width="93"><input type="checkbox" name="firmBackup" id="firmBackup" /></td>
</table>
</form>
</div>
As you can see, they checkboxes are in two independent forms, so it has been difficult for me to run a JavaScript code, since (I think) it calls for the checkboxes to be in one form.
Also I cant use radio buttons because they are in different forms, plus there has to be an option for neither to be selected.
Is there a way to validate the whole page and check all forms so that only one check box can be selected on the page?
Thanks!
Regards,
Josh
Add a click handler to both of the checkboxes that unchecks the checkbox in the other form if the clicked checkbox is checked:
var primCheck = document.forms[0].firmPrim;
var backCheck = document.forms[1].firmBackup;
primCheck.onclick = checkClick;
backCheck.onclick = checkClick;
function checkClick(e) {
var otherCheckbox = this === primCheck ? backCheck : primCheck;
if (this.checked) {
otherCheckbox.checked = false;
}
}
Working Demo: jsfiddle.net/QM6sy/1/