I used a package ToastUI Grid in my project. Currently I'm having a problem with the package.
It seems it cannot vertical scroll within the grid. But when I move out my mouse cursor to the grid, the scrolling just works fine. (see demo video)
I have tried posting an issue to their github project. But I received no response of it.
I just wondering if there is a way, we can forcefully make this as scrollable using Javascript or css.
This code looks like below,
const grid = new Grid({
el: document.getElementById('grid2'),
data: gridData,
... more code here
});
And if I inspect the element of the grid it looks like this,
<div id="grid2">
<div data-grid-id="1" class="tui-grid-container tui-grid-show-lside-area" style="width: 100%;">
... more code here
</div>
</div>
Updated: I added here a codepen.
Related
The idea is to use a carousel and instead of placing images as their content, to use charts (in this case using Chartkick). When the page loads for the first time, the chart that appears on the very first container renders without any issues. However, when I change containers on the Carousel, the other charts appear very small and not at the right position. I've noticed that when I manually resize the webpage, the chart loads correctly and the other ones inherit the problem, so I assume this is due to a rendering protocol of the Carousel that is not on track with what I was expecting. Is there any way to force a page resize when clicking a button on the Carousel? Or is it another way to solve that problem?
Thank you in advance.
I managed to solve the issue the way I was thinking of initially.
Here is the code in case someone has that same problem:
Javascript:
<script>
$(document).ready(function(){
$("#myCarousel").carousel();
// Enable Carousel Indicators
$(".item1").click(function(){
$("#myCarousel").carousel(0);
// The next line of code triggers the listeners for the page-resizing
// event, which includes the carousel and will display the chart
// correctly.
window.dispatchEvent(new Event('resize'));
});
$(".item2").click(function(){
$("#myCarousel").carousel(1);
window.dispatchEvent(new Event('resize'));
});
});
</script>
HTML:
<ol class="carousel-indicators carousel-indicators-numbers">
<li class="item1 active">1</li>
<li class="item2" >2</li>
</ol>
I'm using bootstrap as a main front-end framework for my web site project and sigma.js as it's graph visualization library.
...
<div id="graph-container" style="width: 540px; height: 300px;">
</div>
<script>
...
$(document).ready(function() {
s = new sigma({ graph: graph, container: 'graph-container' })
});
</script>
What I'm struggling on is to remove those hard-coded graph-container sizes and delegate it's layout to bootstrap's grid system.
However, it just shrinks to nothing when I just simply remove the style attribute.
Is there any way to embed sigma.js seamlessly within bootstrap's grid system?
It's easy to delegate the width of sigma to bootstrap with a width:100%.
But for height it's harder if you don't want a value in pixel (for %, all parent element must have a relative height).
If you don't want inline code, you can put your style into your css file.
On the site there are several pie charts. All diagrams are created immediately after the page loads. At the moment of creation, part of the diagrams is hidden (the parent layer display: none)
Visible charts are set correctly, hidden charts have parameter is incorrect width.
The layer of the diagram
<div id="DGramm" style="width: 100%;"> </ div>
The result - the diagram created on the entire width of the page, but no of the width of the parent layer. How to do the right, to take the width of the hidden layer?
At this point, all that came up - to create a chart after the first showing of the hidden layer.
You could trigger the window.resize event to update the Chart size. Add this script to your page.
$(document).ready(function () {
$(window).trigger('resize');
});
See the answer here. Thanks, david.
I'm using Dojo's (1.7.3) chart component (dojox.charting.chart) inside an HTML table (and I cannot change this because it's a kind of template provided by someone else where I have to put charts at unknown locations).
Actually (simplified) HTML code may look like this:
<table class="fit-parent">
<tbody>
<tr>
<td>
<div id="chart123" class="full-size-chart"></div>
</td>
</tr>
</tbody>
</table>
And its CSS is something like this (consider full-size-chart equivalent to fit-parent):
.fit-parent
{
width: 100%;
height: 100%;
}
Code to create the chart:
<script type="text/javascript">
require([
"dojox/charting/Chart",
"dojox/charting/themes/MiamiNice",
"dojox/charting/plot2d/Columns",
"dojo/domReady!"
],
function (Chart, theme, ChartType) {
var chart = new Chart("chart123");
chart.setTheme(theme);
chart.addPlot("default", {
type: ChartType
});
chart.addSeries("Series name", chartData);
chart.render();
}
);
</script>
Rendered table is inserted inside others Dojo containers (BorderContainer and ContentPane) with both a header and an edge panel. Site is made with ASP.NET MVC3 and above code is inside one view page, main layout is inside _Layout.cshtml page.
The problem is that the chart size is not correct, it's bigger than the size of the page and scrolls appear. Ideally the table should fit the content box and resize with the window size.
The green box is the table (2 rows in this example). The chart should fill the entire row (because of 100% width and height), table layout is right (it fills the "document area" and everything else is fine). Wrong with my code/layout? Please remember I can change HTML (and use CSS classes) but I can't ask them to use CSS float/positions directly or to "imagine" final layout with CSS (probably they use a simple HTML editor or notepad).
Chart doesn't support CSS-set sizes, nor sizes in percents. You should specify a chart size either directly on its node in pixels before creating, or during creating as 2nd and 3rd parameters. If you want to support a fluid layout, use a simple JavaScript tracking code for that and resize chart accordingly when needed.
Problem in brief
I have got a piece of working two dimensional scrolling code. Scrolling as such is working fine. Scrolling can be done in any direction (not like restricted to only horizontal or only vertical at a ti,e) but there are two problems -
Scrolling beyond the visible area towards top and left, does not bounce back the scrollable area.
Scrolling to right and bottom bounces back.
Problem demo - http://jsfiddle.net/sandeepan_nits/pAhjU/6/
Note - Test in webkit browsers only (Google chrome and Safari).
Solution I am looking for
Either, point out what is wrong in my code.
Or share any properly implemented working demo of both ways scroll (horizontal + vertical) using the same version of iscroll, so that I can follow the same. I am using - version 3.7.1, preferable, or using iscroll version 4, fine as well.
Or any pointers, of course, would be appreciated.
Problem Description
Please check working code here - http://jsfiddle.net/sandeepan_nits/pAhjU/6/
Note -
Test in webkit browsers only (Google chrome and Safari).
I have knowingly put everything inside the HTML section in the jsfiddle, because if I separate things completely, the scrolling does not work, and I am not sure where exactly it stops working. Thanks if you can point out.
Code
Here is the HTML -
<div class="header">
<div class='left_link'></div>Demo</div>
<div id="main_content" class="main_content">
<b><div id=scroller1><br/>
<div class='center_data'>Scrollable area</div>
<div class='center_data'>hello world!</div>
<br/>
</div></b>
</div>
Note - I know there is invalid html there - <div id=scroller1> is inside <b></b> and I am not sure why if I remove the <b></b> tags, horizontal scrolling does not work anymore - check here.
Here is the js -
var myScroll;
var a = 0;
function loaded() {
//setHeight(); // Set the wrapper height. Not strictly needed, see setHeight() function below.
// Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier.
myScroll = new iScroll('scroller1', {desktopCompatibility:true});
//myScroll2 = new iScroll('scroller2', {desktopCompatibility:true});
}
// Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer).
// If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove.
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);
I guess the reason is that the scrollable div is by default rendered at the bottom-right corner of the scrollable area. But I am not sure about the proper way to configure those things - how to set where to render the scrollable div inside the scollable area. So far I did not find any working demo of both ways scrolling - horizontal + vertical scrolling.
I checked out the documentation of iscroll and many working demos, but did not find any demo where scrolling can be done both ways - horizontally as well as vertically. I checked the "Accepted options are:" section under "Syntax" section in http://cubiq.org/iscroll but none of those params seem to be what I am exactly looking for.
Other things
Also, one more thing, I am not able to view the area covered by dom elements in chrome browser, while I inspect the given scroll demo. By viewing the area I mean moving the mouse over the dom inspector panel highlights the dom in the browser view. When does it not appear? I checked with validated HTML as in http://jsfiddle.net/sandeepan_nits/pAhjU/12/.
Somebody please create a tag iscroll or iscroll3 so that I can retag my question.
Update
I just want to have normal two dimensional scrolling with the scroll area being properly inside the visible screen and there should be bounce back on taking outside the screen. Right now there is no bounce back (in my jsfiddle) on scrolling towards top and left, outside screen. Bounce back happens on scrolling to right and bottom. I just want the scrolling area to be well placed inside the screen. I guess bounce back will automatically get fixed then.
I think the last version (4.1.8) on the github repo will fix your problem ;) I'm using it on some projects and it is now optimized for desktop browser ;)
Edit
From the documentation :
hScroll, used to disable the horizontal scrolling no matter what. By default you can pan both horizontally and vertically, by setting this parameter to false you may prevent horizontal scroll even if contents exceed the wrapper.
vScroll, same as above for vertical scroll.
By default, when creating a new iScroll('idOfElement') the scroll is vertical and horizontal. It can be disabled with these parameters. Dual Scroll is totally possible as this video shows it.
So, to force dual Scroll :
var myScroller = new iScroll('idOfElement', {vScroll:true, hScroll:true});
This is not a complete solution, but this might help you.
First of all, The HTML code was not properly nested, and so you were needed to put the <div> inside the <b>. I fixed up the HTML a bit and its working without the <b>
http://jsfiddle.net/Aexhz/
And with properly nested HTML and correct settings, This worked even after dividing the HTML/JS/CSS
For me, it does show some Horizontal as well as Vertical Scrolling, but i don't know if that's how you want it to be. i Edited the Class initialization line as well
myScroll = new iScroll('scroller1', {desktopCompatibility:true});
TO
myScroll = new iScroll('scroller1', {
snap: true,
momentum: false,
hScrollbar: false,
vScrollbar: false,
desktopCompatibility: true
});
This doesn't affects much but i still put that.
I will continue looking into this and update my answer if i find anything new.
I know you want to fix this using iscorll but wanted to share this with you, i had great results using it: http://jscrollpane.kelvinluck.com/#usage
It is highly customizable with css, a demo here with vertical and horizontal scroll: http://jscrollpane.kelvinluck.com/basic.html