Scrollable static sidebar in portal home page

(0) Share

Report

Posted on by Narendra Sunkara

467

Hi all,

I am using PowerApps portals and need to add Scrollable static sidebar in portal home page with Static text

How can I do it.

Thanks in Advance

Babu

I have the same question (0)

All responses (9)

Answers (2)

cloflyMao 25,210 on at

Like (0)

Report

Hi Babu,

Do you mean a scrollable fixed sidebar in portal home page? And was this demo what you expect?

http://jsfiddle.net/tvysB/2/

If so, you just need to add an div element which its position attribute equals "fixed" in Home web template of portal to achieve your requirement.

Regards,

Clofly

Was this reply helpful? Yes No
Narendra Sunkara 467 on at

Like (0)

Report

Hi Clofly

Thanks for your response

Can you give me one example or steps in detail

And Where can I add the css code. I am pretty new to portals

I do have some content in the middle of the page.

I want to add some static content with scrollable in the right hand side of the portal page(Home page)

Regards,

Babu

Was this reply helpful? Yes No
Verified answer

cloflyMao 25,210 on at

Like (0)

Report
Hi Babu,

Here is my demo, please take it as reference:

1. My Portal is Customer Self-Service, so I add code in its Home web template source code.

2. As you see in screenshot, we can just add code at bottom position of original code, for both HTML element and css style tag.

My sidebar

Menu 1

Menu 2

Menu 3

Result:

If text exceeds the height of the div element, then the sidebar will be scrollbar due to attribute: overflow-y: auto.

Regards,

Clofly

Was this reply helpful? Yes No
Narendra Sunkara 467 on at

Like (0)

Report

Hi Clofly

Thanks for your time and response.

Now I can able to see my sidebar.

Now I am facing other problem. As I need to put 2 paragraphs of static content in side bar it is overlapping/hiding my actual content in the page.

How can I overcome this.

Regards,

Babu

Was this reply helpful? Yes No
cloflyMao 25,210 on at

Like (0)

Report

Hi Babu,

Could you share screenshot of the problem and source code to me for test? Thanks.

Regards,

Clofly

Was this reply helpful? Yes No
Narendra Sunkara 467 on at

Like (0)

Report

Thanks for your response.

I added all your code in my web template at the bottom.

Just added some extra text. Side bar moved left and overlapping on actual page content. Here is the screen shot.

Hope you can help me

Was this reply helpful? Yes No
Verified answer

cloflyMao 25,210 on at

Like (0)

Report

Hi Babu,

If there many characters in a line, you could fix overlapping by giving sidedar a fixed width.

Then extra text will wrap automatically, and a new scoll bar will appear for sidebar.

Regards,

Clofly

Was this reply helpful? Yes No
Narendra Sunkara 467 on at

Like (0)

Report

Hi Clofy

Thanks for your reply.

That fixed my problem.

Thanks alot

Regards,

Babu

Was this reply helpful? Yes No
cloflyMao 25,210 on at

Like (0)

Report

Hi Babu,

It's glad that your problem has been solved.

If you had found my answer helped, please kindly mark it as verified to close the thread, it would be really appreciated.

Regards,

Clofly

Was this reply helpful? Yes No