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
Related
I have a demo angular project which has basic text and table inside as below.There is print button which is calling window.print() to make the page printed with applied styling.
printPage() {
window.print();
}
css:
#media print {
#page {
size: landscape;
margin: 0;
}
}
My demo project link:
https://stackblitz.com/edit/angular-qxlcna?file=src/print/print.component.ts
My aim is being able to print this table landscaped exactly how it seems on the web page without any crops.^
After print button clicked preview on chrome's print dialog looks great as below
Unfortunately after print, result is not as expected.As you can see there are crops from left and right sides of the paper.Although my other attempts to set margin:0 padding:0 stylings didn't work.How can I print exactly as same as what I'm seeing on HTML page?
I tried also this kind of styling
#media print {
* {
margin: 0 !important;
padding: 0 !important;
}
html,
body {
height: 100%;
overflow: visible;
}
}
I've checked your example and it's a problem related with the printer. Some printers have a "non-printable margin" by default so there is no way to print on the edges.
The user could be change manually if there are some options for scaling the document but it would be a bad solution.
My solution would be adding some margins in the CSS for the print media. For example, in this case, I 've added a left and right margin and everything it's printed correctly.
.designed__table {
width: 100%;
td,
th {
padding: 5px;
border: 1px solid;
}
}
#media print {
#page {
size: landscape;
margin: 0px 10px;
}
}
.print-container {
position: absolute;
}
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/
I am working on a piece of legacy code for a table. In certain cells, I'm adding a notice icon. When you hover over the icon a <span> is made visible displaying some information. I would like to be able to make this <span> smart about its positioning but can't figure out a good method. I can statically position it but depending on which cell in the table it is in it gets lost against the edge of the page. I have done a JsFiddle here demonstrating the issue. Unfortunately, I am not allowed to use anything but HTML, CSS and vanilla JS.
The title attribute to most tags is pretty smart about its position. I have added a title to one of the cells in the table in the jsFiddle (cell containing "Hello"). Is there any way to make my span exhibit the same smart behaviour?
A pop-up can be added before any element by putting the popup html code inside a 'div' with 'position:absolute; overflow:visible; width:0; height:0'.
When these events: 'onmouseenter', 'onmouseleave' are fired on the element, just toggle the popup css attribute 'display' between 'none' and 'block' of the element.
Example on jsfiddle:
https://jsfiddle.net/johnlowvale/mfLhw266/
HTML and JS:
<div class="popup-holder">
<div class="popup" id="popup-box">Some content</div>
</div>
Some link
<script>
function show_popup() {
var e = $("#popup-box");
e.css("display", "block");
}
function hide_popup() {
var e = $("#popup-box");
e.css("display", "none");
}
</script>
CSS:
.popup-holder {
position: absolute;
overflow: visible;
width: 0;
height: 0;
}
.popup {
background-color: white;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
position: relative;
top: 20px;
width: 300px;
display: none;
}
I am using the great jquery plugin jtable.
But I can't find any examples showing a vertical scrollbar.
I tried setting a height and overflow.auto on the div that contains it - the scrollbar then scrolls the whole table including header - I only want to scroll the rows not the header and not the footer.
Has anyone found a way to do this?
A solution that works some way is inserting:
$('.jtable').wrap('<div class="jtable-main-container scroll-content" />');
and
.scroll-content {
overflow-y: auto;
width:100%;
}
div.jtable-main-container {
height:100%;
}
And setting height on the div.
However it also scrolls the table header - but it is better than scrolling the whole jtable - I tried to make a solution where jtable generates 2 tables - one with header and one with body but the header gets out of sync.
see it here: http://jsfiddle.net/j5Q4L/3/
$('.jtable').wrap('<div class="jtable-main-container scroll-content" />');
and
.scroll-content {
overflow-y: auto;
width:100%;
}
div.jtable-main-container {
height:100%;
}
Thank you!
<style type="text/css">
#StudentTableContainer {
width: 100%;
display: block;
}
#StudentTableContainer tbody, .jtable tbody {
height: 100px;
overflow-y: auto;
display: block;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#StudentTableContainer').jtable({
//...
});
});
</script>
<div id="StudentTableContainer" class="jtable"></div>
Add this to css
table.jtable{
overflow-y: scroll;
display:block;
overflow-x: hidden;
}
I'm currently working on my new website and I need help.
When you open the site you get a landing page with icons (sort of menu bar) and you can't scroll.
When you click, tadaaaa it is a one page design. I am thinking about a javascript/jquery kind of script.
Current css:
body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
overflow: hidden;
}
Example jquery:
$("nav").on("click", function(e) {
$('html, body').css('overflowY', 'visible');
}
I am quite a noob about this so don't blame me for a weird kind of script. I am trying to learn javascript and jquery.
You should do this by adding a class to your page to indicate its state, and then change the styling in your stylesheet.
HTML:
Show whole page
Congratulations. You are viewing the page
JS:
$(document).ready(function () {
$("#loadpage").click(function () {
$("html").addClass("loaded");
});
});
CSS:
#page { display: none; }
html.loaded #page { display: block; }
html.loaded #loadpage { display: none; }
Demo:
http://jsfiddle.net/FHPzb/