Help Preventing Blogger from applying its styles to the scrollbar

asasass · November 12, 2017, 8:57am

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

How it should look and act:

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>

TechnoBear · November 12, 2017, 9:34am

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.

asasass · November 12, 2017, 9:44am

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>

asasass · November 12, 2017, 9:46am

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.

TechnoBear · November 12, 2017, 9:50am

Your link there is to a different code.

asasass · November 12, 2017, 9:51am

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

asasass · November 12, 2017, 9:53am

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

TechnoBear · November 12, 2017, 9:54am

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.

asasass · November 12, 2017, 9:56am

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

ronpat · November 12, 2017, 10:00am

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

TechnoBear · November 12, 2017, 10:01am

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

asasass · November 12, 2017, 10:02am

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

asasass · November 12, 2017, 10:12am

I give up on the dumb scrollbar.

TechnoBear · November 12, 2017, 10:17am

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.

asasass · November 14, 2017, 10:22pm

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:

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>

asasass · November 15, 2017, 12:18am

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;
}

asasass · November 15, 2017, 8:48am

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

system · April 5, 2018, 9:37pm

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