i need to freeze the Top line in the table in html - javascript

enter image description here[![enter image description here][2]][2]
I've written an html code for the table which is holding with child id and now I need to freeze the only header and scroll the data if I apply styles it is not matching the lines that divide each column.
See my attached picture when I try to freeze the first line and it is already declared with certain widths but now it is compressing the widths.
Actually it looks like pic2 and if I am trying to do so it is becoming like pic1 can any one suggest me the best solution for this
These not freezing the header because it is declared as single table.
[enter image description here][2]
enter image description here

Try this css:
table {
width: 100%;
}
thead, tbody, tr, td, th {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
tbody {
height: 120px; /* Change this with your needs. */
overflow-y: auto;
}
tbody td, thead th {
width: 19.2%; /*If 5 columns then 19.2*/
float: left;
}
https://jsfiddle.net/4aazdqbc/2/

Related

how to find out a div is inside window in react js

when I click on Id one div is coming. But I want to check if the div is exceeding the window then the div must hide.
Here is the sample code I have tried.
const User= () =>{
const openRequestDetails=(event,reqId)=>{
var clkPosTop= Math.floor(event.target.getBoundingClientRect().top());
var popup= document.getElementById('rId');
var popupHt= popup.offsetHeight;
if(clkPosTop > popupHt){
popup.style.top=clkPosTop+"px";
document.getElementById('rId').style.display="block";
}
}
return (
<>
<Header />
<table>
<tr>
<td>Id</td>
<td>First name</td>
<td>Last Name</td>
</tr>
{
user.map((key, i)=>(
<tr>
<td onClick={(e) => openRequestDetails(e,i)}>{i}</td>
<td>{key.first_name}</td>
<td>{key.last_name}</td>
<td>{key.email}</td>
<td>{key.gender}</td>
</tr>
))
}
</table>
<div id="rId" />
</>
)
}
export default User;
I am displaying the div is exact same row where I click. But when I click on the last IDs the div is exceeding the size of the window. So I want to check if the div is exceeding the windows then the display should hide.
I just want to check when I click on id's if the div is exceeding the windows then I should not display that div otherwise it should display.
[![enter image description here][1]][1]
Here is the sample CSS file.
div#rId{
background-color: cyan;
height: 34px;
width: 35%;
position:fixed;
left:28px;
}
table{
border-collapse: collapse;
}
td{
border: 1px solid red;
}
Can anyone know how to solve this problem.
We can write simple javascript code inside the function. can anyone help me to solve this problem?
Let's look at how it's decided whether to show the pop up or not:
Here's the code where the test is made:
const openRequestDetails=(event,reqId)=>{
var clkPosTop= Math.floor(event.target.getBoundingClientRect().top());
var popup= document.getElementById('rId');
var popupHt= popup.offsetHeight;
if(clkPosTop > popupHt){ //This is almost always true as popupHt is small
popup.style.top=clkPosTop+"px";
document.getElementById('rId').style.display="block";
}
What you need to do is test whether the popup when placed with its top the same as the td's top will have its bottom below the bottom of the viewport.
The bottom of the popup will be at: clkPosTop + popupHt
The bottom of the viewport is at window.innerHeight
So the test should be
if ( (clkPosTop + popupHt) < window.innerHTML)
Ok, I think your problem can resolve use only css.
But, this can change depending on what you want to do.
If your problem is only window... use #media, then, ok, go to css.
table {
width: 100%;
border-collapse: collapse;
#media (min-width:1024px) {
max-width: 1024px;
}
}
Ok, we delimit width of our div, but many things to happen now, then
rId maybe disturb our configuration, then, we need make this element responsive too.
td {
display: inline-flex; // or display: inline-grid;
border: 1px solid red;
}
div#rId {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: cyan;
height: 34px;
width: 35%;
position:fixed;
left:28px;
}
ok, I think this resolve this issue.
But, this javascript code... I don't believe i need position css with javascrip to open modal, comment if this helpfull. ;D

Adding a custom Java script to Qliksense

