I am currently working on debugging and expanding an express application that showcases a dataset through a series of nested tables on a webpage. Initially, all the CSS resided within style tags in the head section of the HTML file, and the tables were displaying flawlessly across the entire width of the page. The CSS snippet below was responsible for controlling the element's width that we are attempting to showcase:
li.dir span {
color: black;
cursor: auto;
-webkit-box-sizing: border-box ;
-moz-box-sizing: border-box ;
box-sizing: border-box ;
width: 100%;
}
However, after moving the CSS to its separate file and removing the style tags, the style declaration width:100% no longer takes effect.
Upon inspecting the element in question using DevTools, I observed that both Chrome and IE are removing the width:100% attribute from the li.dir span class.
https://i.sstatic.net/7NPzi.png
Realizing that the width is dictated by the parent element, I tried adding the style="width:100%" property to each parent element in an attempt to force this specific style attribute, yet I still couldn't pinpoint where to ensure this particular CSS property works.
The primary div governing the table's placement in the body is provided below:
<div id="url"></div>
<div class="create"></div>
The challenge lies in the fact that the application dynamically inserts DOM elements. Somehow, Chrome automatically adds a style="display: inline-block attribute to an anchor tag acting as the parent to my table data. Despite modifying the only instance in my HTML file with this attribute to width:100%, it persists.
I suspect that display:inline-block is inherited from Bootstrap, but I cannot confirm this.
Below is a snippet of my code pertaining to the parent element insertion. Notice that I'm striving to remove display: inline-block to achieve width:100%. Though display: inline-block isn't explicitly present in my code, it seems to be added by default. How can I eliminate it? Kindly review the code:
table +=
'<ul>' +
'<li class="dir" id="' + title + '">' +
// Anchor tag under scrutiny
'<a id="' + title + 'focus" style="width: 100%;"></a>' +
title +
'<span>' +
'<ul>' +
'<li id=\"' + title + "Table" + '\"></li>' +
'</ul>' +
'</span>' +
'</li>' +
'</ul>';
}
tabobj.push(title);
An inspection in DevTools reveals the following:
https://i.sstatic.net/psZ95.png
Why does it function as intended when the CSS is contained within a style tag in the same HTML file but fails when placed in a separate CSS file?
Furthermore, how can I eliminate the default display:inline-block setting that Chrome and IE seem to be inserting?
If you can provide any guidance on this matter, I would greatly appreciate it. Thank you!
For reference, here is the project on codePen: https://codepen.io/lopezdp/pen/GEzwmP