scrollWidth and scrollHeight not working?

Solar2D General Questions/Discussion
#1

Someone posted this on the widgets forum, but it doesn’t look like anyone from Corona has replied there recently so I’m posting this here as well.

Just to be sure I’m doing it correctly, I’m using width and height to set how big the scrollview should appear, and scrollWidth and scrollHeight to set the total amount of usable space within the scrollview.

Example:

local scrollListOptions = { width = display.contentWidth, height = display.contentHeight, scrollWidth = display.contentWidth, scrollHeight = display.contentHeight \* 2, } myScrollView = widget.newScrollView(scrollListOptions)  

Ignoring the missing top, left, friction etc for now, am I correct in thinking that this SHOULD give me a scrollview that appears to be one screen wide and high, but scrolls enough to contain 2 screen heights of content?

 

If so, then it doesn’t work as of build 1207. Even if set scrollHeight to 0, nothing changes. It seems to just pick a default scrollHeight and stick with that.

#2

My understanding is that scrollHeight and scrollWidth set the maximum possible scroll area, but the actual scroll area will always collapse to the size of your content (plus any padding you specify). If you really want to have a giant scroll area with no content in most of it, you could try inserting an invisible pixel in the lower right corner, which should force the scrollView to expand all the way to that size. - Andrew

#3

But that means the scrollHeight value is totally redundant, if it will just scroll as far as there is content.

If I set my scrollHeight to 500 and put an object into the scroll group at 1000 - surely it should not scroll past 500 as that is the maximum value set?

As I said before, if I set scrollHeight to 0 nothing changes. I’m aware that you use verticalScrollDisabled to disable vertical scrolling, but I wanted to test what changing the scrollHeight would do. No value makes any difference to the size of the scrollable area, it’s always based on the content of the scrollview.

#4

Ah, I thought it would at least set the maximum bounds, but apparently it doesn’t. - Andrew

#5

I’m having the exact same problem. Can someone take a look at this? Scrollviews aren’t very useful if they don’t let you scroll…

My code is as follows:

[lua]local widget = require “widget”

local bg = display.newRect(0, 0, 800, 2000)

bg:setFillColor(200, 200, 200)

local rect1 = display.newRect(50, 50, 50, 50)

rect1:setFillColor(100, 200, 255)

local rect2 = display.newRect(50, 150, 50, 50)

rect2:setFillColor(100, 200, 255)

local rect3 = display.newRect(50, 250, 50, 50)

rect3:setFillColor(100, 200, 255)

local rect4 = display.newRect(50, 350, 50, 50)

rect4:setFillColor(100, 200, 255)

local rect5 = display.newRect(50, 450, 50, 50)

rect5:setFillColor(100, 200, 255)

local rect6 = display.newRect(50, 550, 50, 50)

rect6:setFillColor(100, 200, 255)

local rect7 = display.newRect(50, 650, 50, 50)

rect7:setFillColor(100, 200, 255)

local rect8 = display.newRect(50, 750, 50, 50)

rect8:setFillColor(100, 200, 255)

local rect9 = display.newRect(50, 850, 50, 50)

rect9:setFillColor(100, 200, 255)

local rect10 = display.newRect(50, 950, 50, 50)

rect10:setFillColor(100, 200, 255)

local rect11 = display.newRect(50, 1050, 50, 50)

rect11:setFillColor(100, 200, 255)

local rect12 = display.newRect(50, 1150, 50, 50)

rect12:setFillColor(200, 100, 255)

local scrollview = widget.newScrollView {

    top = 0,

    left = 0,

    width = display.contentWidth * 2,

    height = 2000,

    scrollWidth = display.contentWidth * 2,

    scrollHeight = 2000,

    listener = scrollListener,

    horizontalScrollDisabled = true,

    hideScrollBar = false,

}

scrollview:insert(bg)

scrollview:insert(rect1)

scrollview:insert(rect2)

scrollview:insert(rect3)

scrollview:insert(rect4)

scrollview:insert(rect5)

scrollview:insert(rect6)

