Unlimited Width of Container

Unlimited Width of Container

  

Hi guys,

I have an issue when trying to create an organization chart.

Does a container has limitation of its width?

In the pic above, the parent should have 8 children, but it ends up showing only 2 because no space left (the container can't be scrolled anymore).


The pic below is my widget tree:


And here is the CSS code for the OrgChart:

SyntaxEditor Code Snippet

/* Styles for the nodes content*/
.NodeContainer {
    font-size: 12px;
    vertical-align: middle;
    border-radius: 5px;
    border:1px solid #E0D7D5;
    -moz-border-radius: 5px;
    cursor: move;
    margin-top: -15px;
}  

.Entity {
    min-height: 34px;
    max-height: 34px;
    line-height: 34px;
    background-color: #2a8a8e;
    color: #FFF;
    margin: 2px;
    border-radius: 5px;   
    -moz-border-radius: 5px;
}

.Entity .a,
.Entity a:link,
.Entity a:visited {
    color: #FFF;
}

.DeptManager {
    margin-top: 0px;
    padding: 10px 0 0 0;
    font-size: 13px;
    font-weight: 500;
}

.QtySubsidiary {
   color: #C2C2C2;
   /*margin-top: 5px;
   margin-bottom: 10px;*/
}

.BottomOptions {
    background-color: #E0D7D5;
    padding: 5px;
    height: 30px;
}

.BottomOptions a:link{
    color: #969696;
    font-size: 15px;
}

.ToggleSubTreeIcon{
    background-color: #FFF;
    text-align: center;
    margin-top: 0px;
    border: 1px solid #E0D7D5;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 26px;
    margin: 0;
    margin-top: -15px;
    font-size: 16px;    
    color: #a30006;
}

.ToggleSubTreeIcon\:hover {
    background-color: #a30006;
    color: white;
}

/* Style the connectors between the nodes */
.jOrgChart .line {
  height: 20px;
  width: 2px;
  color: #E0D7D5;
}

.jOrgChart .down {
  background-color: #E0D7D5;    
  margin: 0px auto;
}

.jOrgChart .top {
  border-top: 2px solid #E0D7D5;
}

.jOrgChart .left {
  border-right: 1px solid #E0D7D5;
}

.jOrgChart .right {
  border-left: 1px solid #E0D7D5;
}

/* Disable scrolls*/
.jOrgChart {
    overflow: hidden;   
}

/* Basic styling */
/* Draw the lines */


/* node cell */
.jOrgChart td {
  text-align: center;
  vertical-align: top;
  padding: 0;
}

/* The node */
.jOrgChart .node {
  display: inline-block;
  width: 156px;
  min-height: 50px;
  margin: 0 2px;
}

/* jQuery drag 'n drop */

.drag-active {
  border-style: dotted !important;
}

.drop-hover {
  border-style: solid !important;
  border-color: #E05E00 !important;
}

/* Custom chart styling */
.jOrgChart {
  padding: 20px;
  padding-bottom: 60px;
  background-color:#FCFCFC;
  border:1px solid #CCC;
}

/* End Organization Chart */

Can you help me finding what might be the root cause of this issue?

The credit of the code goes to "Directory" owner on the forge which I use as the sample.


Thank you :)

Hi,


dunno the relation between css and your image, but I bet you have some container where you set the overflow to hidden.



J. wrote:

Hi,


dunno the relation between css and your image, but I bet you have some container where you set the overflow to hidden.




as you may see on the attached CSS, yes, I set the overflow to hidden.

Will it make any issue?

yes, it will. :)

anything that goes out of the div (do not fit) will be hidden...

So do not set overflow hidden.

If you are seeing scrolls and don't want it, remove any fixed length in the container.

Cheers

Eduardo Jauch

PS If you want the entire chart to be visible at once, you probably will want to use % to define width of nodes. but this will probably cause more harm than good...

Cheers

Eduardo Jauch

Eduardo Jauch wrote:

PS If you want the entire chart to be visible at once, you probably will want to use % to define width of nodes. but this will probably cause more harm than good...

Cheers

Eduardo Jauch

Hi, I've tried by removing the overflow: hidden but then I can't scroll it anymore. It becomes worse than before.
And when you mention about fixed length, can you tell me where is your point on the css?

Thank you.


Hello Lady,

Didn't understand. 

Removing the overflow hidden is preventing you from scroll? 

But before you where able to scroll?

Thing is, a container, if no fixed width is defined, will have the same width as its contents. The hidden option only works if there is a fixed width, as only then the browser knows where to cut the content. Scrolls also will appear only in fixed length. I'm oversimplifying, but you get the idea.

So, the only reason to the hidden to work is because at some point in the html structure there is a fixed width div (container).

Inspect you page in browser to find it. 

If you remove the fixed width, it should growth to the size of the content.

Can you show an image of your page after removing the overflow hidden?

Eduardo Jauch wrote:

Hello Lady,

Didn't understand. 

Removing the overflow hidden is preventing you from scroll? 

But before you where able to scroll?

