Blank Space in Bottom of Scrollview

[fevid]

I’ve made an Scrollview to view my Image in a Scene but it adds a blank white space after the image finishes in bottom

donr know what is the problem cause my image size and scrollWidth and Height are the same amount

local composer = require( "composer" ) local scene = composer.newScene() local back; local fallen; function scene:create( event ) local sceneGroup = self.view -- Code here runs when the scene is first created but has not yet appeared on screen local background = display.newRect(0,0,\_W,\_H); background:setFillColor(0,0,0); fallen = display.newImageRect("images/whatyou.png",\_W,\_W\*8); fallen.x = \_W\*0.5; fallen.y = \_W\*4; local widget = require( "widget" ) local scrollView = widget.newScrollView({ width = \_W, height = \_H, scrollWidth = \_W; scrollHeight = \_W\*8; horizontalScrollDisabled = true, verticalScrollDisabled = false, isBounceEnabled = false }) sceneGroup:insert(background); sceneGroup:insert(fallen); scrollView:insert(fallen); local function onKeyEvent( event ) -- If the "back" key was pressed on Android or Windows Phone, prevent it from backing out of the app if ( event.keyName == "back" ) then local platformName = system.getInfo( "platformName" ) if ( platformName == "Android" ) or ( platformName == "WinPhone" ) then composer.gotoScene("a-evanescence", { effect = "slideLeft", time = 250 }); return true end end -- IMPORTANT! Return false to indicate that this app is NOT overriding the received key -- This lets the operating system execute its default handling of the key return false end -- Add the key event listener Runtime:addEventListener( "key", onKeyEvent ) end -- show() function scene:show( event ) local sceneGroup = self.view local phase = event.phase if ( phase == "will" ) then -- Code here runs when the scene is still off screen (but is about to come on screen) elseif ( phase == "did" ) then -- Code here runs when the scene is entirely on screen end end -- hide() function scene:hide( event ) local sceneGroup = self.view local phase = event.phase if ( phase == "will" ) then -- Code here runs when the scene is on screen (but is about to go off screen) elseif ( phase == "did" ) then -- Code here runs immediately after the scene goes entirely off screen end end -- destroy() function scene:destroy( event ) local sceneGroup = self.view -- Code here runs prior to the removal of scene's view composer.removeScene("m-breath"); end -- ----------------------------------------------------------------------------------- -- Scene event function listeners -- ----------------------------------------------------------------------------------- scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) -- ----------------------------------------------------------------------------------- return scene

[ldurniat]

I don’t see black bar at bottom of screen. I use code below

local composer = require( "composer" ) local widget = require( "widget" ) local scene = composer.newScene() local back; local fallen; local \_W = display.contentWidth local \_H = display.contentHeight function scene:create( event )     local sceneGroup = self.view     -- Code here runs when the scene is first created but has not yet appeared on screen       local background = display.newRect(0,0,\_W,\_H);     background:setFillColor(0,0.2,0);     fallen = display.newRect(0,0,\_W,\_W\*8);     fallen:setFillColor(0,0.2,0.3);     fallen.x = \_W\*0.5;     fallen.y = \_W\*4;          local scrollView = widget.newScrollView({         width = \_W,         height = \_H,         scrollWidth = \_W, -- you use ; instead of ,         scrollHeight = \_W\*8, -- you use ; instead of ,         horizontalScrollDisabled = true,         verticalScrollDisabled = false,         isBounceEnabled = false         })     sceneGroup:insert(background);     --sceneGroup:insert(fallen);     scrollView:insert(fallen);     sceneGroup:insert(scrollView);         local function onKeyEvent( event )               -- If the "back" key was pressed on Android or Windows Phone, prevent it from backing out of the app         if ( event.keyName == "back" ) then             local platformName = system.getInfo( "platformName" )             if ( platformName == "Android" ) or ( platformName == "WinPhone" ) then                 composer.gotoScene("a-evanescence", {                 effect = "slideLeft",                 time = 250                 });                 return true             end         end               -- IMPORTANT! Return false to indicate that this app is NOT overriding the received key         -- This lets the operating system execute its default handling of the key         return false     end           -- Add the key event listener     Runtime:addEventListener( "key", onKeyEvent ) end -- show() function scene:show( event )     local sceneGroup = self.view     local phase = event.phase     if ( phase == "will" ) then         -- Code here runs when the scene is still off screen (but is about to come on screen)     elseif ( phase == "did" ) then         -- Code here runs when the scene is entirely on screen     end end -- hide() function scene:hide( event )     local sceneGroup = self.view     local phase = event.phase     if ( phase == "will" ) then         -- Code here runs when the scene is on screen (but is about to go off screen)     elseif ( phase == "did" ) then         -- Code here runs immediately after the scene goes entirely off screen     end end -- destroy() function scene:destroy( event )     local sceneGroup = self.view     -- Code here runs prior to the removal of scene's view     composer.removeScene("m-breath"); end -- ----------------------------------------------------------------------------------- -- Scene event function listeners -- ----------------------------------------------------------------------------------- scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) -- ----------------------------------------------------------------------------------- return scene

