HTML Plant with background removed

I have been attempting to create a tree structure similar to the image provided. However, I am encountering difficulty in getting the background stripes to align properly for a specific row. When resizing the browser window, the stripes do not remain fixed for the corresponding list item. I am currently utilizing the angular-tree library for this project. You can access the code sample at https://jsfiddle.net/shibincc/npLjrt66/

<i class="glyphicon glyphicon-triangle-bottom" ng-show="(node[childNodeLabel].length || !node.isLeafNode) &amp;&amp; !node.collapsed" ng-click="selectNodeHead(node)"></i>
<i class="glyphicon glyphicon-stop ng-hide" ng-hide="node[childNodeLabel].length || !node.isLeafNode"></i>
<i class="node-type JOB" ng-mouseleave="onMouseRemove(node,$event)" ng-mouseover="onMouseOver(node,$event)" ng-click="selectNodeLabel(node)"></i>
<span ng-class="node.selected" ng-click="selectNodeLabel(node)" ng-mouseleave="onMouseRemove(node,$event)" ng-mouseover="onMouseOver(node,$event)" class="ng-binding">Job 2</span>

</span>
<section class="fokker-tree" style="font-size: 14px;font-size: 14px" ng-hide="node.collapsed" tree-config="treeConfig" tree-data="node[childNodeLabel]">
    <ul>
        <li ng-repeat="node in treeData track by $index" class="overflow-ellipsis" ng-if="node.nodeType">
            <span ng-if="node.nodeType == 'data'" class="ng-scope">

                <i class="glyphicon glyphicon-triangle-bottom" ng-show="(node[childNodeLabel].length || !node.isLeafNode) &amp;&amp; !node.collapsed" ng-click="selectNodeHead(node)"></i>
                <i class="glyphicon glyphicon-stop ng-hide" ng-hide="node[childNodeLabel].length || !node.isLeafNode"></i>
                <i class="node-type JOB" ng-mouseleave="onMouseRemove(node,$event)" ng-mouseover="onMouseOver(node,$event)" ng-click="selectNodeLabel(node)"></i>
                <span ng-class="node.selected" ng-click="selectNodeLabel(node)" ng-mouseleave="onMouseRemove(node,$event)" ng-mouseover="onMouseOver(node,$event)" class="ng-binding">Job 2</span>

            </span>
            <section class="fokker-tree" style="font-size: 14px;font-size: 14px" ng-hide="node.collapsed" tree-config="treeConfig" tree-data="node[childNodeLabel]">

            </section>

        </li>
    </ul>
</section>

</li>

For a reference image of the desired tree structure, please visit Sample tree image

htmlcsstreeview

Answer №1

To create a striped background, you can utilize the linear-gradient feature.

background-size: auto 4em;
background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);


div[angular-treeview] {
  /* disable text selection */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* default styles */
  font-family: Tahoma;
  font-size:13px;
  color: #555;
  text-decoration: none;
}

/* Tree Model Styles */
div[tree-model] ul {
  margin: 0;
  padding: 0;
  list-style: none; 
  border: none;
  overflow: hidden;
}

div[tree-model] li {
  position: relative;
  padding: 0 0 0 20px;
  line-height: 20px;
}

div[tree-model] li .expanded,
div[tree-model] li .collapsed,
div[tree-model] li .normal {
  padding: 1px 10px;
  background-repeat: no-repeat;
}

div[tree-model] li .expanded {
  background-image: url("http://cfile23.uf.tistory.com/image/205B973A50C13F4B19D9BD");
}

div[tree-model] li .collapsed {
  background-image: url("http://cfile23.uf.tistory.com/image/1459193A50C13F4B1B05FB");
}

div[tree-model] li .normal {
  background-image: url("http://cfile23.uf.tistory.com/image/165B663A50C13F4B196CCA");
}

div[tree-model] li i, div[tree-model] li span {
  cursor: pointer;
}

div[tree-model] li .selected {
  background-color: #aaddff;
  font-weight: bold;
  padding: 1px 5px;
}

