csstudent csstudent - 4 months ago 9
CSS Question

Can't highlight text inside <div> and <ul>

Run the snippet to see what I mean. I don't understand why I can't use the mouse to select/highlight any text within

<div class="attributes">
. I can drag over the whole div to select it all, but not portions of the text itself. I tried setting a z-index but that didn't change anything so I took it out.

Is something with this element hierarchy causing the problem?


  • <div class="hierarchy">



    • <ul>



      • <li class="id ">



        • <div class="attributes">



          • <div class="col description">

            ... and so on.







I've tried this in Firefox, Chrome, and Safari on Mac but no luck.



div.id_text {
display: inline-block;
width: 6em;
}

div.hierarchy ul {
padding: 0;
margin: 0.5em;
border-style: solid;
border-width: 1px;
border-color: lightgray;
}

div.hierarchy ul ul {
margin-left: 2em;
}

div.hierarchy li {
list-style: none;
padding: 0.5em;
pointer-events: none;
}

div.hierarchy li:nth-child(even) {
background-color: #eaeaea;
}

div.hierarchy li:nth-child(odd) {
background-color: white;
}

div.hierarchy li:before {
pointer-events: all;
color: blue;
}

div.hierarchy li.id:before {
display: inline-block;
margin-right: 0.5em;
font-family: FontAwesome;
content: "\f078";
}

div.hierarchy li.id_collapsed:before {
transform: rotate(270deg);
}

div.hierarchy li.id_leafNode:before {
display: inline-block;
color: black;
}

div.hierarchy li.id_collapsed ul {
display: none;
}

div.attributes {
display: inline-table;
float: right;
width: calc(100% - 8em);
}

div.col {
display: table-cell;
/*! padding-left: 1em; */
/*! padding-right: 1em; */
width: 25%;
padding-left: 0.5em;
padding-right: 0.5em;
}

<div class="hierarchy">
<ul>
<li class="id ">
<div class="id_text">36205</div>
<div class="attributes">
<div class="col description">My Assembly</div>
<div class="col mpn">555</div>
<div class="col qty">undefined</div>
<div class="col refdes">undefined</div>
</div>
<ul id="36205">
<li class="id_leafNode">
<div class="id_text">36184</div>
<div class="attributes">
<div class="col description">mydesc2</div>
<div class="col mpn">mympn2</div>
<div class="col qty">1000</div>
<div class="col refdes">null</div>
</div>
</li>
<li class="id">
<div class="id_text">36203</div>
<div class="attributes">
<div class="col description">Parent part</div>
<div class="col mpn">1234</div>
<div class="col qty">10</div>
<div class="col refdes">2
</div>
</div>
<ul id="36203">
<li class="id_leafNode">
<div class="id_text">36184</div>
<div class="attributes">
<div class="col description">mydesc2</div>
<div class="col mpn">mympn2</div>
<div class="col qty">99</div>
<div class="col refdes">Test</div>
</div>
</li>
<li class="id_leafNode">
<div class="id_text">36185</div>
<div class="attributes">
<div class="col description">mydesc3</div>
<div class="col mpn">mympn3</div>
<div class="col qty">1</div>
<div class="col refdes">
</div>
</div>
</li>
<li class="id_leafNode">
<div class="id_text">36186</div>
<div class="attributes">
<div class="col description">mydesc4</div>
<div class="col mpn">mympn4</div>
<div class="col qty">1</div>
<div class="col refdes">
</div>
</div>
</li>
<li class="id_leafNode">
<div class="id_text">36187</div>
<div class="attributes">
<div class="col description">mydesc5</div>
<div class="col mpn">mympn5</div>
<div class="col qty">1</div>
<div class="col refdes">
</div>
</div>
</li>
<li class="id_leafNode">
<div class="id_text">36188</div>
<div class="attributes">
<div class="col description">mydesc6</div>
<div class="col mpn">mympn6</div>
<div class="col qty">1</div>
<div class="col refdes">
</div>
</div>
</li>
<li class="id_leafNode">
<div class="id_text">36189</div>
<div class="attributes">
<div class="col description">mydesc7</div>
<div class="col mpn">mympn7</div>
<div class="col qty">1</div>
<div class="col refdes">
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>




Answer

Remove pointer-events from div.hierarchy li

or change to all

div.hierarchy li {
  list-style: none;
  padding: 0.5em;
  pointer-events: all;
}