Building a company hierarchy with HTML, CSS, and Bootstrap styling

I recently implemented an organization chart that I came across at the following link:

Everything seemed to be working well initially, but I ran into an issue where my tree expanded horizontally and started breaking like this: https://i.sstatic.net/2pTdy.png

I attempted to solve this problem by adding a scroll bar using the overflow-x property, but unfortunately, it did not work as expected:

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

For those interested, here is a CodePen link to my attempt: https://codepen.io/vladnicu/pen/zYqwdyv

Thank you for any help or advice you can provide!

Answer №1

To prevent your chart from breaking, be sure to assign a min-width like this:

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

For this particular case, a width of 676px was found to be the most suitable. That's why it was chosen for the example.

Now you can scroll horizontally as needed:

https://i.sstatic.net/qPX8B.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to achieve a stylish Bootstrap modal design with a blurred and transparent header, as well as a left sidebar that seamlessly blends into

Is it feasible to create a modal with a blurred (transparent) background for the header section, allowing the site to show through? Additionally, can a sidebar on the left side of the modal also be transparent and blurred, revealing the site underneath? C ...

Applying Bootstrap's inline styling to adjust the width of a label

I'm having trouble adjusting the width of a Bootstrap label using inline styles. Here is my code: <td><span class="label label-info" style="width:30px; text-align:center; background-color:#6d8cbf"> TEXT </span></td> Unfort ...

Using Selenium to stream audio directly from the web browser

For my current project, I am utilizing Selenium with Python. I have been exploring the possibility of recording or live streaming audio that is playing in the browser. My goal is to use Selenium to retrieve the audio and send it to my Python application fo ...

Can someone please explain how I can implement a multi-submenu feature using JavaScript?

HTML CODES: <header> <nav> <ul> <li class="asmenu"><a href="#">Menu1 <i class="fa fa-caret-down"></i></a> <ul class="submenu deact ...

What is the best way to make sure images and text are properly aligned for different screen sizes

I'm a beginner with Bootstrap and could use some assistance. In my code, I have text and images divided into four columns with alignment set based on screen size using media queries in CSS. However, when resizing the window to tablet view (check Scre ...

Creating a cascading layout with React Material-UI GridList

Can the React Material-UI library's GridList component be used in a layout similar to Pinterest's cascading style? I have utilized Material-UI Card components as children for the GridList: const cards = props.items.map((item) => <Card ...

What's the best way to iterate through multiple objects within <td> tags using Vue.js?

I have an Array filled with multiple Objects, and now I am interested in iterating through each object as a <tr> within a <table>. I have successfully achieved this. However, some of these objects might contain nested objects. In such cases, I ...

Using CSS to automatically convert a table into one column layout with labels from the thead section

Is it possible to automatically create the labels for data when converting a multi-columns table into one column using CSS and taking the information from the thead section? This resource discusses how to convert a multi-column table into a single column ...

Styling CSS for HTML links

I am encountering an issue with a CSS hover effect on an image that is also a hyperlink to another website. The CSS styling for the hover effect seems to be interfering with the functionality of the HTML hyperlink. The image in question is aligned with ot ...

Retrieving radio button value in Angular 2

Currently, I am attempting to retrieve the radio button value in an Angular 2 project. The radio buttons are defined in index.html as: <input type="radio" id="options1" name="function" value="create"> <input type="radio" id="options2" name="func ...

ReactJS how to prevent accordion from collapsing automatically

My custom accordion layout for the features needed in the site I am building is not working well with Jquery. How can I modify it to collapse properly? Specifically, I want it so that when I open number 2, number 1 will automatically close. I've trie ...

Tips for incorporating a datepicker into your Angular 2 application

In my HTML file, I have defined the following code: <span id="datepicker" (click)="ShowDate()"> <i class="fa fa-calendar " aria-hidden="true" style="margin-top: 20px;margin-left: 20px;" >< ...

Adjusting color schemes for Twitter Bootstrap Tooltips according to their placement

I have been attempting to customize the colors of tooltips (specifically from Twitter Bootstrap), but I am encountering some difficulties. While changing the default color was straightforward, altering the colors for .tooltip and its related definitions ha ...

Including content without triggering the digest cycle (utilizing raw HTML) within a Directive

My goal is to include raw HTML inside a directive for later transclusion (to populate a modal when opened). The issue arises when the contents of dialog-body are executed, triggering the ng-repeat loop and causing the template to be rerun, leading to a po ...

Is it possible for HTML/CSS to automatically adjust content size to fit or fill a container?

I'm interested in finding a CSS-only technique that can ensure content within a container scales to fit, regardless of whether it's text or images. Take a look at the example below: .container { display: inline-block; width: 2in; hei ...

jquery: centralizing progressbar growth on the page

Working with Bootstrap progress bars is a regular task for me, and I have included a small example below. var $progress = $('.progress'); var $progressBar = $('.progress-bar'); var $alert = $('.alert'); setTimeout(function() ...

Unique perspective on web design when accessed from a different laptop

Scenario : I am currently developing a mobile web version of my website Issue : While the design looks perfect when viewed on my laptop, it appears completely different and messy when opened on a friend's laptop. For instance: font-size i ...

Angular 6 - implementing a dynamic carousel with bootstrap styling

I am currently working on a carousel using bootstrap4 where the images are sourced from an array. However, I am facing an issue where the first element must have the active class. <div id="carouselExampleFade" class="carousel slide carousel-fade" dat ...

data not being transferred successfully to the SQL input from forms

The data from this input form is not being properly transferred to the SQL database when using the sqlAddUser.php file available at pastebin.com/W9BH0D3s. The form includes the following fields: <form action="sqlAddUser.php" method="post"> <div c ...

Container element refusing to grow in size while the footer remains fixed on the screen

Description: I recently encountered an issue with the layout of my website. I have a main content div (#main) and a container div (.display), which should expand automatically with content to push the footer down. Initially, I struggled to get this workin ...