/* F-Tree Styles */
.f-tree {
  /* disable text selection */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

ul.f-tree {
  margin: 0;
  padding: 0;
  list-style: none; 
  border: none;
  overflow: hidden;
}

.f-tree li {
  position: relative;
  padding: 5px 0 0 20px;
  line-height: 20px;
}

.f-tree li .expanded,
.f-tree li .collapsed,
.f-tree li .normal {
  padding: 1px 10px;
  background-repeat: no-repeat;
}

.f-tree li i, .f-tree li span {
  cursor: pointer;
}

// More CSS styles for tree elements...

<ul class="tree-list f-tree wrapper" tree-config="treeConfig" tree-data="treeData">
   <li class="tree-node">
      <i class="node-type parent-node"></i>
      <span class="node-label">content 1</span>
      <ul class="inner-tree tree-list f-tree ">
         // Nested tree nodes
      </ul>
   </li>
    // More tree nodes here...
</ul>

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 there a way to identify the ID of a button using Javascript specifically in Internet Explorer and Safari browsers?

Within my code, there lies a directive that contains the attribute on-blur = blurFunc($event). Imagine this scenario: I interact with a button bearing the id "myButton" located outside of the directive. How can I determine which specific button was clicke ...

javascriptangularjshtmlinternet-explorersafari

Every time I adjust the browser height on my landing page, the elements start to overlap each other

Something strange is happening - as I shorten the height of the browser, elements on the page start to overlap. I've tried using Firebug to troubleshoot, but haven't had any luck so far. Maybe someone here can help me out! EDIT: It seems that e ...

htmlcssresponsive-design

CSS and JavaScript Nav Menu Collapse (No Bootstrap)

I have written a navbar code using pure HTML/SASS, but I am facing a challenge in adding a collapse element to the navigation bar. Despite trying various solutions from Stack Overflow, I still haven't found one that works for me. Therefore, I am rea ...

javascripthtmljquerycss

Can a radio button set be designed in two dimensions?

There are three sets of data (dataX, dataY, dataZ) that need to be assigned unique values out of a selection of three options (valueA, valueB, valueC). Each piece of data should be linked to one value and each value should have only one data associated wit ...

htmlformsradio-button

The button on my page refuses to align in the center, and I'm at a loss as

Struggling to center a button within my div, despite having all other content centered. Here is my code: .middle { width: 100%; height: auto; text-align: center; position: relative; ...

htmlcssbuttoncenter

How can I improve the empty space in HTML after PHP processing?

Here are the lines displayed in HTML: <a href='http://www.1stheme.dev/?frontiles=1946'> <article class="post-1946 frontiles type-frontiles status-publish hentry Width_1_Height_1 " style="width:326px;height:326px;text-align:left;" id="po ...

phphtmlwordpress

Ensuring React's setupProxy functions properly in conjunction with express.js

I've encountered an issue while trying to pass images from express to react. My express.static is correctly set up, so when I visit localhost:5000/public/images/me.jpeg, the image loads in my browser. However, when I attempt to use <img src="/publi ...

javascripthtmlcssreactjsexpress

Is there a way to retrieve the left offset of a floating element even when it is positioned outside the viewport?

My current situation involves creating several panels that are stacked side by side within a main container. Each panel takes up 100% of the viewport width and height. I want to be able to horizontally scroll to each panel when clicking on their respective ...

javascriptjqueryhtmlcssviewport

Issues with changing background colors using Jquery animate

I am attempting to create a fading background color effect when a button is clicked. Currently, I can change the background color using this code: $("#" + lblqty).css("background","#e9f1ff"); However, when I try to use the animate function as shown below ...

javascriptjqueryhtmlcss

The resulting line will consist of the discovered string

Let's say there's an interesting HTML document presented below with associated line numbers: 30 - <div id="myDiv"> 31 - <span class="mySpan">Some Text</span> In this scenario, PHP is being utilized for a specific purpose: $ ...

phphtmlline-numbers

choose a distinct value for every record in the table

My goal is to only change the admin status for the selected row, as shown in the images and code snippets below. When selecting 'in-progress' for the first row, I want it to update only that row's status without affecting the others. <td ...

htmlangulartypescript

Every time I hover, my jQuery code keeps repeating the hover effect

I am currently facing an issue that has me stumped on finding a solution. The problem arises when I hover over the .div multiple times, the animation just doesn't stop and keeps running continuously. What I aim for is to have the .hidden element fad ...

javascriptjqueryhtmlcss

Is there a way to share the Username and Password without the need to manually input it?

My goal is to develop a C++ application for my classmates at school. Currently, they are required to visit our school's website and navigate to the login page. Once there, they enter their username and password, log in, and proceed to find their spec ...

javascriptphphtml

Having trouble with my Bootstrap 4 navbar button - what am I doing wrong?

After conducting research online, I found myself unable to resolve my issue due to my lack of proficiency in English. I apologize for any confusion caused and would like to revisit the topic. The problem lies with my navbar toggle that is not functioning ...

javascripthtmlcssbootstrap-4

What events precede and follow a keydown action in a Textarea field?

I need to prevent users from pressing function keys (F1, F2, etc.), the tab key, and any other characters from being added. The code below is supposed to achieve this on my website but it's not working. document.getElementById("code").addEventList ...

javascripthtmltextarea

I noticed an excess of white space on the right side of my Angular website

Check out my website here. Everything seems to be functioning correctly, however, there is an issue with scrolling on mobile. It should only scroll up and down, not left and right! I have noticed a strange white space on the right side of my site when view ...

htmlcssangularresponsive

Enhancing dynamic text boxes with jQuery by incorporating additional information

I've recently developed an interactive app that dynamically creates tables based on user input. The app includes a feature where you can specify the number of tables to generate and track the total count of tables added. Currently, I'm exploring ...

jqueryhtmlcss

Navigating Through Siblings with Http Agility Pack

When it comes to working with the HTML Agility Pack, it's easy to extract descendants and entire tables. However, how can you utilize this tool in a unique situation like the example below? ...Html Code above... <dl> <dt>Location:</dt ...

.nethtmlhtml-agility-packhtml-content-extractionscrape

Creating a 3D slider on Owl-carousel 2: A Step-by-Step Guide

I am trying to create a slider using Owl-carousel, but I'm having trouble implementing it. I came across this example https://codepen.io/Webevasion/pen/EPMGQe https://i.stack.imgur.com/KnnaN.jpg However, the code from this example doesn't seem ...

htmljquerycssowl-carousel

HTML and CSS link conflict

As a beginner in CSS, I am experimenting with creating a simple website using HTML and CSS. However, I have encountered an issue where the links on the left side of my page are being interfered with by a paragraph in the middle section. This causes some of ...

htmlcss