CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
NicuVlad
NicuVlad

Reputation: 2601

Organization chart using HTML, CSS and Bootstrap

I introduced an organization chart that I found here: https://bootsnipp.com/snippets/eN3Q8

Everything worked fine but my tree got bigger horizontally and it breaks like this: enter image description here

I would like to add a scroll bar using overflow-x property but it doesn't work:

.tree ul {
    padding-top: 20px; position: relative;
    overflow-x: scroll;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

Here is a CodePen link: https://codepen.io/vladnicu/pen/zYqwdyv

Thanks!

Upvotes: 1

Views: 4018

Answers (1)

Tommy
Tommy

Reputation: 2453

You have to set a min-width to avoid that your chart to break like this:

.tree {
  min-width: 676px;
  overflow-x: scroll;
}

In your example, 676px in the last width for which it works properly. That's why I have chosen it.

Now you are able to scroll horizontally as desired:

Resulting scrollable containers

Upvotes: 2

Related Questions