I have an intriguing problem that I thought I resolved with a janky solution, but I only half solved it. I'm using Datatables for Jquery and I'm loading in data from a database to populate the table.
I should note that been developing using Firefox.
Additionally, I have a horizontal scroll bar and the first five columns are fixed. This poses a problem because before all of the data is loaded, the datatable puts in a horizontal scroll bar. Some of the data loaded after the scroll bar is initialized is longer in length and thus makes the column widths larger.
To resolve this, I just call a resize
<script type="text/javascript">
setTimeout(function(){
window.dispatchEvent(new Event('resize'));
},2000);
</script>
What happens here is I see the page load, the table is initially messed up, but after a brief delay (a little less that 2 seconds as it should be because of the time I've given to the timeout), the table fixes itself because of the window resize.
I thought the problem was fixed, until I began testing in Chrome. The table will be initially messed up, just as it is in Firefox, but once the resize is called, the table extends horizontally, loses the horizontal scroll bar, and the chrome window gets one. That's not ideal because the point of the scroll bar is to keep the table within the width of the screen size.
To contain the width of the table, I use the following CSS:
div.dataTables_wrapper{
width: 96vw;
margin: 0 auto;
}
I define the table like so.
$(document).ready(function() {
$('#example').dataTable( {
"scrollX": true
} );
} );
new $.fn.dataTable.FixedColumns(example,{
leftColumns:5
});
Any help is appreciated.
You have to force the width of the datatables_scrollBody to 100% in order to maintain the horizontal bar visible.
.dataTables_scrollBody {
width: 100%!important;
}
Related
I got a centered Layout including a max-width and margin: 0 auto;. Furthermore i am currently using Isotope for filtering and sorting a grid.
The Problem is: There is the possibility that the height of the body / main container becomes smaller than the actual window height and therefor of course removes the scrollbar, since the body has overflow: hidden. The centered layout jumps (because of the margin: 0 auto), which doesn't look very great.
The Question: Is there a callback function from Isotope where i could test if the scrollbar is shown or not? Or is there even a possibility to bind a function on the body when the scrollbar disappears? what is the best method to check if there is a scrollbar visible or not? (EDIT// as suggested an easy method is $(document).height > $(window).height, now i just need a triggered event to call the if statement)
Thanks in advance!
EDIT here is a LINK TO FIDDLE to play around
edit
Since originally posting this question, I've gone down a couple more paths trying to solve the issue. It's still not solved, but now my questions are different. The original question is below, and then I'll add a section below that with updates.
original question
I'm working on a Rails 4 application and having some trouble with JavaScript and the Chartkick gem.
I have two JavaScript functions that make it so that a user can click an icon and an element will drop down below the icon/appear on the page, and the icon will switch from a right-pointing arrow to a down-pointing arrow. The code is this:
function ReverseDisplay(d)
{
if(document.getElementById(d).style.display == "none")
{
document.getElementById(d).style.display = "block";
}
else
{
document.getElementById(d).style.display = "none";
}
}
$(function() {
$('.toggle-icon').click(function() {
$(this).find('i').toggleClass('fa-arrow-circle-o-right fa-arrow-circle-o-down');
});
});
And the haml:
%a{href: "javascript:ReverseDisplay('toggle-stats#{item.id}')", class: 'toggle-icon'}
%i.fa.fa-arrow-circle-o-right
%div{id: "toggle-stats#{item.id}", style: "display: none;"}
= the items to be displayed
It works. However, I expect the items that drop down to take up the full width of the page, like so:
But instead, when I first click the toggle icon, they show up squished, like this:
If I then resize the browser just a tiny bit, the graph pops out to full-width, and it stays that way no matter what I do from there. I can't figure out how to get ahold of the generated mark-up, because this chart comes from Chartkick, as a gem. The generated html in the browser has this line:
<div dir="ltr" style="position: relative; width: 300px; height: 300px;">
Where the width: 300px is what's being changed to width: 1000px when I change the browser size. I don't have to change the browser size permanently or significantly. Once that width has changed to 1000px the first time it stays there - but the minute I refresh the page and click the icon to toggle the chart again, it's back to 300px. I don't know how to hook into this div, because it's generated by the gem and I don't know how to add a class to it. I've tried adding styling to a parent element that ensures all of that parent elements' children are width: 100%, but that doesn't do anything.
Anyway, I don't think that adding a class to it is the solution here. I just have no idea what is - I don't JavaScript incredibly well. I'm pretty much completely new to all front-end work as a whole. What's going on here, and how can I make these charts always be the full width of the page when they're toggled?
Notes: Am testing this in Chrome. I tested in Firefox and it does the same thing.
OK, I'm starting to wonder if this has something to do with the fact that I'm using a JavaScript function in order to capture dynamic item IDs - a page may have any number of these toggle-able charts, and so calling a jQuery function on each id seems impossible, because I don't know what ID is.
I removed the jQuery call, however, and the problem persists.
One of those times when rubber-ducking the Stack Overflow question box has not yet answered my question. So I guess I'll submit and hope for outside help here. :/
adjusted question
This question in the Github issues for Chartkick has lead me down a different path. The solution is not necessarily in attempting to restyle the charts at all. Instead, what I'm trying to do is trigger a resize event, because the chart automatically regenerates when the browser window is resized. This is both what's causing the problem and where the solution seems to lie.
My code:
.row
.col-sm-12
%h3.title-block.second-child
Stats by Video
.panel-groupd#faqList
- #claim.presenter.videos.each_with_index do |video, index|
.panel.panel-default
.panel-heading
%h4.panel-title
%a.chart{data: { toggle: "collapse", parent: "#faqList" }, href: "#video#{index}" }
= "'#{video.title}' at #{video.event.display_name} on #{display_date(video.recorded_at)}"
%div.panel-collapse.collapse{id: "#video#{index}"}
.panel-body
- if video.impressions.count > 0
%h4
Impressions by Hours (24 hours)
= line_chart video.impressions.group_by_day(:created_at, range: 1.day.ago...Time.now).count
...a couple more charts
:javascript
$(".chart").click(function() {
window.dispatchEvent(new Event('resize'));
});
So the intention here is that when I click the .panel-heading, this both drops down the .panel-body with the charts in it and resizes the window, which makes the charts resize correctly (or, rather, should).
It kind of works, in that, when I first click the .panel-heading trigger, it does not resize the charts, but when I click it again, the charts are resized perfectly for a split second... just before they become hidden from view again. :(
I've tried adding a time out to the javascript, like so:
:javascript
$(".chart").click(function() {
setTimeout(1000);
window.dispatchEvent(new Event('resize'));
});
But it doesn't appear to do anything at all.
So what I'm wondering here is how to get this resize event to work once the dropdown .panel-body is out so that the charts will resize appropriately on their own.
Here's a screen cast of the current problem, in case I didn't describe it clearly enough:
https://youtu.be/5quMGABoDs8
I don't know anything about Ruby or Chartkick, but in order to override that inline styling, you would have to use !importantin the css.
So, if you try that technique of giving all the children of the parent element width: 100% again, you might want to implement it something like this:
.importantRule { width: 100% !important; }
$( "parentElement > childElement" ).addClass('importantRule');
(First line goes in your CSS file, second line goes in JS)
I have Kendo UI Grid witch one locked column, which has dynamic width and height. The Grid's container is resizing in CSS and I'm using kendo.resize($("#grid")) to fit Grid to it and everything works perfecly.
I have also a function triggered on window resize event which is adjusting the columns widths. Colums should occupy whole grid without showing bottom scrollbar if it's possible, but they also have minimum height. So I calculate the columns widths and set it to them, but when I have horizontal scrollbar in the unlocked colums container, the locked container do not match to it.
Normally locked columns shows white area in bottom if there is horizontal scrollbar but when I set the columns widths explicitly it woluld not.
I've reproduced my issue in this fiddle (it's a little simpler than I describe but idea is the same): http://dojo.telerik.com/ADaqe
When i open it grid should looks ok, but when you'll decrease width of right iframe and horizonal scrollbar will show - white area is not shown and just try to scroll the grid to the bottom and see what happen:
Any help would be appreciated.
There is private grid function ._adjustLockedHorizontalScrollBar() which doing exacly what I needed:
$(window).on('resize', function () {
that._adjustLockedHorizontalScrollBar();
...
});
Here is updated fiddle: http://dojo.telerik.com/ADaqe/4
If you only want to use CSS to fix this, adding padding-bottom: 100% to the table inside the locked column worked for me.
.k-grid-content-locked {
height: 100% !important; // overrides inline style
table {
padding-bottom: 100%;
}
}
Tested in Chrome 75.0.3770.100, IE 11.76517134.0, Android 8 and iOS 12.2
Hope this helps
First up, I know this question is probably asked several times, but everyone's layout is different!
I have a mapping application and with a left side tool bar. This tool bar has jquery tabs. I cant get a scroll bar on these tabs. even after overloading .ui-tabs-panel. I know just by adding a height:somepx here gives me scroll bars, but thats not what i want. I want the height to be always till all the way down. I have tried several things but nothing works :(
I suspect its because of my other layout properties which are there to keep the layout liquid (make map adjust to screen sizes and keep left side bar constant).
Here is the stripped down version in Jsbin:
http://jsbin.com/exeguw/edit#source
Can some one please help me get the vertical scroll bar?
Thanks!
If you set the tab div to the height of the #map div (adjusted for tab headers) after the tabs are created, then overflow will kick in and make the contents scrollable:
javascript:
function ResizeTabs() {
$("div.scroll-tab").height($("#map").height() - 80);
}
$(function() {
$(window).resize(ResizeTabs);
$('#tabs').tabs({
create: ResizeTabs
});
});
Updated jsBin.
EDIT: now handles window resizing as well!
Try this
http://jsbin.com/exeguw/9/edit#javascript,html,live
This should be simple but nothing's working:
Question
How do you set the height of a webpage to be, lets say, exactly 4000 pixels—in such a way that scroll bars exist even when the page is blank?
Background
I'm new to JavaScript/JQuery but very experienced with similar technologies. I'm trying to do some fancy effects based on scrolling the page. To accomplish this methodically, as a first step I'm looking to make a "really tall" page. From there I will hide/display items based on the scroll height with pseudo-code along the lines of:
function onScrollEvent() {
var height = scroll height
var sectionIndex = Math.floor(height / MAX_SECTION_HEIGHT);
for each item in my array of graphics
if item index != sectionIndex then item.fadeOut else item.fadeIn
}
Once I have that working, I'll start creating the effects I want to see. The problem is, I can't make the stupid page "really tall."
Summary
When I set the height style property of the main-content div, it doesn't seem to trigger scroll bars unless there's actual content on the page. How do I make the page "permanently tall," so to speak? That is, I want the page to behave (scroll) as though it has 4000 pixels of content even if there's only one line of text on the page. Right now it behaves as though there's a call to:
height = Math.min(height of contents, height of div style)
Have you tried min-height for body, or html tags? min-height requires the element to be at least that height regardless of the content contained.
CSS
html, body{
min-height: 4000px;
}
Live Demo
Reference
Easy in CSS:
body
{
height: 4000px;
}
Example here.
This is the simplest way. min-height is not supported by all browsers. This is a specific height that you can set to the body tag (essentially the webpage itself) to make it really tall.
In your CSS add:
body
{
min-height: 4000px;
}
And you'll also need:
body
{
height: 4000px;
}
for internet explorer (via IE's conditional comments).
In Chrome 10, on OSX 10.6 -- this renders a complete blank page with scroll on the Y axis, hope this is how you meant:
http://pastie.org/1674432