Interactive HTML and CSS tree structure viewing experience

I am looking to create a responsive tree diagram, here is a basic example: https://jsfiddle.net/ppnfpggx/2/

However, I am facing some challenges with the responsive layout. Particularly on smaller devices, it should appear like this:https://i.sstatic.net/5JFYJ.png

Above each item:

.tree-item::after {
  content: '';
  position: absolute;
  top: -15px;
  left: -20px;
  height: 4px;
  background-color: #000;
  width: 88px; // (48 + 20 + 20 -> half-margin on both sides)
}

Since the number of items may vary, I have experimented with :last-child to remove ::before, but encountered issues with the item before the last one. My goal is to have the third item act as the closing point for the tree, removing pseudo-elements from the remaining items and somehow centering the last two items without using margin-left.

Is it possible to achieve this responsive layout using CSS/JS? If so, could you please provide any ideas or a basic example?

javascriptcssresponsive-designtreetreeview

Answer №1

If you're looking to achieve responsive design using just CSS, one effective method is through flexing.

#tree{
    display: flex;
    justify-content: space-around;
}

//Update To address initial issues, try incorporating this code snippet into your CSS file:

@media (max-width: 340px) {
    .tree-item:nth-child(n+4)::before {
        display: none;
        }
    .tree-item:nth-child(n+4)::after {
    display: none;
    }
    .tree-item:nth-child(3)::after {
      left: auto;
      right: 50%;
    }
}

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

Is the Nopcommerce theme being upgraded from version 2.3 to 3.0?

I am new to nopCommerce and facing a challenge. I need to upgrade a nopCommerce 2.2 site to version 3.0, but only the theme. I already have two sites designed, and I want to apply the 3.0 theme to the 2.2 site. If it were just a simple HTML page, copying ...

cssthemesupdatesnopcommerce

Unable to execute a GET request using the Fetch API on Django REST Framework results in receiving an HTTP 304 error code

When attempting a GET request with the Fetch API (Node Fetch) module against a Django REST API, I am encountering a 304 error. I am unsure of how to resolve this issue as it seems to be related to requesting the same data repeatedly. Is there no way around ...

javascriptexpresshttpdjango-rest-frameworkfetch-api

Tips for Locating an Element by Its Attribute in JQuery

I currently have a variable that holds a list of selects, and my goal is to filter out only those with a 'dependsOn' attribute set to 'EventType'. My initial attempt below doesn't seem to work as intended and returns a count of 0: ...

javascriptjqueryhtmlcssselect

"Utilize the on() method to bind a click event to dynamically generated elements received

After reading several discussions on using on() to link events to dynamically generated HTML elements, I decided to create an example (FIDDLE) where the click event is bound to elements div.clicktitle fetched via AJAX. These div elements contain data attri ...

javascriptjqueryhtmlajax

Meteor: Allowing users to share their personal fields on their account

I am currently facing an issue with publishing "friends" from the users Collection. Within each account, there is a field named addressbook that stores all friend-ids. Unfortunately, when trying to publish this information, I only receive my own account (a ...

javascriptmongodbmeteor

The removeAttribute function has the ability to remove the "disabled" attribute, but it does not have the capability to remove

When it comes to my JavaScript code, I have encountered an issue with two specific lines: document.getElementsByName('group')[0].removeAttribute('disabled'); document.getElementsByName('group')[0].removeAttribute('checke ...

javascripthtml

Straight pipe made with tubegeometry

Is it possible to create a straight tube using TubeGeometry? All the examples I find only show how to make curved tubes. ...

javascriptthree.js

sending a file to a controller without the use of a form

Hey there, I'm exploring a way to transfer a file from a view to a controller without using a form. My goal is to enable the user to browse for a file and have it sent to the controller via Ajax. Do you think this is achievable? <td>Import ...

javascriptjqueryajaxfileasp.net-mvc-4

What is the best way to incorporate this into a Vue project?

I am in the process of transitioning my code to Vue.js, so I am relatively new to Vue. In the screenshot provided (linked below), you can see that there are 4 columns inside a div with the class name columns. I attempted to use the index, like v-if='i ...

javascriptvue.jsvuejs2vue-component

How can I submit the "names" of cities instead of the "id" in a dependent dropdown select?

I've encountered an issue while trying to change the code from "${region.code}" to "${region.name}". regOpt += `<option value='${region.code}'> ${region.altName}</option>`; My objective is to display the names of the regions ins ...

javascripthtmljsonajaxdropdown

Browsing a container with JavaScript

I am attempting to display one div at a time and scroll through them repeatedly. I found and modified a Fiddle that works as intended, but when I try to implement it on my own test page, the divs do not scroll as expected. Here is the Fiddle example: http ...

javascriptjqueryhtml

Implementing a Script Across an Entire Website

Is there a way to optimize the loading time of my website by avoiding the execution of a 30-line script that is necessary for a plugin present in the header of every page? The plugin appears on all pages, although currently only two. If the header conten ...

javascriptjquery

The functionality of AJAX is hindered in the browser when attempting to fetch data from a URL

Lately, I've been encountering a strange issue when trying to fetch data from a URL. $.ajax({ url: 'URLHERE', dataType: 'html', success: function(data) { //function 2 var xml = $.parseXML(data) $(xml).find('StopLoca ...

javascriptjqueryajaxbrowser

Exploring the differences between Zurb Foundation 6's app.scss and _settings.scss files

Can you explain the distinction between app.scss and _settings.scss when using Zurb Foundation 6? ...

htmlcsszurb-foundationzurb-foundation-6

What could be causing the CastError: Cast to ObjectId failed in my code?

Whenever I try to access a specific route in my project, the following error is returned: Server running on PORT: 7000 /user/new CastError: Cast to ObjectId failed for value "favicon.ico" (type string) at path "_id" for model "User" at model.Query.exe ...

javascriptnode.jsmongodbexpress

Transferring data from a .NET array to JavaScript

I have gone through numerous samples and suggestions, but unfortunately, none of them seem to work effectively in my case. When using winForms webControl, I am attempting to send an array of addresses to the Google Maps API for stops along the way. Every ...

javascript.netarraysvb.netgoogle-maps-api-3

Using Vue component with v-model and custom input handler

I'm currently working on creating a wrapper component for an <input/> element in Vue.js. Here is the component code: <template> <div> <input v-bind="$attrs" :value="value" @input="input" /> ... </div> <te ...

javascriptvue.jseventemitter

Enabling Context Isolation in Electron.js and Next.js with Nextron: A Step-by-Step Guide

I've been working on a desktop application using Nextron (Electron.js + Next.js). Attempting to activate context isolation from BrowserWindow parameters, I have utilized the following code: contextIsolation: true However, it seems that this doesn&ap ...

javascriptnode.jsnext.jselectron

A step-by-step guide to creating a clipboard stream using guacamole-common.js

When utilizing Guacamole.client.createClipboardStream to generate a clipboard stream and sending the stream on paste event, I noticed that the remote clipboard remains empty. const customStream = client.createClipboardStream("text/plain"); cust ...

javascriptreactjsguacamole

Disabling the Bootstrap tooltip feature is a quick and easy process

Is there a way to turn off bootstrap tooltip on my website? I activated it with the code below: function activateTooltip() { const toolTips = document.querySelectorAll('.tooltip'); toolTips.forEach(t => { new bootstrap.Tooltip(t); } ...

javascripttwitter-bootstrapbootstrap-5