In this coding example, there are multiple ul and li elements.
Upon running the code, you will observe that test1 is positioned 10px from the left as it is nested within TEster, but achieving an additional 10px offset for Tester2 appears to be a challenge.
I am aiming to create a dynamic solution for this issue, bearing in mind that the demonstration only showcases a fraction of the total data.
.documents_061e9f12 .container_061e9f12 {
...
}
...
Consider utilizing the text-indent property instead of padding to prevent nested <ul> elements from being shifted to the right.
You may also want to streamline your styling approach by making your CSS more generic, like this:
ul {
list-style: none;
padding-left: 0;
}
li {
border-top: 1px solid #dadada;
cursor: pointer;
font-weight: 700;
padding: 5px 0;
}
ul ul { text-indent: 10px; }
ul ul ul { text-indent: 20px; }
ul ul ul ul { text-indent: 30px; }
/* Repeat as needed */
a {
font-weight: normal;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="documents_061e9f12">
<div class="titleContainer_061e9f12">
<div class="title_061e9f12">Documents</div>
<div class="buttonContainer_061e9f12">
<div class="upperButtons_061e9f12">
<div class="smallIcon_061e9f12"><i class="ms-Icon ms-Icon--Waffle" style="font-size:18px"></i></div>
<div class="smallIcon_061e9f12"><i class="ms-Icon ms-Icon--GlobalNavButton" style="font-size:18px"></i></div>
</div>
<div class="lowerButtons_061e9f12">
<div class="uploadBtn_061e9f12">Upload document</div>
<div class="uploadIcon_061e9f12"><i class="ms-Icon ms-Icon--Upload" style="font-size:14px"></i></div>
</div>
<div></div>
</div>
</div>
<ul class="datacontainer_061e9f12">
<li>
<div class="documentContainer_061e9f12 open_061e9f12" data-folder="https://addea.sharepoint.com/extranet/_api/Web/GetFolderByServerRelativePath(decodedurl='/extranet/Shared%20Documents/TEster')/Folders" data-file="https://addea.sharepoint.com/extranet/_api/Web/GetFolderByServerRelativePath(decodedurl='/extranet/Shared%20Documents/TEster')/Files">
<div class="icon_061e9f12"><span class="ms-Icon ms-Icon--OpenFolderHorizontal"></span></div>
<div class="arrow_061e9f12"><span class="ms-Icon ms-Icon--CaretUpSolid8"></span></div>
<div>TEster</div>
</div>
<ul>
<li>
<div class="documentContainer_061e9f12 open_061e9f12" data-folder="https://addea.sharepoint.com/extranet/_api/Web/GetFolderByServerRelativePath(decodedurl='/extranet/Shared%20Documents/TEster/test1')/Folders" data-file="https://addea.sharepoint.com/extranet/_api/Web/GetFolderByServerRelativePath(decodedurl='/extranet/Shared%20Documents/TEster/test1')/Files">
<div class="icon_061e9f12"><span class="ms-Icon ms-Icon--OpenFolderHorizontal"></span></div>
<div class="arrow_061e9f12"><span class="ms-Icon ms-Icon--CaretUpSolid8"></span></div>
<div>test1</div>
</div>
<ul>
<li>
<div class="documentContainer_061e9f12 open_061e9f12" data-folder="https://addea.sharepoint.com/extranet/_api/Web/GetFolderByServerRelativePath(decodedurl='/extranet/Shared%20Documents/TEster/test1/tester2')/Folders" data-file="https://addea.sharepoint.com/extranet/_api/Web/GetFolderByServerRelativePath(decodedurl='/extranet/Shared%20Documents/TEster/test1/tester2')/Files">
<div class="icon_061e9f12"><span class="ms-Icon ms-Icon--OpenFolderHorizontal"></span></div>
<div class="arrow_061e9f12"><span class="ms-Icon ms-Icon--CaretUpSolid8"></span></div>
<div>tester2</div>
</div>
<ul></ul>
</li>
<li class="file_061e9f12">
<div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
<div><a href="https://addea.sharepoint.com/extranet/Shared Documents/TEster/test1/text1 - Copy (4).txt" target="_blank">text1 - Copy (4).txt</a></div>
</li>
<li class="file_061e9f12">
<div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
<div><a href="https://addea.sharepoint.com/extranet/Shared Documents/TEster/test1/text1 - Copy (3).txt" target="_blank">text1 - Copy (3).txt</a></div>
</li>
<li class="file_061e9f12">
<div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
<div><a href="https://addea.sharepoint.com/extranet/Shared Documents/TEster/test1/text1 - Copy (2).txt" target="_blank">text1 - Copy (2).txt</a></div>
</li>
</ul>
</li>
<li class="file_061e9f12">
<div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
<div><a href="https://addea.sharepoint.com/extranet/Shared Documents/TEster/text1 - Copy (5).txt" target="_blank">text1 - Copy (5).txt</a></div>
</li>
<li class="file_061e9f12">
<div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
<div><a href="https://addea.sharepoint.com/extranet/Shared Documents/TEster/text1 - Copy.txt" target="_blank">text1 - Copy.txt</a></div>
</li>
</ul>
</li>
<li class="file_061e9f12">
<div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
<div><a href="https://addea.sharepoint.com/extranet/Shared Documents/text1.txt" target="_blank">text1.txt</a></div>
</li>
</ul>
</div>I have encountered an issue with two files in my project. The first file is an HTML document, while the second file is a PHP file called ajax_access_database.php. Originally, I intended for the PHP file to access a database, but complications arose, leadin ...
I am attempting to design a calendar that resembles an actual calendar, but I am facing an issue where all created divs (representing days) are being saved in the first cell. I am not sure how to resolve this. Any help would be greatly appreciated. css . ...
I'm currently working on a project that involves users navigating back and forth between modals. To achieve this, I decided to use CSS transitions to change the opacity from 0 to 1. However, I've encountered some issues with slow transitions. So ...
I'm currently working on developing a new Google Chrome extension that focuses on tab organization. Despite the abundance of similar extensions already available, I am determined to create my own unique solution. One idea I have is to create a popup w ...
I recently implemented Mpdf into my Symfony project using Composer. The installation process involved running the following command: composer require mpdf/mpdf Next, I included the Mpdf.php file in autoload.php. Here is an example of how to use Mpdf in ...
Struggling to figure out how to modify this jQuery code so that only the parent of the clicked button displays its child. Currently, all children are displayed when any button is clicked, not just the one within the targeted parent. I attempted using $(t ...
Is there a way to allow editing of content within a mat-chip component? The process seems simple in HTML: <mat-chip contenteditable="true">Editable content</mat-chip> Check out the StackBlitz demo here While you can edit the content within ...
Being a beginner in Wordpress, I am trying to figure out how to hide the help button on the top right of the dashboard in the admin backend without resorting to plugins or code removal. My plan is to simply add display:none to a CSS file, but I am having ...
Essentially, what I was attempting to do was overlay some text on top of an image on a website I'm creating. After researching online, I learned that I could achieve this by using position absolute and relative, which worked to some extent. However, n ...
I'm encountering a strange issue with containers that have overflow:hidden and when the page URL includes an id. The content gets pushed up and becomes invisible. This problem arises when I apply padding and negative margin at the bottom to create equ ...
I have successfully fixed the first 2 columns of a table, but now there is an extra row showing up in the table header. .headcol { position:absolute; width:7em; top:auto; left: 0px; } .headcol2 { position:absolute; width:15em; top:auto ...
I am attempting to incorporate a transition effect on specific bootstrap buttons. The issue lies with the height and width properties. They change instantly without taking into account the transition duration property. Keep in mind that all other propert ...
Below is the code for my modal: <!-- modal for viewing permissions --> <div id="modal-user-permissions" class="modal"> <div class="modal-content"> <h4 id= ...
I'm having an issue with a page that is supposed to reload the data within a div using jQuery, but it only updates once. Here's a snippet of my code: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0 ...
I am attempting to extract the following comment from the body of an HTML DOM using Selenium: <html> <head class=.....> <body> <script>...</script> <!-- Campaign Name: POC_SITE_MONETIZATION_DEALS_QA Experience Name: SMBelo ...
PPI::HTML has done an impressive job of formatting the HTML highlighting for my Perl code, similar to the example on CPAN. However, I am facing challenges in making the output usable without the appropriate CSS styles. Unfortunately, I am unsure of how to ...
I am working with an SVG stored as a string and making some adjustments to it. The final result is being displayed as text within targetDiv. <html lang="en"> <head> <title>Output Modified</title> </head> <body> ...
How can I create a div box with "id=secret" inside a post that is only visible to the author of the post? I initially made it for the admin, but now I want the id to be visible exclusively to the post's author. For instance: If the author is curren ...
Having recently transitioned to using Meteor 1.3, I've encountered a few challenges related to debugging due to missing imports or exports in tutorials. This particular issue seems to be in the same vein. I wanted to incorporate the autoform package ...
I just recently began learning CSS about a week and a half ago, and I'm facing a challenge that I'm struggling to overcome. I want my webpage to have the same design as shown in this image, but despite trying various solutions, I can't seem ...