Howto avoid MSIE scrolling a table with overflow: hidden; - javascript

The last column of a table is intentionally clipped without scrollbars, by using
overflow: hidden;
on the Tables container.
If I enter the columns input field by pressing Tab, on MSIE it scrolls the focused column into the viewport. I would like to turn this feature off and make it similar to FF where it stays fixed.
Edit: I just recognized that FF is doing the same if the column is fully invisible, MSIE will do it even if the column is partially clipped.
Edit: Any javascript solution would be welcome. Something like 'preventdefault' but i have no idea on what event to hook.
#Container {
width: 400px;
overflow: hidden;
}
<div id="Container">
<table>
<thead>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>Tab</th>
<td>
<input type='text' />
</td>
<td>
<input type='text' />
</td>
<td>
<input type='text' />
</td>
</tr>
</tbody>
</table>
</div>

This is default behaviour of the browser to bring the input into view when focussing (actually when typing), as pointed out by #GyumFox.
What you can do is, either reset the scroll or disable the inputs that are out of bounds of your table, using Javascript.
Option 1: (Reset the scroll)
This will work fine in Chrome and Firefox but give you a flicker in IE.
Fiddle 1: http://jsfiddle.net/eg0ae5cg/1/
Snippet 1:
$("#Container").on("scroll", function() {
$(this).scrollLeft(0);
});
#Container {
table-layout: fixed; width: 400px; overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Container">
<table>
<thead>
<tr>
<th></th><th>A</th><th>B</th><th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>Tab</th>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
</tr>
</tbody>
</table>
</div>
Option 2: (Disable the out-of-bound inputs)
This is a crude example. You need to fine-tune this as required.
*Fiddle 2: http://jsfiddle.net/pkb2t127/1/ *
Snippet 2:
var $tab = $("#Container"),
$txt = $tab.find("input"),
w = $tab.width();
$txt.each(function() {
var lft = $(this).position().left,
rgt = lft + $(this).width();
if (rgt >= w) { $(this).prop("disabled", true); }
})
#Container {
table-layout: fixed; width: 400px; overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Container">
<table>
<thead>
<tr>
<th></th><th>A</th><th>B</th><th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>Tab</th>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
</tr>
</tbody>
</table>
</div>
Instead of disabled property, you could use the readonly property to keep the input value in the form post.

Related

How to add multiple inputs in specific cell or table's td?