I see black bars at bottom in my code (above) because I use letterbox mode. My confg.lua I use to test your program

application = {     content = {         width = 320,         height = 480,          scale = "letterbox",         fps = 30,     },      imageSuffix = {          ["@2x"] = 1.5,          ["@4x"] = 3.0,     }, }

[fevid]

@ldurniat

I don’t see black bar at bottom of screen. I use code below

local composer = require( "composer" ) local widget = require( "widget" ) local scene = composer.newScene() local back; local fallen; local \_W = display.contentWidth local \_H = display.contentHeight function scene:create( event )     local sceneGroup = self.view     -- Code here runs when the scene is first created but has not yet appeared on screen       local background = display.newRect(0,0,\_W,\_H);     background:setFillColor(0,0.2,0);     fallen = display.newRect(0,0,\_W,\_W\*8);     fallen:setFillColor(0,0.2,0.3);     fallen.x = \_W\*0.5;     fallen.y = \_W\*4;          local scrollView = widget.newScrollView({         width = \_W,         height = \_H,         scrollWidth = \_W, -- you use ; instead of ,         scrollHeight = \_W\*8, -- you use ; instead of ,         horizontalScrollDisabled = true,         verticalScrollDisabled = false,         isBounceEnabled = false         })     sceneGroup:insert(background);     --sceneGroup:insert(fallen);     scrollView:insert(fallen);     sceneGroup:insert(scrollView);         local function onKeyEvent( event )               -- If the "back" key was pressed on Android or Windows Phone, prevent it from backing out of the app         if ( event.keyName == "back" ) then             local platformName = system.getInfo( "platformName" )             if ( platformName == "Android" ) or ( platformName == "WinPhone" ) then                 composer.gotoScene("a-evanescence", {                 effect = "slideLeft",                 time = 250                 });                 return true             end         end               -- IMPORTANT! Return false to indicate that this app is NOT overriding the received key         -- This lets the operating system execute its default handling of the key         return false     end           -- Add the key event listener     Runtime:addEventListener( "key", onKeyEvent ) end -- show() function scene:show( event )     local sceneGroup = self.view     local phase = event.phase     if ( phase == "will" ) then         -- Code here runs when the scene is still off screen (but is about to come on screen)     elseif ( phase == "did" ) then         -- Code here runs when the scene is entirely on screen     end end -- hide() function scene:hide( event )     local sceneGroup = self.view     local phase = event.phase     if ( phase == "will" ) then         -- Code here runs when the scene is on screen (but is about to go off screen)     elseif ( phase == "did" ) then         -- Code here runs immediately after the scene goes entirely off screen     end end -- destroy() function scene:destroy( event )     local sceneGroup = self.view     -- Code here runs prior to the removal of scene's view     composer.removeScene("m-breath"); end -- ----------------------------------------------------------------------------------- -- Scene event function listeners -- ----------------------------------------------------------------------------------- scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) -- ----------------------------------------------------------------------------------- return scene

I see black bars at bottom in my code (above) because I use letterbox mode. My confg.lua I use to test your program

application = {     content = {         width = 320,         height = 480,          scale = "letterbox",         fps = 30,     },      imageSuffix = {          ["@2x"] = 1.5,          ["@4x"] = 3.0,     }, }

Tanx for Respond,

I Corrected every problem you mentioned in my code but nothing changed, its same scene with same amount of blank space at buttom

[ldurniat]

Your problem can be related with content scaling in Corona. In letterbox mode you can see black bars depend on device resolution.  You mentioned white bars so I’m not sure that is your case. That is why I write down my config file in previous post.

 English is not my native language

Maybe try use config.lua from here