I admit that I am a newbie in Web development. I am finding a way to freeze the header while keeping the horizontal and vertical scroll.
Currently, I am trying to configure the CSS and JS for my Qliksense extension.
However I meet an issue when trying to add the JS part into my JS file. Here is their instruction, but I don't understand
http://help.qlik.com/en-US/sense-developer/2.2/Subsystems/Extensions/Content/extensions-load-resources.htm
Basically, I need to add the below JS to the file.
$('table').on('scroll', function () {
$("table > *").width($("table").width() + $("table").scrollLeft());
});
Can anyone help me this subject :(.
in the js file right after $element.html(html); add:
$('table').on('scroll', function () {
$("table > *").width($("table").width() + $("table").scrollLeft());
});
In the css file remove the overflow: auto;:
.qv-object-horizontal_scroll_table div.qv-object-content-container {
overflow: auto; <-- Need to be removed
}
Also in the css file add the css from the fiddle example:
table {
border-collapse: collapse;
width: 300px;
overflow-x: scroll;
display: block;
}
thead {
background-color: #EFEFEF;
}
thead, tbody {
display: block;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 140px;
}
td, th {
min-width: 100px;
height: 25px;
border: dashed 1px lightblue;
}
After this the header row is not moving while scrolling. The result:
Also remove all the code that is under //start adding customized function. If you want to include external js/css file you need to use RequireJS. For more info about this take a look at this Load local Javascrtip files. In general take a look at the whole project/tutorial

How to scroll table's "tbody" independent of "thead"?

As specified in the W3 specification for Tables:
Table rows may be grouped into a table head, table foot, and one or
more table body sections, using the THEAD, TFOOT and TBODY elements,
respectively. This division enables user agents to support scrolling
of table bodies independently of the table head and foot.
I created the following example, but it doesn't work.
HTML:
<table>
<thead>
<tr>
<td>Problem</td>
<td>Solution</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
JS:
$(function() {
for (var i = 0; i < 20; i++) {
var a = Math.floor(10 * Math.random());
var b = Math.floor(10 * Math.random());
var row = $("<tr>").append($("<td>").html(a + " + " + b + " ="))
.append($("<td>").html(a + b));
$("tbody").append(row);
}
});
CSS:
table {
background-color: #aaa;
}
tbody {
background-color: #ddd;
height: 100px;
overflow: auto;
}
td {
padding: 3px 10px;
}
The missing part is:
thead, tbody {
display: block;
}
Demo
I saw this post about a month ago when I was having similar problems. I needed y-axis scrolling for a table inside of a ui dialog (yes, you heard me right). I was lucky, in that a working solution presented itself fairly quickly. However, it wasn't long before the solution took on a life of its own, but more on that later.
The problem with just setting the top level elements (thead, tfoot, and tbody) to display block, is that browser synchronization of the column sizes between the various components is quickly lost and everything packs to the smallest permissible size. Setting the widths of the columns seems like the best course of action, but without setting the widths of all the internal table components to match the total of these columns, even with a fixed table layout, there is a slight divergence between the headers and body when a scroll bar is present.
The solution for me was to set all the widths, check if a scroll bar was present, and then take the scaled widths the browser had actually decided on, and copy those to the header and footer adjusting the last column width for the size of the scroll bar. Doing this provides some fluidity to the column widths. If changes to the table's width occur, most major browsers will auto-scale the tbody column widths accordingly. All that's left is to set the header and footer column widths from their respective tbody sizes.
$table.find("> thead,> tfoot").find("> tr:first-child")
.each(function(i,e) {
$(e).children().each(function(i,e) {
if (i != column_scaled_widths.length - 1) {
$(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()));
} else {
$(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()) + $.position.scrollbarWidth());
}
});
});
This fiddle illustrates these notions: http://jsfiddle.net/borgboyone/gbkbhngq/.
Note that a table wrapper or additional tables are not needed for y-axis scrolling alone. (X-axis scrolling does require a wrapping table.) Synchronization between the column sizes for the body and header will still be lost if the minimum pack size for either the header or body columns is encountered. A mechanism for minimum widths should be provided if resizing is an option or small table widths are expected.
The ultimate culmination from this starting point is fully realized here: http://borgboyone.github.io/jquery-ui-table/
A.
try this.
table
{
background-color: #aaa;
}
tbody
{
background-color: #ddd;
height: 100px;
overflow-y: scroll;
position: absolute;
}
td
{
padding: 3px 10px;
color: green;
width: 100px;
}
thead {
position: fixed;
height: 10px; /* This is whatever height you want */
}
tbody {
position: fixed;
margin-top: 10px; /* This has to match the height of thead */
height: 300px; /* This is whatever height you want */
}
mandatory parts:
tbody {
overflow-y: scroll; (could be: 'overflow: scroll' for the two axes)
display: block;
with: xxx (a number or 100%)
}
thead {
display: inline-block;
}

stop table cell from expanding, or set input to width of table cell

I have been playing around with this and cannot seem to get it functioning as I would like.
here is my example,
I have a table who's cells i'm making editable by replacing their text content with inputs when the user clicks on them. The input is removed after the focus is lost and the cell contents (the input) are replaced by the updated text.
This all works, fabulous. My issue is the cells resize themselves after the text is replaced by the input.
I have set the width of the input to 100%, but that is all I can think of (aside from measuring the cell width and hard-coding it to that width, however I would like to avoid this if possible.)
(see example for html content)
css assume table has ID of #tblListings
#tblListings {
width: 100%;
}
#tblListings thead {
background-color: #dedede;
}
#tblListings td, #tblListings th {
padding: 6px;
border: 1px solid #adadad;
border-bottom: none;
}
#tblListings tbody tr:nth-child(even) td {
background-color: #efefef;
}
#tblListings tbody tr:last-child td {
border-bottom: 1px solid #adadad;
}
#tblListings td input {
width: 100%;
border: none;
outline: none;
background-color: #ff0;
}
javascript I would presume this can be achieved with CSS, however I will post this to be safe.
$("#tblListings tbody").on("click", "td", function(event) {
if (event.target.tagName === "INPUT") return;
var cell = $(this);
var input = $("<input>", {
type: "text",
value: cell.text(),
maxlength: 128
});
cell.empty().css("padding", 0).append(input);
input.focus();
input.on("blur", function() {
cell.css("padding", 6).text(this.value);
});
});
One way to do it would be to set the input to have absolute positioning but keep the original contents in the cell to keep the width the same. See the update here: http://jsfiddle.net/V6rsC/29/.
What I did was set the cell to have relative positioning so that when I set the bounds of the input, it would use the cell instead of the document. I set left, top, right, and bottom of the input to 0px. The width remains the same because the contents are still there, but we cannot see them because the input is in the way. When we are done, the contents are replaced anyway, so know one ever knows the difference.

Css styling error with the widget aligning a div in the centre of a td

See the sample widget at http://jsfiddle.net/4B2Bc/
The problem is that the image and the text below the image should be centered in the td, whereas it is aligned left.
change:
.w_61532_article
{
text-align: center;
}
to
.w_61532_article
{
margin: 0 auto;
}
And you are fully centered.

Categories

Resources