Accordion Panel Increases or Decrease based on Zoom

admin3100 · March 9, 2023, 4:00am

Hi I’m doing up a company site and ran into some issues with the code. Basically the accordion panel when zoomed in or out will increase or decrease, so it will “overflow” or be shorter than the accordion bar. Ideally it is supposed to “flow” with the accordion no matter at what resolution or zoom setting (or browser for that matter).

I’m not really proficient with coding (really beginner level), this code was written by a friend. I’m just wondering is there a better way to do it as such. Writing more @media conditions seemed to be ignored or nothing happens. Suspect the issue is under .Panel section. Posting here as I think the community of mentors seems quite approachable and capable.

Side note: This website is built on StandOut platform, where coding is a bit rigid. If we want any customisation, we have to hard code around the pre-built settings.

This is the code below:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

* {
  
}


@media screen and (min-width: 300px) and (max-width: 700px) {
.hp{
  display: block;
  float: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  width: 140px;
  height:80px;
  box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.columnp {
  float: left;
  width: 50%; 
}

/* Clear floats after the columns */
.rowp:after {
  content: "";
  display: table;
  clear: both;
}
.accordion {
  background-color: #8494cb;
  color: white;
  cursor: pointer;
  width: 84%;
  border: none;
  text-align: left;
  outline: none;
  padding: 3px;
  float: left;
  vertical-align: top;
  font-size: 7px;
  font-family: sans-serif;
  transition: 0.4s;
  
}


.active, .accordion:hover {
  background-color: #8c94cc; 
  color: white;
}

.panel {
  padding: 0 3px;
  width:80.8%;
  display: none;
  background-color: #6d7dbd;
  overflow: hidden;
  color: inherit;
  font-family: sans-serif;
  font-size:7px;
  opacity: 0.6;
  border: none;
  float: left;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.accordion:after {
  content: '\002B';
  font-size: 7px;
  color: #white;
  font-weight: bold;
  float: right;
}

.active:after {
  content: "\2212";
}

}


@media screen and (min-width: 700px) and (max-width: 1146px) {
.hp{
  display: block;
  float: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
  width: 320px;
  height:240px;
  box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.columnp {
  float: left;
  width: 50%; 
}

/* Clear floats after the columns */
.rowp:after {
  content: "";
  display: table;
  clear: both;
}
.accordion {
  background-color: #8494cb;
  color: white;
  cursor: pointer;
  width: 86%;
  border: none;
  text-align: left;
  outline: none;
  padding: 5px;
  float: left;
  vertical-align: top;
  font-size:12px;
  font-family: sans-serif;
  transition: 0.4s;

}


.active, .accordion:hover {
  background-color: #8c94cc; 
  color: white;
}

.panel {
  padding: 0 10px;
  width:80.9%;
  display: none;
  background-color: #6d7dbd;
  overflow: hidden;
  color: inherit;
  font-family: sans-serif;
  font-size:12px;
  opacity: 0.6;
  border: none;
  float: left;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.accordion:after {
  content: '\002B';
  font-size: 12px;
  color: #white;
  font-weight: bold;
  float: right;
}

.active:after {
  content: "\2212";
}


}


@media screen and (min-width: 1299px) {
.hp{
    float:center;
    margin-left: 34%;
    margin-right: 34%;
    display: block;
    box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.columnp {
  float: left;
  width: 50%;

}

/* Clear floats after the columns */
.rowp:after {
  content: "";
  display: table;
  clear: both;
  padding-bottom: 8.5em;
}
.accordion {
  background-color: #8494cb;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 68%;
  border: none;
  text-align: left;
  outline: none;
  float: left;
  font-size: 15px;
  font-family: sans-serif;
  transition: 0.4s;
  
}


.active, .accordion:hover {
  background-color: #8c94cc; 
  color: white;
}

.panel {
  padding: 0 20px;
  width:63.4%;
  display: none;
  background-color: #6d7dbd;
  overflow: hidden;
  color: inherit;
  font-family: sans-serif;
  font-size:15px;
  opacity: 0.6;
  border: none;
  float: left;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.accordion:after {
  content: '\002B';
  font-size: 13px;
  color: #white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

}
</style>
</head>
<body>
<div class="rowp">
  <div class="columnp" >
    <img src="https://raw.githubusercontent.com/adminHeng/WBSH/main/ux-gun-5Mj4PO7KIFc-unsplash.jpg" alt="Smiley face image" class = "hp" width="480"
    height="380">
  </div>
  
  <div class="columnp" >
<button class="accordion">MILITARY</button>
<div class="panel">
    <ul>
<li>TENGAH AIRBASE</li>
<li>CHANGI AIRBASE</li>
<li>RIFLE RANGE CAMP</li>
</ul>
</div>



</div>
</div>

<div class="rowp">
  <div class="columnp" >
    <img src="https://raw.githubusercontent.com/adminHeng/WBSH/main/yamin-ohmar-l8TYuY4wlyQ-unsplash.jpg" alt="Smiley face image" class = "hp" width="480"
    height="380">
 </div>
 
  <div class="columnp" >
<button class="accordion">PRIVATE RESIDENTIAL</button>
<div class="panel">
    <ul>
<li>TENET EXECUTIVE CONDOMINIUM</li>
<li>AMBER PARK</li>
</ul>
</div>


</div>
</div>
<div class="rowp">
  <div class="columnp" >
    <img src="https://raw.githubusercontent.com/adminHeng/WBSH/main/peerapon-chantharainthron-kavu6S_qtYo-unsplash.jpg" alt="Smiley face image" class = "hp" width="480"
    height="380">
  </div>
  
  <div class="columnp" >
<button class="accordion">TRANSPORT/INFRASTRUCTURE</button>
<div class="panel">
    <ul>
<li>JURONG EAST LTA HUB J120</li>
</ul>
</div>


</div>
</div>

<div class="rowp">
  <div class="columnp" >
    <img src="https://raw.githubusercontent.com/adminHeng/WBSH/main/mk-s-WHf1wtNMMLU-unsplash.jpg" alt="Smiley face image" class = "hp" width="480"
    height="380">
  </div>
  
  <div class="columnp" >
<button class="accordion">RECREATIONAL</button>
<div class="panel">
    <ul>
<li>BOTANIC GARDEN</li>
<li>MANDAI BIRD PARADISE</li>
<li>CHENGKAT COMMUNITY CENTRE</li>
<li>PALAWAN BEACH SENTOSA</li>
<li>SEMBAWANG SPORTS HUB</li>
</ul>
</div>


  </div>
</div>

<div class="rowp">
  <div class="columnp" >
    <img src="https://raw.githubusercontent.com/adminHeng/WBSH/main/american-public-power-association-RQpeu8lbti4-unsplash.jpg" alt="Smiley face image" class = "hp"     width="480"
    height="380">
  </div>
  
  <div class="columnp" >
<button class="accordion">SUBSTATION</button>
<div class="panel">
    <ul>
        <li>LABRADOR SUBSTATION</li>
        <li>JURONG NEA SUBSTATION</li>
        <li>TENGAH SUBSTATION</li>
    </ul>
</div>


  </div>
</div>


<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
</html>

Hope someone can assist with this! Much appreciated. Thanks.
Lemuel

m_hutley · March 9, 2023, 11:17am

I’m not quite… sure… what you’re describing here, but if you’re expecting the panel to be the same size as the header bit…

86 != 80.9. So… yeah. The panel’s gonna be smaller. Because you told it to be smaller.

PaulOB · March 9, 2023, 2:08pm

Here’s a very quick re-write of the css to use flex instead of floats and avoids any specific widths. I did not change your html as I assumed you were tied to that and I made no changes to the js.

The code is a lot more concise and simpler to work with. You also made the mistake of repeating everything in your media queries and including min and max width media queries which you will rarely need. Choose one or the other and only add the differences in the media queries.

The re-write only needs one simple media query and 2 lines of code to change to vertical for smaller screens.

admin3100 · March 10, 2023, 7:26am

Hi Hutley,

Yea the reason being is that if I put both widths at 86%. The panel one will jut out. Hence, it’s like a balancing act to get it to be equal. But it doesn’t stay equal for all screen sizes/zoom sizes/browser type.

So it’s like if I look at it from my screen its perfect in those settings, but if I zoom in or out everything jumbles up. Hope I made some sense.

admin3100 · March 10, 2023, 7:42am

Hi Paul code works great thanks for your time to rewrite it!

As mentioned StandOut is quite rigid when it comes to customised code, as they run on preset templates. So customised code may clash with their website style.

So here are some issues I faced while running the code:

I had to remove
html {

box-sizing: border-box;*
}
*,
*:before,
*:after {
box-sizing: inherit;*
}
html,
body {
margin: 0;*
padding: 0;*
}
as it would un-centre the header. So I placed border-box into .rowp and .columnp instead.

The word sizing became very minute after applying the code.

Take a look at this test site I replicated, for an understanding of what I mean:
https://app.standout.digital/viewer/vbid-a1a44-qe4uouzo/vbid-a1a44-wnyap4lm

If you view page source, you could perhaps see what clashes with their code to cause this.

PaulOB · March 10, 2023, 7:49am

Ah ok. I’m not at the computer at the minute but I’ll take a look later as it shouldn’t be a problem to make the code specific to that section only.

PaulOB · March 10, 2023, 8:06am

Ok, I just had a quick look and the main problem is that your system is setting the html element to be a font-size of 1px.

html {
    -webkit-text-size-adjust: 100%;
    font-size: 1px;
}

I’ve no idea why it would do that but it seems a very old and antiquated system that is using a number of invalid techniques and incorrect assumptions (such as trying to inherit a percentage min-height which is simply not possible and never has been).

As you mention you have no control over this code then you will have to look at the places in my code where I have said font-size:1rem and change that to a pixel size (font-size:16px) as 1em equates to the base size of the html which your system has made 1px for some strange reason

So look at the code I gave you and everywhere that I have used rem please change to px of a suitable value (1 rem is usually around 16px) and it will work (it won’t be good for accessibility but there is no other choice unless you can change the font setting on the html element).

I also notice a typo crept into my version and there was an extra ‘x’ on ‘boxx’ that needs removing. boxx-shadow should be box-shadow (apologies).

admin3100 · March 10, 2023, 8:23am

You’re a genius Paul!

Thank you, it works!!
Many thanks.