--calculate the aspect ratio of the device local aspectRatio = display.pixelHeight / display.pixelWidth application = {    content = {       width = aspectRatio > 1.5 and 800 or math.floor( 1200 / aspectRatio ),       height = aspectRatio < 1.5 and 1200 or math.floor( 800 \* aspectRatio ),       scale = "letterBox",       fps = 30,       imageSuffix = {          ["@2x"] = 1.3,       },    },}

[bjsorrentino]

Hi @fevid,

Try omitting both “scrollWidth” and “scrollHeight” from your ScrollView setup. These will be updated automatically when you insert the image into the ScrollView.

Take care,

Brent

[fevid]

@bjsorrentino

Hi @fevid,

Try omitting both “scrollWidth” and “scrollHeight” from your ScrollView setup. These will be updated automatically when you insert the image into the ScrollView.

Take care,

Brent

I removed them but still same

[fevid]

@ldurniat

Your problem can be related with content scaling in Corona. In letterbox mode you can see black bars depend on device resolution.  You mentioned white bars so I’m not sure that is your case. That is why I write down my config file in previous post.

 English is not my native language

Maybe try use config.lua from here

--calculate the aspect ratio of the device local aspectRatio = display.pixelHeight / display.pixelWidth application = {    content = {       width = aspectRatio > 1.5 and 800 or math.floor( 1200 / aspectRatio ),       height = aspectRatio < 1.5 and 1200 or math.floor( 800 \* aspectRatio ),       scale = "letterBox",       fps = 30,       imageSuffix = {          ["@2x"] = 1.3,       },    },}

My config.lua

application = { content = { graphicsCompatibility = 1, width = 320, height = 480, scale = "letterbox", fps = 60, --[[imageSuffix = { ["@2x"] = 2, ["@4x"] = 4, }, --]] }, }

[bjsorrentino]

Hi @fevid,

For testing, let’s try eliminating various variables like _W and _H and just use real numbers. Try this in your code:

[lua]

local fallen = display.newImageRect( “images/whatyou.png”, 280, 400 );

local scrollView = widget.newScrollView({

    x = 160,

    y = 240,

    width = 280,

    height = 400,

    scrollWidth = 280,

    scrollHeight = 400,

    horizontalScrollDisabled = true,

    isBounceEnabled = false

})

sceneGroup:insert(scrollView);

scrollView:insert( fallen );

[/lua]

Brent

P.S. - Your “config.lua” looks fine, except you can remove the “graphicsCompatibility” line. That is no longer supported.

[fevid]

@bjsorrentino

Hi @fevid,

For testing, let’s try eliminating various variables like _W and _H and just use real numbers. Try this in your code:

[lua]

local fallen = display.newImageRect( “images/whatyou.png”, 280, 400 );

local scrollView = widget.newScrollView({

    x = 160,

    y = 240,

    width = 280,

    height = 400,

    scrollWidth = 280,

    scrollHeight = 400,

    horizontalScrollDisabled = true,

    isBounceEnabled = false

})

sceneGroup:insert(scrollView);

scrollView:insert( fallen );

[/lua]

Brent

P.S. - Your “config.lua” looks fine, except you can remove the “graphicsCompatibility” line. That is no longer supported.

It didnt work, still the blank white space remains

[nick_sherman]

Have you tried setting the background color of the scrollView to (0,0,0,0) ?

[fevid]

@nick\_sherman

Have you tried setting the background color of the scrollView to (0,0,0,0) ?

Yes, Same Result

[ldurniat]

I don’t see black bar at bottom of screen. I use code below