Thing is, a container, if no fixed width is defined, will have the same width as its contents. The hidden option only works if there is a fixed width, as only then the browser knows where to cut the content. Scrolls also will appear only in fixed length. I'm oversimplifying, but you get the idea.

So, the only reason to the hidden to work is because at some point in the html structure there is a fixed width div (container).

Inspect you page in browser to find it. 

If you remove the fixed width, it should growth to the size of the content.

Can you show an image of your page after removing the overflow hidden?


Hello,
after I put the overflow to be auto, it can be scrolled again. Now the problem is still the same as previously, it doesn't show all the children (the scroll is ended when I'm very sure more children is hidden.

Hi Lady,

You can check if really there are more children inspecting the HTML.

Eduardo Jauch wrote:

Hi Lady,

You can check if really there are more children inspecting the HTML.

Hello,

I've checked and there are more children, but I can't see it on the page.


Hello Lady,

Could you share your OML or a small but complete test OML where the problem arises?

I can't look to it right now, but maybe someone elses could, and this would help a lot.

Cheers,

Eduardo Jauch

Eduardo Jauch wrote:

Hello Lady,

Could you share your OML or a small but complete test OML where the problem arises?

I can't look to it right now, but maybe someone elses could, and this would help a lot.

Cheers,

Eduardo Jauch

Hi,

here it is (under EntityGroupDetail page).


Thanks Lady.

If no one else can see this, I should have some time in the afternoon.

Cheers,

Eduardo Jauch

Eduardo Jauch wrote:

Thanks Lady.

If no one else can see this, I should have some time in the afternoon.

Cheers,

Eduardo Jauch


Hi Eduardo, do you found something?

I tried your oml... and found I was able to build a very wide org chart... with a parent having a lot of children.  The chart just kept growing.  I found that if I added a company and then gave that company child companies... I could then add that company to the parent and the chart would have growth explosion... with all the children of the company I added coming along with it.  It was great to watch.  Really nice page, by the way.

When I opened your oml, OS told me I had a problem with Lisbon (mainly because I didn't have Lisbon installed).  When I tried to install Lisbon I was told that Silk UI Web was needed to be updated.  I'm running 10.0.715.0.

I updated Silk UI, installed Lisbon, then re-opened your OML and build a very large chart.  I tested under Chrome.

Davidk wrote:

I tried your oml... and found I was able to build a very wide org chart... with a parent having a lot of children.  The chart just kept growing.  I found that if I added a company and then gave that company child companies... I could then add that company to the parent and the chart would have growth explosion... with all the children of the company I added coming along with it.  It was great to watch.  Really nice page, by the way.

When I opened your oml, OS told me I had a problem with Lisbon (mainly because I didn't have Lisbon installed).  When I tried to install Lisbon I was told that Silk UI Web was needed to be updated.  I'm running 10.0.715.0.

I updated Silk UI, installed Lisbon, then re-opened your OML and build a very large chart.  I tested under Chrome.

Whoaa really?
Can you send me the screenshot?
My problem is happened when the parent has a lot of children (say 13 children). Then the 1st child has 13 children, 2nd child has 13 children, 3rd child has 13 children as well, then the 4th to 13th child of the parent will not be shown anymore.

Ok... thanks for the count description... I see it now.

I added 12 children to the parent.  Then I added the parent to one of the children.  That fired off a cascade of additions.  Now, only 5 of the original parent children are showing.

In looking at the HTML, the other children simply are not rendered.

Where does the Utilities and OrgChart WebBlocks come from?

Davidk wrote:

Ok... thanks for the count description... I see it now.

I added 12 children to the parent.  Then I added the parent to one of the children.  That fired off a cascade of additions.  Now, only 5 of the original parent children are showing.

In looking at the HTML, the other children simply are not rendered.

Where does the Utilities and OrgChart WebBlocks come from?

You can find everything on the OML, it doens't have depencies to other module.


Hello Lady,

Can I ask you something?
For the data you have in the example, to have a parent with 13 chindren, and one of the children with 13 children more, you probably will have to create a "circular chain".

In fact, your code allows that a group, in the end, to be subsidiary of itself.

So, group A has 13 children (A1 to a13). And now, I add A as a subsidiary of A1, and now I create caos... :)
Don't know if the org chart can deal with it.

You can prevent this implementing logic that do not allow adding a child if it is already in the chain, for example.

Could you provide an OML with the data setup in a way where the problem happens?
(with a bootstrap showing this 13, of 13, of 13 thing...)

Cheers,
Eduardo Jauch

Eduardo Jauch wrote:

Hello Lady,

Can I ask you something?
For the data you have in the example, to have a parent with 13 chindren, and one of the children with 13 children more, you probably will have to create a "circular chain".

In fact, your code allows that a group, in the end, to be subsidiary of itself.

So, group A has 13 children (A1 to a13). And now, I add A as a subsidiary of A1, and now I create caos... :)
Don't know if the org chart can deal with it.

You can prevent this implementing logic that do not allow adding a child if it is already in the chain, for example.

Could you provide an OML with the data setup in a way where the problem happens?
(with a bootstrap showing this 13, of 13, of 13 thing...)