I have one table, in which I want to add multiple inputs filed in the 3rd column of 1st row.
if I click on add pk1 button it's not get added into the specific td that is <td class=partition1> any solution using jQuery or Javascript? inputs must be added in the display:block mode not in inline mode.
which is the easiest way to handle this using Jquery or javascript?
$('.add-pkey1').on('click','.partition1' ,function(){
var t0 = $('.partition1').append('<input type="text" name="input1" value="test" />');
$('#table-id').append(t0);
})
table {
border-collapse: collapse;
margin: 1em;
}
thead {
background-color: lightblue;
}
td,
th {
border: solid grey 1px;
padding: 1em;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table
id="table-id"
>
<thead >
<tr>
<th colspan="6" class="text-center">
<span>Source : </span>
</th>
</tr>
<tr>
<th>input1</th>
<th>input2</th>
<th class="partition1">Partition1</th>
<th class="partition2">
Partition2
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input
id="input1"
type="text"
name="input1"
/>
</td>
<td>
<input
id="input2"
type="text"
name="input2"
/>
</td>
<td class="partition1">
<input
type="text"
name="partition"
/>
</td>
<td class="partition2">
<input
type="text"
name="partition2"
/>
</td>
</tr>
</tbody>
</table>
<button class="add-pkey1">add pk1</button>
JsFiddle : - https://jsfiddle.net/shreekantbatale2/zfus24m9/1/
As #Taplar said earlier there are multiple issues with your code, so I won't get into them one by one. But I will mention the notable ones.
.on() will accept an event, selector, data, and handler, but in your case you just need two of them so it should be .on('click', function(){}) instead of the current version.
In order to add an element to your third column, all you need to do is, get the element-specific class or id and append the desired element into it. But what did you do there will cause to append another <th> to your table so it means it will automatically add the new element to a new row and will break the table structure since there are 4 columns and you want to add <th> between column 3 and 4.
partition1 is not a unique class in your HTML so whenever you try to add something to it, it will add in two different places.
Here is a fix for you looking for:
$('.add-pkey1').on('click', function() {
$('.partition1.column3').append('<input type="text" name="input1" value="test" />');
})
table {
border-collapse: collapse;
margin: 1em;
}
thead {
background-color: lightblue;
}
td,
th {
border: solid grey 1px;
padding: 1em;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-id">
<thead>
<tr>
<th colspan="6" class="text-center">
<span>Source : </span>
</th>
</tr>
<tr>
<th>input1</th>
<th>input2</th>
<th class="partition1">Partition1</th>
<th class="partition2">
Partition2
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="input1" type="text" name="input1" />
</td>
<td>
<input id="input2" type="text" name="input2" />
</td>
<td class="partition1 column3">
<input type="text" name="partition" />
</td>
<td class="partition2">
<input type="text" name="partition2" />
</td>
</tr>
</tbody>
</table>
<button class="add-pkey1">add pk1</button>

Table style messed up when printing

I'm trying to print a simple table, yet the layout seems to mess up. Does anybody know why?
Table to print
Print Preview
Here is the HTML and JS I have used to create the Table.
function printData() {
var divToPrint = document.getElementById("printtable");
newWin = window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
$('button').on('click', function() {
printData();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="printtable" style="border: 1px solid black; width: 90mm; height: 29mm;">
<div style="float: left; font-size: 10px; position: relative; top: 50%; transform: translateY(-50%); margin-left: 2mm;">
<p>
<img src="/" alt="" height="30">
</p>
<table>
<tbody>
<tr>
<td><u>Row 1</u> :</td>
<td> Row 1</td>
</tr>
<tr>
<td><u>Longer Row 2</u> :</td>
<td> Row 2</td>
</tr>
<tr>
<td><u>R3</u> :</td>
<td> Row 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<br />
<button>Print me</button>
You need to specify style related to print .
You can use #media print to specify styles for print
In the end, I used the solution proposed here is such alignment achievable without <table>?
By aligning my text without using the table tag, the text prints just fine.

how to replace values in innerhtml using javascript

I'm dynamically(on click of radio button) copying the inner html of one row(in a table) to other but after removing some elements.
var a = document.getElementById('copyrow' + e).innerHTML;
a = a.replace('<input type="radio" name="selectradio" id="shareredio"+e "" a="" href="#" onclick="setText("+e");">',"")
.replace('<div class="custom-radio" style="margin-top:50px;">',"")
.replace('<label for="shareredio"+e""></label>',"")
.replace('<input type="checkbox" name="sharecheck" id="sharecheck"+e"">',"")
.replace('<label for="sharecheck"+e""></label>',"")
.replace('Share fare',"");
document.getElementById('copyDiv').innerHTML = a;
I don't know enough about javascript but if there is any better way then please help...
This is probably not the best way to do it but I thought I'd at least give you an answer quickly. This is using jQuery to manipulate the DOM.
var $a = $('#copyrow'+e).clone();
$a.find('input#shareredio'+e).remove();
$a.find('div.custom-radio').remove();
$a.find('label[for="shareredio'+e+'"]').remove();
$a.find('input#sharecheck'+e).remove();
$a.find('label[for="sharecheck'+e+'"]').remove();
var result = $a.html().replace('Share fare', "");
$('#copyDiv').html(result);
something like this?
$(document).ready(function() {
$('.copy').on('change', function(){
if($('.copy:checked').val() == 'yes'){
$('.table2').find('.rowContents1').html($('.table1').find('.rowContents1').html());
$('.table2').find('.rowContents2').html($('.table1').find('.rowContents2').html());
$('.table2').find('.rowContents3').html($('.table1').find('.rowContents3').html());
}
else {
$('.table2').find('.rowContents1').html('');
$('.table2').find('.rowContents2').html('');
$('.table2').find('.rowContents3').html('');
}
});
});
table {
border: 1px solid gray;
}
td, th {
border: 1px solid gray;
padding: 5px;
text-align: center;
}
div{
display: inline-block;
margin-right: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Copy Contents Over?<br/>
<input type="radio" class="copy" value="yes" name="copyRadio"/> Yes
<input type="radio" class="copy" value="no" name="copyRadio"/> No
<br/><br/>
<div>
Table1
<table class="table1">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1">This is the Contents of Row 1</td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2">This is the Contents of Row 2</td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3">This is the Contents of Row 3</td>
</tr>
</body>
</table>
</div>
<div>
Table2
<table class="table2">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1"></td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2"></td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3"></td>
</tr>
</body>
</table>
</div>
i used .html() to rewrite the contents inside each td. .find() function just traverses down the element tree and finds the descendants $('.table2').find('.rowContents1') is saying in element of class .table2, find the descendants with class .rowContents1.
hope this helps and is what you're looking for

On table scroll listener

I'm trying to find out event of scrolling tables.
I can get the left param, for example, using:
$("#scrollTable").offset().left
But I can't add the listener of its changing.
Everything I want is to monitor the changing of left scroll parameter of table and apply it to another DOM element (that is not a problem).
HTML example of my table:
<div class="scrollTableOuter">
<div id="scrollTableInner" class="scrollTableInner">
<table id="scrollTable" class="persist-area">
<thead>
<tr class="persist-header">
<th style="height: 80px;">Name</th>
<td style="width: 80px;">
</td>
<td style="width: 80px;">
</td>
</tr>
</thead>
<tbody>
<tr>
<th>name</th>
<td style="text-align: center;">
<input class="arrow-change" style="width: 35px; text-align: right;" autocomplete="off" min="0" name="AwardEvent[2][3][value]" id="AwardEvent_2_3_value" type="number" value="1">
</td>
</tr>
</tbody>
</table>
</div></div>
You should bind a listener to the 'scroll' event, as the docs point out.
$('#target').on('scroll', function() {
// your code
});
obviously, #target should be a selector for the element that houses the scrollbars, possibly document or a div you have on overflow

Bind input width to table column width

There is a table with 5 columns. Columns might have different width (I don't assign constant width).
Now I want to create 5 input elements just on top of the table. Is there any trick to make width of each input element equal to corresponding column width?
For instance, Input 1 should have the width of Column 1, Input 2 - the width of Column 2, etc.
So, how to bind inputs to columns?
UPDATE:
<script>
$('#addButton').click(function() {
$("#addContent").slideToggle("slow");
$('input').width(+$('table td').width()-1);
});
</script>
<div id = "add">
<div id = "addButton" title='New Record' ;>
<img src='images/add.png' alt='New Record' />
</div>
<div id = "addContent">
<input type="text">
<input type="text">
</div>
</div>
<table id="newspaper-b" border="0" cellspacing="2" cellpadding="2" width = "100%">
<thead>
<tr>
<th scope="col">Opr</th>
<th scope="col">Flt Num</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<?php foreach ($result1 as $row):
$status=$row['status'];
$airlineName=$row['airlineName'];
$flightNum=$row['flightNum'];
?>
<tr id="<?php echo $flightNum; ?>" class="edit_tr">
<td width="80" ><?php echo $airlineName;?></td>
<td width="80" ><?php echo $flightNum;?></td>
<td width="80" id="<?php echo $flightNum; ?>" class="deact_but">
<div>
<img src='images/delete.png' alt='Deactivate' />
</div>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
CSS
input{
float: left;
margin: 0;
padding: 0;
}
It's possible with jQuery. Check the demo - http://jsfiddle.net/k9MhG/4/
Add some JavaScript (at the end or after the page loads) to get the offsetWidth of the top level cells and apply those widths to your inputs.
Something like this:
document.getElementById('myInput').style.width = document.getElementById('myTable').rows[0].cells[0].offsetWidth;
Or, extend your table to include the inputs and set the width to 100%. You can apply styles to the first TR to make it look like it's not really part of the table. The next TR can contain your headers with borders, etc.
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><br/><br/><br/></td>
</tr>
<tr>
<td>ContentContent</td>
<td>Content</td>
<td>Cont</td>
</tr>
</table>

Categories