local composer = require( "composer" ) local widget = require( "widget" ) local scene = composer.newScene() local back; local fallen; local \_W = display.contentWidth local \_H = display.contentHeight function scene:create( event )     local sceneGroup = self.view     -- Code here runs when the scene is first created but has not yet appeared on screen       local background = display.newRect(0,0,\_W,\_H);     background:setFillColor(0,0.2,0);     fallen = display.newRect(0,0,\_W,\_W\*8);     fallen:setFillColor(0,0.2,0.3);     fallen.x = \_W\*0.5;     fallen.y = \_W\*4;          local scrollView = widget.newScrollView({         width = \_W,         height = \_H,         scrollWidth = \_W, -- you use ; instead of ,         scrollHeight = \_W\*8, -- you use ; instead of ,         horizontalScrollDisabled = true,         verticalScrollDisabled = false,         isBounceEnabled = false         })     sceneGroup:insert(background);     --sceneGroup:insert(fallen);     scrollView:insert(fallen);     sceneGroup:insert(scrollView);         local function onKeyEvent( event )               -- If the "back" key was pressed on Android or Windows Phone, prevent it from backing out of the app         if ( event.keyName == "back" ) then             local platformName = system.getInfo( "platformName" )             if ( platformName == "Android" ) or ( platformName == "WinPhone" ) then                 composer.gotoScene("a-evanescence", {                 effect = "slideLeft",                 time = 250                 });                 return true             end         end               -- IMPORTANT! Return false to indicate that this app is NOT overriding the received key         -- This lets the operating system execute its default handling of the key         return false     end           -- Add the key event listener     Runtime:addEventListener( "key", onKeyEvent ) end -- show() function scene:show( event )     local sceneGroup = self.view     local phase = event.phase     if ( phase == "will" ) then         -- Code here runs when the scene is still off screen (but is about to come on screen)     elseif ( phase == "did" ) then         -- Code here runs when the scene is entirely on screen     end end -- hide() function scene:hide( event )     local sceneGroup = self.view     local phase = event.phase     if ( phase == "will" ) then         -- Code here runs when the scene is on screen (but is about to go off screen)     elseif ( phase == "did" ) then         -- Code here runs immediately after the scene goes entirely off screen     end end -- destroy() function scene:destroy( event )     local sceneGroup = self.view     -- Code here runs prior to the removal of scene's view     composer.removeScene("m-breath"); end -- ----------------------------------------------------------------------------------- -- Scene event function listeners -- ----------------------------------------------------------------------------------- scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) -- ----------------------------------------------------------------------------------- return scene

I see black bars at bottom in my code (above) because I use letterbox mode. My confg.lua I use to test your program

application = {     content = {         width = 320,         height = 480,          scale = "letterbox",         fps = 30,     },      imageSuffix = {          ["@2x"] = 1.5,          ["@4x"] = 3.0,     }, }

[fevid]

@ldurniat

I don’t see black bar at bottom of screen. I use code below

local composer = require( "composer" ) local widget = require( "widget" ) local scene = composer.newScene() local back; local fallen; local \_W = display.contentWidth local \_H = display.contentHeight function scene:create( event )     local sceneGroup = self.view     -- Code here runs when the scene is first created but has not yet appeared on screen       local background = display.newRect(0,0,\_W,\_H);     background:setFillColor(0,0.2,0);     fallen = display.newRect(0,0,\_W,\_W\*8);     fallen:setFillColor(0,0.2,0.3);     fallen.x = \_W\*0.5;     fallen.y = \_W\*4;          local scrollView = widget.newScrollView({         width = \_W,         height = \_H,         scrollWidth = \_W, -- you use ; instead of ,         scrollHeight = \_W\*8, -- you use ; instead of ,         horizontalScrollDisabled = true,         verticalScrollDisabled = false,         isBounceEnabled = false         })     sceneGroup:insert(background);     --sceneGroup:insert(fallen);     scrollView:insert(fallen);     sceneGroup:insert(scrollView);         local function onKeyEvent( event )               -- If the "back" key was pressed on Android or Windows Phone, prevent it from backing out of the app         if ( event.keyName == "back" ) then             local platformName = system.getInfo( "platformName" )             if ( platformName == "Android" ) or ( platformName == "WinPhone" ) then                 composer.gotoScene("a-evanescence", {                 effect = "slideLeft",                 time = 250                 });                 return true             end         end               -- IMPORTANT! Return false to indicate that this app is NOT overriding the received key         -- This lets the operating system execute its default handling of the key         return false     end           -- Add the key event listener     Runtime:addEventListener( "key", onKeyEvent ) end -- show() function scene:show( event )     local sceneGroup = self.view     local phase = event.phase     if ( phase == "will" ) then         -- Code here runs when the scene is still off screen (but is about to come on screen)     elseif ( phase == "did" ) then         -- Code here runs when the scene is entirely on screen     end end -- hide() function scene:hide( event )     local sceneGroup = self.view     local phase = event.phase     if ( phase == "will" ) then         -- Code here runs when the scene is on screen (but is about to go off screen)     elseif ( phase == "did" ) then         -- Code here runs immediately after the scene goes entirely off screen     end end -- destroy() function scene:destroy( event )     local sceneGroup = self.view     -- Code here runs prior to the removal of scene's view     composer.removeScene("m-breath"); end -- ----------------------------------------------------------------------------------- -- Scene event function listeners -- ----------------------------------------------------------------------------------- scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) -- ----------------------------------------------------------------------------------- return scene