Cheers,
Eduardo Jauch

Hi Eduardo,
I don't think it is the root cause, since I've ever tried to create something like this:

Group A has 13 children (A1 to A13)

A1 has 13 children (B1 to B13)

A2 has 13 children (C1 to C13)

No looping inside but the problem is still the same, I may not be able to see A5 to A13.

I think you can try it from your side by a dummy data.


Thank you btw :)
I've been stucked at this problem more than 2 weeks :(

Lady wrote:

Davidk wrote:

Ok... thanks for the count description... I see it now.

I added 12 children to the parent.  Then I added the parent to one of the children.  That fired off a cascade of additions.  Now, only 5 of the original parent children are showing.

In looking at the HTML, the other children simply are not rendered.

Where does the Utilities and OrgChart WebBlocks come from?

You can find everything on the OML, it doens't have depencies to other module.


Understood... but where did the WebBlocks originally come from?  Who wrote the Javascript code and Server Actions?  To me this doesn't feel like a container width issue... but rather a logic issue.

Also, in the Server Action GetSubsisdiaryCompanies, there is a test for the number of levels.  Now... I've little idea what this action is doing... but is this correct?


Davidk wrote:

Lady wrote:

Davidk wrote:

Ok... thanks for the count description... I see it now.

I added 12 children to the parent.  Then I added the parent to one of the children.  That fired off a cascade of additions.  Now, only 5 of the original parent children are showing.

In looking at the HTML, the other children simply are not rendered.

Where does the Utilities and OrgChart WebBlocks come from?

You can find everything on the OML, it doens't have depencies to other module.


Understood... but where did the WebBlocks originally come from?  Who wrote the Javascript code and Server Actions?  To me this doesn't feel like a container width issue... but rather a logic issue.

Also, in the Server Action GetSubsisdiaryCompanies, there is a test for the number of levels.  Now... I've little idea what this action is doing... but is this correct?


Hi David,

I got the JavaScript from 'Directory' on forge (I've explained about it on my post).

For the action, I made it by myself, since the purpose of the action is only for creating the list.

For the level checking, I made the condition so the depth of the chart won't be too deep. I thought it can help to solve the problem but I was wrong.


Solution

Going back to the Directory App... do you get the same results when adding that many children to each level?

Also, in the Directory App Org Chart, there are no scroll bars.  I can't quite see how that's done... but yours has scroll bars.  What's the difference between your container and the Directory App container?

Solution

Davidk wrote:

Going back to the Directory App... do you get the same results when adding that many children to each level?

Also, in the Directory App Org Chart, there are no scroll bars.  I can't quite see how that's done... but yours has scroll bars.  What's the difference between your container and the Directory App container?

It is because of this code:

/* Disable scrolls*/
.jOrgChart {
    overflow: hidden;   
}

on my OML, I set it to :

/* Disable scrolls*/
.jOrgChart {
    overflow: auto;   
}

(could be auto or scroll, I can't remember it clearly).

I changed it because setting the overflow to hidden will hide all the content which doesn't match the width of the container, similar with the one Eduardo mentioned above. I thought it also can solve the problem but I was wrong.


That's the only difference between Directory and mine.

Davidk wrote:

Going back to the Directory App... do you get the same results when adding that many children to each level?

Also, in the Directory App Org Chart, there are no scroll bars.  I can't quite see how that's done... but yours has scroll bars.  What's the difference between your container and the Directory App container?


Hi Davidk,

an update for you: the issue has been resolved. You can't imagine how happy I am :D
Thank you for all your help :)

See you on another issue :D


Eduardo Jauch wrote:

Hello Lady,

Can I ask you something?
For the data you have in the example, to have a parent with 13 chindren, and one of the children with 13 children more, you probably will have to create a "circular chain".

In fact, your code allows that a group, in the end, to be subsidiary of itself.

So, group A has 13 children (A1 to a13). And now, I add A as a subsidiary of A1, and now I create caos... :)
Don't know if the org chart can deal with it.

You can prevent this implementing logic that do not allow adding a child if it is already in the chain, for example.

Could you provide an OML with the data setup in a way where the problem happens?
(with a bootstrap showing this 13, of 13, of 13 thing...)

Cheers,
Eduardo Jauch

Hi Eduardo,

an update for you: the issue has been resolved. You can't imagine how happy I am :D
Thank you for all your help :)

See you on another issue :D


Cheers,

Lady

lol

Can you share with us what was the problem?
And mark your solution as the correct? ;)

Cheers,
Eduardo Jauch

Lady... how was the issue resolved?  What did you need to do to correct things?

Davidk wrote:

Lady... how was the issue resolved?  What did you need to do to correct things?

Hi Davidk and Eduardo,

I found out that when I pass an input list to a web block containing list record, I use the default value of max records that can be pulled from the input list (it is 50 records). I dont check it previously because usually I only use the default one. I change the value to InputList.Length and it works.


Cheers,

Lady

Yikes... that's a good one.  I'll have to remember that.  Nice sleuthing.