Why is my SVG element not appearing? (even when Inspecting my webpage)

Question

So I tried to include an SVG element to my drop-menu, and I included the SVG attribute. However, it doesn't seem to be considered by any browser; even when inspecting the page, I cannot find the SVG attribute anywhere. Below is a sample of the code (notice I'm using CSS's utility framework Tailwind).

I tried changing the place of the SVG element by placing it outside of the select element but still into the span element. This time, the SVG element was visible. However -and naturally- it was outside of the select element, rather on the extreme right (Even tho after inspecting the span element, it clearly contains the "category" space. I thought It could be a browser problem, so I tried on other ones (I'm using Chrome) and on the Tailwind playground, and nothing changes. Does anyone have a solution?

idk wut to put here · Accepted Answer

You are putting svg inside a select tag.

A select tag only accepts two children:

option
optgroup

All other elements are ignored.

Here the two elements render inside.

Let's take a look at your code:

The svg is inside the select.

Move it out!

For making the < on the right:

svg {
    position: absolute;
    right:0;
}

It works when the select is on the top:

svg {
    position: absolute;
    right: 0;
}

Look what happens if you have stuff above! It works:

svg {
  position: absolute;
  right: 0;
}

this is bold iqjr 98qc0 v0q89ure qoicqje oqircjoe iaewc r

This also works:

table {
  width: 100%;
}
#triangle {
  text-align:right;
}

this is bold ercjieo aceijrop ioejcrpa aeijrcop aeijopcr aeiojcr aeiojr aij eirojtper ieorjc

But don't use a table tag. They carry semantic meaning!

Tables are supposed to carry data:

col1	col2
data	more data
data	more data
data	more data

But what if it didn't carry data?

Stack Overflow	Questions
Home	Why is my SVG element not appearing? (even when Inspecting my webpage)
Users	Why is my SVG element not appearing? (even when Inspecting my webpage)

This is bad for screen readers.

So use display:table; instead.

.faketable {
  display:table;
}
.faketable>div {
  display:table-row;
}
.faketable>div>div {
  display:table-cell;
  padding:7px;
}



Cell One (aruc b)
Cell Two (ierjc eijac)


Cell Three (qrc a)
Cell Four (caf vfjj)

So the second method should look more like this:

.faketable {
  width: 100%;
}

#triangle {
  text-align: right;
}

.faketable {
  display: table;
}

.faketable>div {
  display: table-row;
}

.faketable>div>div {
  display: table-cell;
  padding: 7px;
}

this is bold ercjieo aceijrop ioejcrpa aeijrcop aeijopcr aeiojcr aeiojr aij eirojtper ieorjc

And if you want an image inside a select tag, you could use a custom dropdown:

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = document.getElementById('content');
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

function hide(element) {
  var x = document.getElementsByClassName("options");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "white";
  }
  document.getElementById('content').style.display = 'none';
  element.style.backgroundColor = "#00ffff"
}

.options:hover {
  background-color: #00dddd !important;
}

#buttons,
.options {
  cursor: pointer;
}

.options {
  border: 1px solid black;
  background-color: white;
}

#content {
  position: fixed;
  top: 1em;
}

svg {
  position: absolute;
  right: 0;
}


  
      
  
  
    
      
        option 1
        option 2
        option 3

Why is my SVG element not appearing? (even when Inspecting my webpage)

Answers (1)

Related Questions