I see black bars at bottom in my code (above) because I use letterbox mode. My confg.lua I use to test your program

application = {     content = {         width = 320,         height = 480,          scale = "letterbox",         fps = 30,     },      imageSuffix = {          ["@2x"] = 1.5,          ["@4x"] = 3.0,     }, }

Tanx for Respond,

I Corrected every problem you mentioned in my code but nothing changed, its same scene with same amount of blank space at buttom

[ldurniat]

Your problem can be related with content scaling in Corona. In letterbox mode you can see black bars depend on device resolution.  You mentioned white bars so I’m not sure that is your case. That is why I write down my config file in previous post.

 English is not my native language

Maybe try use config.lua from here

--calculate the aspect ratio of the device local aspectRatio = display.pixelHeight / display.pixelWidth application = {    content = {       width = aspectRatio > 1.5 and 800 or math.floor( 1200 / aspectRatio ),       height = aspectRatio < 1.5 and 1200 or math.floor( 800 \* aspectRatio ),       scale = "letterBox",       fps = 30,       imageSuffix = {          ["@2x"] = 1.3,       },    },}

[bjsorrentino]

Hi @fevid,

Try omitting both “scrollWidth” and “scrollHeight” from your ScrollView setup. These will be updated automatically when you insert the image into the ScrollView.

Take care,

Brent

[fevid]

@bjsorrentino

Hi @fevid,

Try omitting both “scrollWidth” and “scrollHeight” from your ScrollView setup. These will be updated automatically when you insert the image into the ScrollView.

Take care,

Brent

I removed them but still same

[fevid]

@ldurniat

Your problem can be related with content scaling in Corona. In letterbox mode you can see black bars depend on device resolution.  You mentioned white bars so I’m not sure that is your case. That is why I write down my config file in previous post.

 English is not my native language

Maybe try use config.lua from here

--calculate the aspect ratio of the device local aspectRatio = display.pixelHeight / display.pixelWidth application = {    content = {       width = aspectRatio > 1.5 and 800 or math.floor( 1200 / aspectRatio ),       height = aspectRatio < 1.5 and 1200 or math.floor( 800 \* aspectRatio ),       scale = "letterBox",       fps = 30,       imageSuffix = {          ["@2x"] = 1.3,       },    },}

My config.lua

application = { content = { graphicsCompatibility = 1, width = 320, height = 480, scale = "letterbox", fps = 60, --[[imageSuffix = { ["@2x"] = 2, ["@4x"] = 4, }, --]] }, }

[bjsorrentino]

Hi @fevid,

For testing, let’s try eliminating various variables like _W and _H and just use real numbers. Try this in your code:

[lua]

local fallen = display.newImageRect( “images/whatyou.png”, 280, 400 );

local scrollView = widget.newScrollView({

    x = 160,

    y = 240,

    width = 280,

    height = 400,

    scrollWidth = 280,

    scrollHeight = 400,

    horizontalScrollDisabled = true,

    isBounceEnabled = false

})

sceneGroup:insert(scrollView);

scrollView:insert( fallen );

[/lua]

Brent

P.S. - Your “config.lua” looks fine, except you can remove the “graphicsCompatibility” line. That is no longer supported.

[fevid]

@bjsorrentino

Hi @fevid,

For testing, let’s try eliminating various variables like _W and _H and just use real numbers. Try this in your code:

[lua]

local fallen = display.newImageRect( “images/whatyou.png”, 280, 400 );

local scrollView = widget.newScrollView({

    x = 160,

    y = 240,

    width = 280,

    height = 400,

    scrollWidth = 280,

    scrollHeight = 400,

    horizontalScrollDisabled = true,

    isBounceEnabled = false

})

sceneGroup:insert(scrollView);

scrollView:insert( fallen );

[/lua]

Brent

P.S. - Your “config.lua” looks fine, except you can remove the “graphicsCompatibility” line. That is no longer supported.

It didnt work, still the blank white space remains

[nick_sherman]

Have you tried setting the background color of the scrollView to (0,0,0,0) ?