Start Building Professional
Web Apps Today

dhx_folders_area css

Hi, I have a question about setting the dhxFolder overflow property

I am currently testing with 2 pages I have on the website which, both pages uses dhxFolder (one with older version and one with newest version of dhxfolder integrated from dhxlayout), In the one with newer version, I am trying to have the folder display area being able to scroll and the older one should NOT be able to scroll. I tried changing the css class for .dhx_folders_area but the same class gets applied to both case making them either both scrollable, or both unscrollable.

I tried modifying different types but that only seems to get applied to xml data format and each ITEM displayed on the page.
I couldn't find a way to access the style for div dhx_folders_area, is there a way to explicitly access the dhx_folders_area style from dhxFolder object?

Thanks in advance

PS: I tried doing a dhxFolder.firstChild.style but this apparently is not supported

>>I tried doing a dhxFolder.firstChild.style but
It can be accessed as 
    dhxFolder.cont.style

>> I tried changing the css class for .dhx_folders_area but the same class gets applied to both case making them either both scrollable, or both unscrollable.
You can use css  rules to define different styles for different areas

If you have 

var f1 = new dhtmlxFolders("area1")
var f2 = new dhtmlxFolders("area2")

You can define css styles as
<style>|
#area1.dhx_folders_area{
    //styles for first area
}
#area2.dhx_folders_area{
    //styles for second area
}
</style>

Hi, Thank you for the quick response.

I tried the first solution: dhxFolder.cont.style = 'width:100%;overflow:auto;position:relative;'; (please correct me if this not the right way to specify style)

but I got an error from internet browser (IE7): Member not found. (dhxFolder is already initialized by the way)

And as for the second solution, I am actually attaching a dhxFolder object to a section of the dhxLayout component, so I don't know how I can implement the solution posted into my code, as the layout is not specified by id, making it impossible to modify css file to apply to the dhxFolder object.

Any solution?

PS: when I destroy the content of the dhxFolder object from a section of dhxlayout and afterward, attach a new folder object to the same section: the following are my code for it, is there better way to do it?

dhxFolder.clearAll(true);

dhxLayout_folderSection.cells("b").window._content.childNodes[2].innerHTML = '';

dhxFolder = dhxLayout_folderSection.cells("b").attachFolders();

>>dhxFolder.cont.style = 'width:100%;overflow:auto;position:relative;'; 
If you want to set few styles at once, correct style will be 
       dhxFolder.cont.style.cssText += 'width:100%;overflow:auto;position:relative;'; 

>>when I destroy the content of the dhxFolder object from a section of dhxlayout
The code is correct, but if you need to reload Folder with new data , you need not to recreate component, you can call clearAll and after that loadXML with new data. 
Full component recreating has sense when you changing component type ( creating grid on place of folders for example ) 

Hello Again

I tried using the code below this time:

dhxFolder.cont.style.cssText += 'width:100%;overflow:auto;position:relative;';

or

dhxFolder.cont.style.cssText = 'width:100%;overflow:auto;position:relative;';

but I don't see any change in the folder container part (I have set the top css for dhx_folders_area as none scrollable (overflow:hidden), and set in the above code explicitly as scrollable (overflow:auto), but this does not get applied?)

Also, my other question still have not been answered:

I am attaching a dhxFolder object to dhxLayout component, the layout section is not specified by id, so I can't use the code below

var f1 = new dhtmlxFolders("area1")
var f2 = new dhtmlxFolders("area2")

You can define css styles as
<style>|
#area1.dhx_folders_area{
    //styles for first area
}
#area2.dhx_folders_area{
    //styles for second area
}
</style>

my most top css for dhx_folders_area is set to none scrollable (overflow:hidden), but in some page using different component such as dhxgrid or dhxfolder, I want it to be scrollable (overflow:auto), how do I override the existing style for the dhx_folders_area when I initiate new object in dhxlayout, or is this possible?

 

Thanks in advance

>>I tried using the code below this time:
Working sample sent by email. 


>>I am attaching a dhxFolder object to dhxLayout component
In case of dhtmlxLayout - it can't be done in such way. Solution will work only for standalone initialization.