scrollview:insert(rect7)

scrollview:insert(rect8)

scrollview:insert(rect9)

scrollview:insert(rect10)

scrollview:insert(rect11)

scrollview:insert(rect12)[/lua]

#6

Further research on the forums has led me to this thread: 

http://forums.coronalabs.com/topic/37238-scrollview-reaching-top-bottom-limit-with-scrollheight-set-to-1000-and-height-set-to-480/?hl=%2Bscrollview+%2Bscrollheight

According to @JeffreyQJr, the scrollview will work if you have padding at the top and/or bottom of the scrollview. I can confirm that this works as well.

Perhaps we are confused as to what scrollHeight, bottomPadding, etc are supposed to do? The documentations seems very clear on their definitions, yet very wrong. 

#7

My understanding is that scrollHeight and scrollWidth set the maximum possible scroll area, but the actual scroll area will always collapse to the size of your content (plus any padding you specify). If you really want to have a giant scroll area with no content in most of it, you could try inserting an invisible pixel in the lower right corner, which should force the scrollView to expand all the way to that size. - Andrew

#8

But that means the scrollHeight value is totally redundant, if it will just scroll as far as there is content.

If I set my scrollHeight to 500 and put an object into the scroll group at 1000 - surely it should not scroll past 500 as that is the maximum value set?

As I said before, if I set scrollHeight to 0 nothing changes. I’m aware that you use verticalScrollDisabled to disable vertical scrolling, but I wanted to test what changing the scrollHeight would do. No value makes any difference to the size of the scrollable area, it’s always based on the content of the scrollview.

#9

Ah, I thought it would at least set the maximum bounds, but apparently it doesn’t. - Andrew

#10

I’m having the exact same problem. Can someone take a look at this? Scrollviews aren’t very useful if they don’t let you scroll…

My code is as follows:

[lua]local widget = require “widget”

local bg = display.newRect(0, 0, 800, 2000)

bg:setFillColor(200, 200, 200)

local rect1 = display.newRect(50, 50, 50, 50)

rect1:setFillColor(100, 200, 255)

local rect2 = display.newRect(50, 150, 50, 50)

rect2:setFillColor(100, 200, 255)

local rect3 = display.newRect(50, 250, 50, 50)

rect3:setFillColor(100, 200, 255)

local rect4 = display.newRect(50, 350, 50, 50)

rect4:setFillColor(100, 200, 255)

local rect5 = display.newRect(50, 450, 50, 50)

rect5:setFillColor(100, 200, 255)

local rect6 = display.newRect(50, 550, 50, 50)

rect6:setFillColor(100, 200, 255)

local rect7 = display.newRect(50, 650, 50, 50)

rect7:setFillColor(100, 200, 255)

local rect8 = display.newRect(50, 750, 50, 50)

rect8:setFillColor(100, 200, 255)

local rect9 = display.newRect(50, 850, 50, 50)

rect9:setFillColor(100, 200, 255)

local rect10 = display.newRect(50, 950, 50, 50)

rect10:setFillColor(100, 200, 255)

local rect11 = display.newRect(50, 1050, 50, 50)

rect11:setFillColor(100, 200, 255)

local rect12 = display.newRect(50, 1150, 50, 50)

rect12:setFillColor(200, 100, 255)

local scrollview = widget.newScrollView {

    top = 0,

    left = 0,

    width = display.contentWidth * 2,

    height = 2000,

    scrollWidth = display.contentWidth * 2,

    scrollHeight = 2000,

    listener = scrollListener,

    horizontalScrollDisabled = true,

    hideScrollBar = false,

}

scrollview:insert(bg)

scrollview:insert(rect1)

scrollview:insert(rect2)

scrollview:insert(rect3)

scrollview:insert(rect4)

scrollview:insert(rect5)

scrollview:insert(rect6)

scrollview:insert(rect7)

scrollview:insert(rect8)

scrollview:insert(rect9)

scrollview:insert(rect10)

scrollview:insert(rect11)

scrollview:insert(rect12)[/lua]

#11

