Ensure content is scrollable.

Please have a look at TMS Web Project
How do I ensure that each tab page shows the whole content are at least shows the scrollbars to access all the content.

I have tried various ways on the form itself the webPagecontrol webResponsiveGrid etc etc.

One approach. On each page, you can first add a TWebScrollbox, and then add the content of the page to the TWebScrollbox. Then if the content doesn't fit within the page dimensions, the TWebScrollbox will provide the scrollbars.

Hi Thanks Andrew.

That gives me scollbars within each pagecontrol but I still have scrollbars on the main form. I have the vertical & horizontal scrollbars visibility to false. I have to scroll the main page to view the content correctly

PS what is the difference with WebContinuousScroll I can't find any docs on this.

That can be a bit more tricky. The overall layout of a page isn't necessarily an easy thing to describe, and there are many different approaches to addressing whatever issues come up. Without knowing more about what you're trying to do, it is difficult to help. It is also a bit difficult when using a TWebPageControl as this kind of assumes that you have a somewhat bounded size in mind for that control within the context of the larger page that it lives in.

Some things to consider.

  • If everything is looking good but you're just trying to get rid of annoying scrollbars, you can try adding the CSS propertly "overflow:hidden" to whatever element is throwing up the scrollbars in the first place, with the caveat that you then won't be able to scroll that element. Which is what you want if you have what amounts to a full-screen panel that everything is drawn into.
  • You can be more specific with something like "overflow-y: auto; overflow-x: hidden;" if you just want to hide a horizontal scrollbar but still have a vertical scrollbar appear if needed.
  • Check that the "align" property of your TWebPageControl and the other elements on your page are set the way that you want. If the TWebPageControl is in a DIV that doesn't stretch to fill the page (or doesn't change with the size of the container, or... hopefully you get the idea) then you can have scrollbars appearing unexpectedly.

This is one of those things where it helps to fiddle a little bit. So create a small project with just the broad strokes of what you want the blocking of your page to work like, and once you've got that working, apply whatever you've done to your project. Then you can upload that small project if you're stuck and you can get help with that a lot more easily than an actual full project.

TWebContinuousScroll is something else entirely. You can read about it in the docs here, search for "TWebContinuousScroll": http://www.tmssoftware.biz/download/manuals/TMSWEBCoreDevGuide.pdf

I've not used it myself, but not likely going to be of much help for your current situation.

When I test this here, I see scrollbars for the 3 pages of the WebPageControl?
So, I'm unsure what you see as wrong?

Really struggling on this for hours now.
https://rockstruck.com/rocksTruck.html

When run on Iphone / Ipad ( rocks Story Tab ) I can see the first 5 videos thumbnails ( there are 7 )
When run on Android phone ( rocks Story Tab ) I can see the first 6.5 videos thumbnails ( there are 7 )

When run on Iphone / Ipad ( Job Enquiry Tab ) I can see all the edits and submit button no scrolling If I switch to landscape the bottom is cut off. ( ie the responsive grid panel doesn't expand)

When run on Android Phone ( Job Enquiry Tab ) The bottom is cut off.

I have attached a simple project with the components needed. I have tried hundreds of combinations of align/height/absolute. I cannot get the WebResponsiveGrid2 to show scrollbars.

Can anyone work their wonders please.

Project7.zip (8.0 KB)

When I set WebScrollBox.Align = alClient, then I see the vertical scrollbar on this TWebScrollBox appear.

I have managed to get the scolling working. I had to add a panel under the edits and another few media players to ensure the scrolling worked. www.rockstruck.com

Can anyone upload a simple project with
form
scrollbar
responsivePanel including some buttons.

Showing the correct settings so the responsivePanel scrolls the buttons so I can see what the correct settings are for align/Anchors etc.

scrollIssue.zip (76.0 KB)

Please see attached project. When run on win 10 Chrome If I reduce the height the scrollbarr does not kick in till it comes up to button2.

What am I doing wrong here please.

PS the noScroll css didn't help

Your pagecontrol height style is set to ssPercent which doesn't make sense if on the other side you use client alignment with margins. Setting this to ssAbsolute solves the scroll problem here.

Hi Bruno. I am still not understanding this.

If I set the pagecontrol to ssAbsolute the pageControl doesn't expand to fill the form.
I need the WebPageControl & WebScrollBox to expand to fill the form. When I reduce the height of the form to less than the WebPageControl I need the scrollbars to appear.

What are the correct settings for Form - WebPageControl - WebScrollBox to achieve this.

Here is your fixed project.
Project7.zip (75.2 KB)

Thanks Bruno.

I still couldn't get my app working correctly even by copying the the content from your app to mine. So I copied my app content to yours. It is now getting there. www.rockstruck.com. Layout is getting nicer and the tab switching is fine.

Thanks for the help.