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

Switch the background color when a radio button is chosen

For my quiz on test practice with an array of questions, each question includes five radio buttons, but only one is correct. Initially, all five options have a gray background. Upon selecting a wrong option, it changes to red. If another incorrect option i ...

jqueryhtmlcss

What is the best way to customize the appearance of the initial row in each tr cluster?

Looking to add a button for expanding child rows within a datatable, with each group in the table having the same child elements.... The provided CSS currently displays the icon on every row throughout the entire table. td.details-control { backg ...

htmlcssdatatablesgrouping

iOS iframe remains unscrollable only when switching from portrait to landscape orientation

I have a scrollable iframe set up on iOS like this: <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: scroll; -webkit-overflow-scroll: touch; ..."> <iframe style="height: 600px, ..."> </iframe> </d ...

javascriptioscssiphoneiframe

What is the best way to add margins to the elements in a row without disrupting the row layout?

I'm trying to figure out how to add margin between elements in my code snippet without breaking the row. You can view the fiddle here. Although a similar question has been asked on Stack Overflow here, I wasn't able to find a solution that works ...

cssbootstrap-4

Locate the closest pals near my present whereabouts

Is it possible to find my friends by obtaining their location from their mobile phones when they are near me? I have a code snippet below with the variable cities where I can input the numbers of my friends. Can I achieve this or do I need to make some m ...

javascriptandroidhtmlgeolocationlocation

What are the differences between incorporating JavaScript directly into HTML and writing it in a separate file?

I need help converting this JavaScript embedded in HTML code into a standalone JavaScript file. I am creating a toggle switch that, when clicked, should go to a new page after the transformation. I am looking for the non-embedded version of the function. H ...

javascripthtmljquerycssonclick

Trouble with setting HTML table width

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <table border="1" width="100%"> <tr> <td>bbbbbbbbbbbbbbbbbbbbbbbbbbb ...

htmlcsswidthhtml-table

What causes the width of input fields to increase as more inputs are added in flexbox?

I'm working on a form that consists of multiple sections, each with varying numbers of input fields. I've noticed that when I apply display: flex to the parent div and set the input fields to 100% width, the widths are calculated differently depe ...

htmlcssformsflexboxwidth

The specified number of columns and width values are being disregarded

The Challenge While using the CSS column-property to create columns on my webpage, I have encountered some unusual behavior with the layout engine. Specifically, I have set up the following styling: body { padding: 0; background-color: black; margi ...

htmlcsscolumn-widthcss-multicolumn-layoutcolumn-count

How to display an [object HTMLElement] using Angular

Imagine you have a dynamically created variable in HTML and you want to print it out with the new HTML syntax. However, you are unsure of how to do so. If you tried printing the variable directly in the HTML, it would simply display as text. This is the ...

javascripthtmlangulartypescriptcomponents

Implementing dynamic background images in Angular 4 using div placeholders

Is there a way to include a placeholder or default image while waiting for item.imgSrc to load on the screen? <div class="style" *ngFor="let item of array; <div [style.backgroundImage]="url('+ item.imgSrc +')" class="image">< ...

htmlcssangular

Enhance the speed of my Tumblr page by using JavaScript for personalized styling tweaks

-- Hey there! Dear Reader, if navigating Tumblr isn't your cup of tea, let me know and I'll provide more detailed instructions! I recently ran into some glitches on my Tumblr page while using the default theme 'Optica'. Whenever I tri ...

javascriptjqueryhtmlcsstumblr

I'm looking to center my btn button vertically and horizontally over two images using Bootstrap 5 in a responsive manner. How can I achieve this?

Any tips on how to position my btn button both vertically and horizontally in the center on top of two images? I want it to look like this: https://i.sstatic.net/Rezrd.png This is the code for my button: <a class="btn btn-primary" href=" ...

htmlcssresponsivebootstrap-5

Is it possible to personalize a select button for both iOS and Android mobile platforms?

I've implemented a dropdown on my website for the desktop version and it works fine. However, I want to replace this dropdown with a select button on iPad and iPhone, as I prefer how it looks on those devices. Is it possible to style the select butto ...

htmlcssmobile

Is it possible to securely share login details on the internet?

I'm currently brainstorming different ways to securely display FTP, database, and hosting information for website projects on my project management site. One potential solution I'm considering is encrypting the passwords and developing an applica ...

phpmysqlhtml

The toggle button appears to be lacking in CSS styling

I'm trying to create a dropdown button using Bootstrap and ng-bootstrap in my Angular project. Here's the HTML I've written: <div ngbDropdown class="d-inline-block"> <button class="btn btn-outline-primary" id="dropdownBasic1" n ...

cssangulartwitter-bootstrap-3angular6ng-bootstrap

A method for expanding the menu upwards to make room for newly added items

Looking at the images below, I have a menu that needs new items added to it while maintaining the position of the lower-left corner. Essentially, each time an entry is added, the menu should expand upwards from "the upper-left corner" while keepi ...

javascripthtmlcssangularjsangular

An option instead of using a pop-up window

Currently, I have a PHP script and a small form that allows users to upload image files. The user can access this feature by clicking on a button on the parent HTML page, which opens up a Pop Up Window. I understand that not everyone is a fan of 'Pop ...

phpjavascripthtmlpopup

Reverting back to the specified CSS style

In my application, I have a common HTML component styled as follows: .box { min-width: 100px; padding: 20px 10px; } There are over 100 of these components and they each have a unique border style without a bottom border: .box:nth-child(1) { border ...

cssoverriding

SimpleLightBox refuses to function

Having trouble getting SimpleLightBox to work properly? It seems like when you click on an image, it opens as a regular image on a blank page. I've added the JS and CSS files correctly (I double-checked in the source code) and included the HTML and JS ...

javascriptjqueryhtmlcssbootstrap-4