Help Preventing Blogger from applying its styles to the scrollbar


#1

Can someone tell me what is happening here, and can it be resolved?

How it should look and act:
https://jsfiddle.net/5hc4uc29/

What blogger does to it:
https://testpage34567.blogspot.com/

<style>
  .test {
    width: 266px;
    height: 175px;
    padding: 0;
    margin: 0;
    overflow: auto;
    background: #000;
    list-style: none;
    text-align: left;
  }
  
  .test li {
    padding-bottom: 20px;
  }
  
  .test li:last-of-type {
    padding: 0;
  }
  
  h2 {
    margin: 0;
    line-height: 1;
    font-size: 25px;
    color: #00f;
  }
  
  .test a:link {
    width: 243px;
    height: 20px;
    display: block;
    background: green;
  }
  
  .test a:visited {
    background: #f00;
    color: #000000;
  }
  
  .test a:hover {
    color: #000;
  }
  
  .hide {
    display: none;
  }

</style>

<div class="cover"></div>

<ul class="test ">
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
</ul>

<script>
  (function iife() {
    "use strict";

    function hideClickedElement(evt) {
      var target = evt.target;
      target.classList.add("hide");
      document.querySelector(".test").classList.remove("hide");
    }
    var cover = document.querySelector(".cover");
    cover.addEventListener("click", hideClickedElement, false);
  }());

</script>

#2

I'm having a hard job sorting out your styles from Blogger's on that page. However, the reason that the horizontal scroll bar appears is that the outer container is not wide enough to accommodate the content. (I suspect it might be because of the way Blogger is rendering the vertical scroll bar.)

Increasing the width of .test from 266px to 272px works for me.


#3

This fixed it.

<ul class="scrl hide" style="
margin: 0;padding: 0;">

https://testblog45675.blogspot.com/

<style>
  .cover {
    width: 260px;
    height: 172px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  

  
  .scrl li {
    padding-bottom: 17px;
    color: #00f;
    font-weight: bold;
    font-size: 25px;
font-family: Tahoma;
    line-height: 1;
  }
  
  .scrl li:last-of-type {
    padding: 0;
  }
  
.scrl{
width: 266px;
height: 169px;
text-align: left;
overflow: auto;
background: #000;
list-style: none;


}
  
  .scrl a:link {
    width: 249px;
    height: 20px;
    display: block;
    background: green;
    transition: 0.5s ease-in-out;
  }

.scrl a:hover, 
.scrl a:active, 
.scrl a:focus  {
   background: blue;
  }
  
  .scrl a:visited {
    background: orange;
    color: #000000;
  }
  
  .scrl a:hover {
    background: red;
  }
  
  .hide {
    display: none;
  }

</style>

<div class="cover">Links</div>

<ul class="scrl hide" style="
margin: 0;padding: 0;">
  <li>
    Text
    <a href="" target="blank"></a>
  </li>
  <li>
    Text
    <a href="" target="blank"></a>
  </li>
  <li>
   Text
    <a href="" target="blank"></a>
  </li>
  <li>
    Text 
    <a href="" target="blank"></a>
  </li>
  <li>
    Text
    <a href="" target="blank"></a>
  </li>
  <li>
    Text 
    <a href="" target="blank"></a>
  </li>
  <li>
    Text
    <a href="" target="blank"></a>
  </li>
  <li>
    Text
    <a href="" target="blank"></a>
  </li>
  <li>
    Text
    <a href="" target="blank"></a>
  </li>
  <li>
   Text 
    <a href="" target="blank"></a>
  </li>
  <li>
    Text
    <a href="" target="blank"></a>
  </li>
  <li>
    Text
    <a href="" target="blank"></a>
  </li>
  <li>
    Text
    <a href="" target="blank"></a>
  </li>
  <li>
    Text
    <a href="" target="blank"></a>
  </li>
</ul>

<script>
  (function iife() {
    "use strict";

    function hideClickedElement(evt) {
      var target = evt.target;
      target.classList.add("hide");
      document.querySelector(".scrl").classList.remove("hide");
    }
    var cover = document.querySelector(".cover");
    cover.addEventListener("click", hideClickedElement, false);
  }());

</script>

#4

Why it won't let me use that in the css section, I don't know, and maybe someone on here can figure that out for me.


#5

Your link there is to a different code.


#6

The fixed one, the other one is the broken one. I didn't want to test them both on the same page.


#7

That one has cover enabled, I disabled it on the broken code. The cover wasn't the issue, it was ther scrollbar.


#8

Yes, but as we keep explaining, you can't just copy and paste styles at random from one layout to another.

I have given you a very simple fix for your problem on Blogger with the code in your first post.


#9

The width can't be more than 260 + 3" border.


#10

3px on each edge? = 6px wider or taller unless using {box-sizing:border-box}


#11

Then reduce the width of your .test a:link by 6px instead.


#12

You can't do box-sizing:border-box on a scrollbar.


#13

I give up on the dumb scrollbar.


#14

How many solutions do you need? I've already offered two.

Alternatively, if you're absolutely certain that leaving the content at the right-hand edge hidden by the vertical scrollbar is not a problem, then you could add overflow-x: hidden; to .test. Just remember that that prevents horizontal scrolling, so be very careful where you use it.


#15

This needs to be debugged if someone wants to try and figure out what the issue is, and how to properly resolve it.

Same Code, Both look and act different,

Jsfiddle:
https://jsfiddle.net/xuc92tt3/

vs.

Blogger:
https://debugscroll.blogspot.com/

<style>
  .test {
    width: 266px;
    height: 175px;
    padding: 0;
    margin: 0;
    overflow: auto;
    background: #000;
    list-style: none;
    text-align: left;
  }
  
  .test li {
    padding-bottom: 20px;
  }
  
  .test li:last-of-type {
    padding: 0;
  }
  
  h2 {
    margin: 0;
    line-height: 1;
    font-size: 25px;
    color: #00f;
  }
  
  .test a:link {
    width: 243px;
    height: 20px;
    display: block;
    background: green;
  }
  
  .test a:visited {
    background: #f00;
    color: #000000;
  }
  
  .test a:hover {
    color: #000;
  }

</style>


<ul class="test ">
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
  <li>
    <h2>Text</h2>
    <a href="#" target="blank"></a>
  </li>
</ul>

#17

I was just told this, but the suggestion doesn't solve the issue.

Looks like in the blogspot example your <li> elements are inheriting a 15px padding from a global style declared in the page head section.

Try overriding that with the following css:

li {
    padding: 0;
}

#18

That did work, but still the text is off, and the white horizontal line underneath the div shouldn't be there.


#20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.