Further research on the forums has led me to this thread: 

http://forums.coronalabs.com/topic/37238-scrollview-reaching-top-bottom-limit-with-scrollheight-set-to-1000-and-height-set-to-480/?hl=%2Bscrollview+%2Bscrollheight

According to @JeffreyQJr, the scrollview will work if you have padding at the top and/or bottom of the scrollview. I can confirm that this works as well.

Perhaps we are confused as to what scrollHeight, bottomPadding, etc are supposed to do? The documentations seems very clear on their definitions, yet very wrong. 

#12

This issue/question is still out there. Can we please have someone from CL clarify what the scrollWidth, scrollHeight are supposed to do? Thank you. 

#13

width and height are the visible area of the scrollView.  scrollWidth and scrollHeight are supposed to set the limits of how big the overall scroll area is.   Since scrollView’s are implemented as display.newGroups() which are by definition infinite in size, if we don’t set a limit, you could scroll for ever.   These numbers are supposed to form an artificial bounds on the group.

Now I’ve not looked at the code for this, but it seems to me that it would be a desirable feature that if your content doesn’t fill the maximum set with scrollWidth and scrollHeight, then you would not want to scroll empty space, so it may artificially limit to the actual bounds of the group upto a max of scrollWidth/scrollHeight.

Is it not behaving this way?

Rob

#14

I have been trying to understand this well by varying the width values of text vs scrollWidth using the ScrollView sample app from the CL samples and it is somehow not playing right. Try it. 

Try scrollWidth = display.contentWidth * 2,

and display.contentWidth * 3 for the display.newText putting up the lotsOfText. You would expect to have a wide body of text which is scrollable up to twice the screen width right?

Then try scrollWidth = display.contentWidth * 3,

and display.contentWidth * 2 for the display.newText …

Something is definitely not adding up. Need more experimentation to nail it down.

#15

Rob, did you have a chance to try this simple test? Give it a whirl if you have 5 minutes. You will see the inconsistency. Thanks

#16 
    local scrollview = widget.newScrollView {         top = 0,         left = 0,         width = display.contentWidth ,         height = display.contentHeight,         scrollWidth = display.contentWidth \* 2,         scrollHeight = 2000,         listener = scrollListener,         horizontalScrollDisabled = true,         hideScrollBar = false,     }

The width and height are the area of the screen
where you want the scrollView to be constrained within, i.e. the
viewPort of the scrollView.  Setting the width to contentWidth * 2 makes
no sense since since you can’t see an area that big.  Setting the
height to 2000 is the same issue if your contentHeight is < 2000 then
there is no scrolling.   The scrollWidth and scrollHeight is the
maximum area that can be scrolled.   If the scrollWidth is less that
width or scrollHeight  is less than  height then there isn’t anything to
scroll.   I would expect that you would almost always have scrollWidth
and scrollHeight greater than width and height.   The exception is if
you are only scrolling in one direction, in which case the direction
that’s not scrolling would be the same.  In this case you have
horizontalScrolling disabled, so it’s pointless to make scrollWidth
greater than width.

The code above worked the way I expect it too once I made the width and height something that fits in the content area.

Rob

#17

Did you have a chance to try the experiment I suggested using the CL Sample ScrollView with Lorem Ipsum text in it?

If you set scrollWidth to be contentWidth * 2 and the display.newText width to be also contentWidth * 2 you would expect this to nicely show 1/2 of the text on the initial screen and then allow you to scroll horizontally to see the rest right? What you see looks like the attached image. Definitely something wrong here but I don’t know if its a bug or our lack of understanding of these parameters.

Kindly help us understand if latter is the case. Thanks much!!!  

#18

Kerem can you post your sample code and I’ll take a look.

Rob

#19

Sure. Here it is. It is the CL ScrollView sample so I just played with the scrollWidth and the width of display.newText for the long text. This makes a good platform to investigare the scrollWidth impact vis a vis content width. Thanks for your attention. 

