I have created a scrollable area and i am trying to add a scrollbar underneath the images (the blue scrollbar in the linked image)
Code that i currently have for the scrollable area.
scroll = new ScrollComponent
opacity: 1.00
shadowBlur: 0
scroll.size = screen
Info.parent = scroll.content
scroll.scrollVertical = false
Scroll
I think you're trying to make a scrollbar that moves with the scrolling and shows how far along the user has scrolled, right?
Here's some code how to do that:
scrollbar.parent = scroll
# First make the width of the scrollbar relative to the size of the content.
scrollbar.width = (scroll.width / scroll.content.width) * scroll.width
# When the scroll is moved
scroll.onMove ->
# Calculate the width that we should scroll over
width = scroll.content.width - scroll.width
# Calculate the percentage that has currently been scrolled
percentage = scroll.scrollX / width
# Calculate how much space there for the scrollbar to move in
freeSpace = scroll.width - scrollbar.width
# Set the position of the scrollbar relative to the free space and the percentage scrolled
scrollbar.x = freeSpace * percentage
A full example is here: https://framer.cloud/QtcLD
Related
I'm using Sliding Up Panel package to use sliding panel. Sliding panel located above Scaffold's bottomNavigationBar and it has AnimatedContainer. Sliding panel has an onPanelSlide function witch indicates it state from 0.0 (closed / unexpended) to 1.0 (open / expanded). In gif below i have red sliding panel than on expanded set's AnimatedContainers height to 0 and to initial height at closed state. How can i make it change it height dynamically so it would set it height to 0 at the same time as sliding panel would fully open?
You could simply use a Container with height parameter set every onPanelSlide call
const NAV_BAR_HEIGHT = 100.0;
double height = NAV_BAR_HEIGHT;
onPanelSlide: (double position) {
setState((){
height = NAV_BAR_HEIGHT - position * NAV_BAR_HEIGHT;
});
}
Container(
height:height,
child: MyNavBar(),
)
What is the best practice to adapt the number of columns (crossAxisCount) of a GridView based on its width in Flutter?
Maybe I can better explain the intended behaviour by referencing HTML:
I create 6 boxes (e.g. DIVs) with a width of 200 px (and same height) each.
(a) If the element surrounding these boxes has a width of 400 px, it would automatically show 2 boxes per row in 3 rows.
(b) If the element surrounding these boxes has a width of 700 px, it would automatically show 3 boxes per row in 2 rows.
Use Wrap. It can put renderboxes as many as fit to a row, then wrap to the next row. (formerly a comment, but it looks like the answer!)
I do this like below. You can try..
int getItemCountPerRow(BuildContext context) {
double minTileWidth = 200; //in your case
double availableWidth = MediaQuery.of(context).size.width;
int i = availableWidth ~/ minTileWidth;
return i;
}
Thanks for viewing and answering.
I am using Google Charts (TimeLine) to display information from database.
But the Google Chart reference only provide setting fix height for the chart.
Whereas I would like to change chart height based on the number of rows I get from data.
So I made the code:
var graph = $('#chart_timeLine').children()[0].children[0].children[1];
$(graph).css('height',graph.scrollHeight);
$(graph).css('overflow-y','auto');
Now the chart don't have a vertical scrollbar and I am satisfied.
But I found that the scalebar, which shows the the scale of timeline chart is missing.(It is actually hiding under the chart, instead of showing up at the bottom of the chart).
So then I changed scalebar's position to absolute and set it to the bottom of my chart.
Then it is ugly because it has a height of 200px, while the scale is at the bottom of that 200px, leaving a huge blank between my chart and the scale.
Is there a fix for that?
Thank you.
Instead of messing with the internal workings of the chart, set the height based on the number of rows of data in the DataTable:
// set a padding value to cover the height of title and axis values
var paddingHeight = 40;
// set the height to be covered by the rows
var rowHeight = data.getNumberOfRows() * 15;
// set the total chart height
var chartHeight = rowHeight + paddingHeight;
and then in the Timeline's options, set the height:
height: chartHeight
I tried the answer, but it did not work for me. The way I got it to work for me was this:
// Calculate height
var rowHeight = 41;
var chartHeight = dataTable.getNumberOfRows() * rowHeight + 50;
var options = {
height: chartHeight
}
The + 1 to the getNumberOfRows() is for the X-axis text.
$.ajax({
...
success: function(jsonData){
...
var options = {
height: (jsonData.length * 40) + 80,
timeline: { colorByRowLabel: true }
};
chart.draw(dataTable, options);
}
});
As far as I can tell its:
30px height for each bar
10px padding for each group.
60px for the Series.
So for a 9 bar Group = (30 * 9) + 10 = 280px
Chart Height = 280px + 60px
If you are Grouping Rows you will need to determine if your date ranges overlap with any others in that group.
Google does this by:
Getting the Group items IN START DATE ORDER
Creating an empty array of Group Display Rows
For each Group Item:
For each Display Row
If Item fits in Row...
Add it to existing Display Row
Next
If No existing Display row found
Add New Display Row
Next
I have a map app where the user can place waypoints manually. I would like for them to press the waypoint button and have a waypoint placed in the center of their currently visible view on the content view.
I'm afraid you'd have to calculate it yourself. contentSize returns size of the scrolled content, contentOffset gives you the origin of the scroll view inside the content. Then with scrollView.bounds.size you can find the center of the view.
Haven't tested this, but maybe you could convert scrollView.center to your scrolled map like this:
CGPoint viewportCenterInMapCoords =
[scrollView.superview convertPoint:scrollView.center
toView:mapViewInsideScrollView];
Need to account for how zoomed it is, then I can convert the content offset to the size of the full image and add some.
/// this is the full size of the map image
CGSize fullSize = CGPointMake(13900, 8400);
/// determines how the current content size compares to the full size
float zoomFactor = size.width/self.contentSize.width;
/// apply the zoom factor to the content offset , this basically upscales
/// the content offset to apply to the dimensions of the full size map
float newContentOffsetX = self.contentOffset.x*zoomFactor + (self.bounds.size.width/2) *zoomFactor-300;
float newContentOffsetY = self.contentOffset.y*zoomFactor + (self.bounds.size.height/2) * zoomFactor-300;
/// not sure why i needed to subtract the 300, but the formula wasn't putting
/// the point in the exact center, subtracting 300 put it there in all situations though
CGPoint point = CGPointMake(newContentOffsetX,newContentOffsetY );
I have a scrolled window with a viewport, which is some 4000 pixels tall. Is there a way to figure out the mouse position in viewport coordinates? At the moment, what I get for the position is the position in the segment that I actually see, and if I scroll down to the bottom, I still get something like 600 pixels for the vertical position (that is the size of my window), instead of the 4000 that I expect. If there is no easy way, how can one determine by how much the scrolled window is scrolled? I believe, I could then put the pieces together.
Thanks,
v923z
You are looking for the get_vadjustment method of the scrolled_window.
For instance if you bind the button_press_event to the scrolled window:
def button_press_event(self, widget, event):
v_scroll_pos = widget.get_vadjustment().get_value()
print "y pos + scroll pos = %f" % (event.y + v_scroll_pos,)
return gtk.TRUE
Would print the y position + the amount it is scrolled in the y direction.