CODEWITHSUNDEEP
cssgoogle-chromeabsoluteoutline
Suhail Keyjani
Suhail Keyjani

Reputation: 488

css outline do not extend to include all interior elements when hav absolute elements only in chrome

I have test the following code on firefox and work well, but when test it on chrome the outline did not include all of the elements on firefox on chrome 

function ShowHideList(elem) {
    var container = document.getElementById("container")
    var islist = container.getAttribute("islist")
    if (islist == "0") {
        elem.value="Hide"
        container.setAttribute("islist","1")
    } else {
        elem.value="Show"
        container.setAttribute("islist","0")
    }
}
.container{
    outline:1px solid red;
    position:relative;
}
.container ul{
    position:absolute;
    top:10px;
    left:10px;
}
.container[islist='0'] ul{
    display:none;
}
.container[islist='1'] ul{
    display:block;
}
<div id="container" class="container" islist="0">
    <input type="button" onclick="ShowHideList(this)" value="Show" />
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</div>

Upvotes: 0

Views: 175

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

It's because the ul is absolutely positioned. (It's actually surprising that it does work in Firefox.)

Besides that, you could simplify your code by toggling a classList:

function ShowHideList(elem) {
  var container = document.getElementById("container")
  container.classList.toggle('shown');
  elem.value = elem.value === 'Hide' ? 'Show' : 'Hide';
}


function ShowHideList(elem) {
  var container = document.getElementById("container")
  container.classList.toggle('shown');
  elem.value = elem.value === 'Hide' ? 'Show' : 'Hide';
}
.container {
  outline: 1px solid red;
  position: relative;
}
.container ul {
  top: 10px;
  left: 10px;
}
.container ul {
  display: none;
}
.container.shown ul {
  display: block;
}
<div id="container" class="container" islist="0">
  <input type="button" onclick="ShowHideList(this)" value="Show" />
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
  </ul>
</div>

Since the ul needs to be absolutely-positioned, you could add a div as a child of the container, which is absolutely positioned. Move the outline to it, and hard-code a height on the container to show the button only.

function ShowHideList(elem) {
  var container = document.getElementById('container'),
      ul = container.querySelector('ul'),
      height;
  
  container.classList.toggle('shown');
  elem.value = elem.value === 'Hide' ? 'Show' : 'Hide';
}
.container {
  position: relative;
  height: 24px;
}
.container div {
  position: absolute;
  outline: 1px solid red;
  width: 100%;
  background: white;
}
.container ul {
  display: none;
}
.container.shown ul {
  display: block;
}
<div id="container" class="container">
  <div>
    <input type="button" onclick="ShowHideList(this)" value="Show" />
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
  </div>
</div>

<span>Hiiiiiiiii!</span>

Upvotes: 1

Related Questions