-- -- Abstract: Scroll View sample app -- -- Version: 2.0 -- -- Sample code is MIT licensed, see http://www.coronalabs.com/links/code/license -- Copyright (C) 2010 Corona Labs Inc. All Rights Reserved. -- -- Demonstrates how to make text and graphics move up and down on touch, -- or scroll, using the widget libraries scrollView methods. -- -- Supports Graphics 2.0 ------------------------------------------------------------ display.setStatusBar( display.HiddenStatusBar ) local widget = require( "widget" ) -- Our ScrollView listener local function scrollListener( event ) local phase = event.phase local direction = event.direction if "began" == phase then --print( "Began" ) elseif "moved" == phase then --print( "Moved" ) elseif "ended" == phase then --print( "Ended" ) end -- If the scrollView has reached it's scroll limit if event.limitReached then if "up" == direction then print( "Reached Top Limit" ) elseif "down" == direction then print( "Reached Bottom Limit" ) elseif "left" == direction then print( "Reached Left Limit" ) elseif "right" == direction then print( "Reached Right Limit" ) end end return true end -- Create a ScrollView local scrollView = widget.newScrollView { left = 0, top = 0, width = display.contentWidth, height = display.contentHeight, scrollWidth = display.contentWidth \* 2, bottomPadding = 50, id = "onBottom", horizontalScrollDisabled = false, verticalScrollDisabled = false, listener = scrollListener, } --Create a text object for the scrollViews title local titleText = display.newText("Move Up to Scroll", display.contentCenterX, 48, native.systemFontBold, 16) titleText:setFillColor( 0 ) -- insert the text object into the created display group scrollView:insert( titleText ) --Create a large text string local lotsOfText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet consectetur euismod. Phasellus non ipsum vel eros vestibulum consequat. Integer convallis quam id urna tristique eu viverra risus eleifend.\n\nAenean suscipit placerat venenatis. Pellentesque faucibus venenatis eleifend. Nam lorem felis, rhoncus vel rutrum quis, tincidunt in sapien. Proin eu elit tortor. Nam ut mauris pellentesque justo vulputate convallis eu vitae metus. Praesent mauris eros, hendrerit ac convallis vel, cursus quis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, dui in vehicula dapibus, lorem nisi placerat turpis, quis gravida elit lectus eget nibh. Mauris molestie auctor facilisis.\n\nCurabitur lorem mi, molestie eget tincidunt quis, blandit a libero. Cras a lorem sed purus gravida rhoncus. Cras vel risus dolor, at accumsan nisi. Morbi sit amet sem purus, ut tempor mauris.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet consectetur euismod. Phasellus non ipsum vel eros vestibulum consequat. Integer convallis quam id urna tristique eu viverra risus eleifend.\n\nAenean suscipit placerat venenatis. Pellentesque faucibus venenatis eleifend. Nam lorem felis, rhoncus vel rutrum quis, tincidunt in sapien. Proin eu elit tortor. Nam ut mauris pellentesque justo vulputate convallis eu vitae metus. Praesent mauris eros, hendrerit ac convallis vel, cursus quis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, dui in vehicula dapibus, lorem nisi placerat turpis, quis gravida elit lectus eget nibh. Mauris molestie auctor facilisis.\n\nCurabitur lorem mi, molestie eget tincidunt quis, blandit a libero. Cras a lorem sed purus gravida rhoncus. Cras vel risus dolor, at accumsan nisi. Morbi sit amet sem purus, ut tempor mauris. " --Create a text object containing the large text string and insert it into the scrollView local lotsOfTextObject = display.newText( lotsOfText, display.contentCenterX, 0, display.contentWidth \* 2, 0, "Helvetica", 14) lotsOfTextObject:setFillColor( 0 ) lotsOfTextObject.anchorY = 0.0 -- Top --------------------------------lotsOfTextObject:setReferencePoint( display.TopCenterReferencePoint ) lotsOfTextObject.y = titleText.y + titleText.contentHeight + 10 scrollView:insert( lotsOfTextObject )
#20

Hi Rob, 

Any chance to try this out? Thanks for your efforts. 

Regards,

Kerem