No scrollbar when a tree inside a tab is expanded

[LokoParticipant]

Hi
I face an issue when I put a tree inside a tab : when I expand the tree I can’t see its content because there is no scrollbar displayed in the tab body

see example here

How can I fix this please ?

Thank you
Arnaud

[MariyaParticipant]

Hi Arnaud,

Please take a look at the provided example at: http://jsfiddle.net/6vfhx080/
JqxTabs is working with other widgets and as you can see from the example the scrollbar is displayed properly.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[LokoParticipant]

Hi Mariya

So, It works with your example but not with mine. Can you please tell me why ?

[MariyaParticipant]

Hi Arnaud,

As you can see your code is not working and has no widgets initialized in it. Also your structure in the html part is invalid.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[LokoParticipant]

I don’t understand why you say it is not working (?). It works fine on my box on several browsers,
see this screenshot

But as you can see, there is not scrollbar in the tab so I can”t see the complete tree.

[MariyaParticipant]

Hi Arnaud,

Are you sure that the provided example for your first post is the one from the screenshot? The given one is not working at all.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[LokoParticipant]

Yes I am. But when I open it on an other box I get some errors, I don”t know why :
Blocage du chargement du contenu mixte actif (mixed active content) « http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css »
Blocage du chargement du contenu mixte actif (mixed active content) « http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css »
Blocage du chargement du contenu mixte actif (mixed active content) « http://jqwidgets.com/public/jqwidgets/jqx-all.js »
Blocage du chargement du contenu mixte actif (mixed active content) « http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css »
Blocage du chargement du contenu mixte actif (mixed active content) « http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css »
Blocage du chargement du contenu mixte actif (mixed active content) « http://jqwidgets.com/public/jqwidgets/jqx-all.js »

Looks like all the external sources are blocked. I’m not very used on JsFiddle by the way, but if you cut and paste the code in your own new jsfiddle I guess it’ll run correctly.

I tried with jsfiddle alternatives and I face the same issue too :
CodePen.Io

Tested on latests IE ,FX and Chrome

[MariyaParticipant]

Hi Arnaud,

You should use https. for your external links. As for the scrollbar, it may be caused because you don not initialized the jqxTree in the initTabContent.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[LokoParticipant]

Hi Mariya

I just created my jsFiddle by forking an example on your website, and this example does not uses https.
Anyway, I don’t understand what you mean by initlializing the tree in the initTabContent. Can you give me a code to do that please?

[MariyaParticipant]

Hi Arnaud,

The jqxTabs have a ‘initTabContent’ function, take a look at the provided example at : http://jsfiddle.net/jqwidgets/2nbr7/
Using this example, you can initialize jqxTree instead of the button from the example.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[LokoParticipant]

OK Mariya

So I use initTabContent in that new example, the tab content becomes somewhat scrollable with mousewheel, but the scrollbar is not shown properly and not really usable.

New JsFiddle

[LokoParticipant]

NB : with the new example, what I said about the scroolbar deals with Chrome. With Firefox there is no improvement : no scrollbar at all even with initTabContent

[MariyaParticipant]

Hi Arnaud,

The example you provided us is not made with ‘initTabContent’. However, here is a working solution: http://jsfiddle.net/jqwidgets/og8trwbw/

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[LokoParticipant]

It works because you added an fixed height parameter to the jqxTree. I don’t want to do that because I want to take benefit of all the avaliable screen height, and ‘100%’ does not seem to be accepted .
And if I remove this parameter I face the issue again.

It even does not work if you put a value higher than avalbale space, for instance height:500.

[MariyaParticipant]

Hi Arnaud,

As far as I can see you are setting height to the jqxTree in your example:

$('#div_pages_acces_tree').jqxTree({ 
    source: treeRecords, 
    width: '100%', 
    height:200});

The difference is that it is used initContent and height is set to different value.If you do not use height, there would not be scrollbar.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts