custom scrollbar

[Point]

hello,

I tried to customize the scrollbar base on this site : https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
but the scrollbar's width doesn't seem to change so the panel doesn't fully cover.

any suggestion

Thank you in advance.

testcase.7z

[Sherzod]

41 minutes ago, Popo said:

testcase.7z 5.17 kB · 0 downloads

Hello,

Are you sure you have attached the correct test case?

[Point]

1 hour ago, Sherzod said:

Hello,

Are you sure you have attached the correct test case?

yes.

i downloaded that file and contain the test case project.

Is the test case project work well on there ?. in here the unicontainerpanels not fully cover even though in the layout config, have set 100%.

[Point]

2 hours ago, Popo said:

hello,

I tried to customize the scrollbar base on this site : https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
but the scrollbar's width doesn't seem to change so the panel doesn't fully cover.

any suggestion

Thank you in advance.

testcase.7z 5.17 kB · 2 downloads

hi sherzod,

I mean there is a space between unicontainerpanel and scrollbar. so the unicontainerpanels not fully cover the form/screen.

thanks you.

[Sherzod]

34 minutes ago, Popo said:

i downloaded that file and contain the test case project.

Ok, sorry. Yes.

[Sherzod]

I will try to analyze.

[Sherzod]

36 minutes ago, Popo said:

I mean there is a space between unicontainerpanel and scrollbar. so the unicontainerpanels not fully cover the form/screen.

Sorry for clarification, could you indicate the problematic point in the screeshot?

[Point]

Here it is

[Sherzod]

6 minutes ago, Popo said:

Here it is

OK. What browser are you testing on?

[Point]

3 hours ago, Sherzod said:

OK. What browser are you testing on?

chrome, edge and firefox. in firefox the css not work as described in the link.

[Sherzod]

15 minutes ago, Popo said:

chrome, edge and firefox. in firefox the css not work as described in the link.

Okay. There is a workaround for your case, but there is a blink when the screen is resized. I will try to analyze.

[Sherzod]

10 hours ago, Popo said:

I mean there is a space between unicontainerpanel and scrollbar. so the unicontainerpanels not fully cover the form/screen.

Hello,

Can you try this approach?

UniContainerPanel2 -> ClientEvents -> ExtEvents ->

function resize(sender, width, height, oldWidth, oldHeight, eOpts) 
{
    sender.getEl().select('.x-box-inner').setStyle('width', null);
    sender.getRefItems().forEach(function(item) {
        item.setStyle('width', sender.getWidth() + 'px')
    });
}

 

[Point]

14 hours ago, Sherzod said:

Hello,

Can you try this approach?

UniContainerPanel2 -> ClientEvents -> ExtEvents ->

function resize(sender, width, height, oldWidth, oldHeight, eOpts) 
{
    sender.getEl().select('.x-box-inner').setStyle('width', null);
    sender.getRefItems().forEach(function(item) {
        item.setStyle('width', sender.getWidth() + 'px')
    });
}

 

hi sherzod,

that code not work if UniContainerPanel2 inside uniframe. 

i try to put on resize function in uniframe, but not work too. uniFrame -> ClientEvents -> ExtEvents

[Sherzod]

Hi, 

Testcase? 

[Point]

here the testcase

 

 

testcase.7z

[Sherzod]

4 hours ago, Popo said:

testcase.7z 7.62 kB · 0 downloads

Yes, I see the problem.

[Sherzod]

5 hours ago, Popo said:

testcase.7z 7.62 kB · 0 downloads

You can use a different solution I think.

https://idiotwu.github.io/smooth-scrollbar/

1. Download: https://raw.githubusercontent.com/idiotWu/smooth-scrollbar/900f2434f8b61237af52de3bf9f07c87c0638917/dist/smooth-scrollbar.js

2. CustomFiles:

files/smooth-scrollbar.js

3. CustomCSS:

Remove the classes you defined for scrolling.

4. UniFrame -> AutoScroll = False

5. UniFrame -> ClientEvents -> ExtEvents ->

function boxready(sender, width, height, eOpts)
{
    Scrollbar.init(document.querySelector('#'+  sender.id +'-innerCt'), {});
}

 

[Point]

work very well. many thanks

[GerhardV]

On 7/11/2021 at 5:26 PM, Sherzod said:

You can use a different solution I think.

https://idiotwu.github.io/smooth-scrollbar/

1. Download: https://raw.githubusercontent.com/idiotWu/smooth-scrollbar/900f2434f8b61237af52de3bf9f07c87c0638917/dist/smooth-scrollbar.js

2. CustomFiles:

files/smooth-scrollbar.js

3. CustomCSS:

Remove the classes you defined for scrolling.

4. UniFrame -> AutoScroll = False

5. UniFrame -> ClientEvents -> ExtEvents ->

function boxready(sender, width, height, eOpts)
{
    Scrollbar.init(document.querySelector('#'+  sender.id +'-innerCt'), {});
}

 

@Sherzod How will you tell this Scrollbar to scroll to the top in code?

[GerhardV]

Don't worry I have figured it out:

UniSession.JSCode('Scrollbar.get(document.getElementById("' + MainForm.pnlClientArea.JSId + '-innerCt")).scrollTo(0, 0);');

 

[artem_niko]

On 7/11/2021 at 10:26 PM, Sherzod said:

You can use a different solution I think.

https://idiotwu.github.io/smooth-scrollbar/

1. Download: https://raw.githubusercontent.com/idiotWu/smooth-scrollbar/900f2434f8b61237af52de3bf9f07c87c0638917/dist/smooth-scrollbar.js

2. CustomFiles:

files/smooth-scrollbar.js

3. CustomCSS:

Remove the classes you defined for scrolling.

4. UniFrame -> AutoScroll = False

5. UniFrame -> ClientEvents -> ExtEvents ->

function boxready(sender, width, height, eOpts)
{
    Scrollbar.init(document.querySelector('#'+  sender.id +'-innerCt'), {});
}

 

I'm getting error:

[Sherzod]

1 hour ago, artem_niko said:

2. CustomFiles:

files/smooth-scrollbar.js

Have you included? 

[artem_niko]

3 minutes ago, Sherzod said:

Включили ли вы?

Yes of course.

In UniServerModule.CustomFiles

Error showing when I opening my UniFrame.

[Sherzod]

Make a simple testcase, we will try to check. 

[leandroavila74]

On 7/11/2021 at 12:26 PM, Sherzod said:

You can use a different solution I think.

https://idiotwu.github.io/smooth-scrollbar/

1. Download: https://raw.githubusercontent.com/idiotWu/smooth-scrollbar/900f2434f8b61237af52de3bf9f07c87c0638917/dist/smooth-scrollbar.js

2. CustomFiles:

files/smooth-scrollbar.js

3. CustomCSS:

Remove the classes you defined for scrolling.

4. UniFrame -> AutoScroll = False

5. UniFrame -> ClientEvents -> ExtEvents ->

function boxready(sender, width, height, eOpts)
{
    Scrollbar.init(document.querySelector('#'+  sender.id +'-innerCt'), {});
}

 

 

out of curiosity, would I be able to use this styling in the unitreemenu?
I managed to make the auto scroll following the topic

 

works perfectly, but the scroll when it appears is outside the current theme

I'm using delphi 10.3.3
unigui version 1.90.0.1551