asasass
November 12, 2017, 8:57am
1
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>
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
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>
asasass
November 12, 2017, 9:46am
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.
asasass:
This fixed it.
Your link there is to a different code.
asasass
November 12, 2017, 9:51am
6
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
7
That one has cover enabled, I disabled it on the broken code. The cover wasn’t the issue, it was ther scrollbar.
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
9
The width can’t be more than 260 + 3" border.
ronpat
November 12, 2017, 10:00am
10
3px on each edge? = 6px wider or taller unless using {box-sizing:border-box}
Then reduce the width of your .test a:link
by 6px instead.
asasass
November 12, 2017, 10:02am
12
You can’t do box-sizing:border-box
on a scrollbar.
asasass
November 12, 2017, 10:12am
13
I give up on the dumb scrollbar.
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
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:
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
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;
}
asasass
November 15, 2017, 8:48am
18
TechnoBear:
overflow-x: hidden;
That did work, but still the text is off, and the white horizontal line underneath the div shouldn’t be there.
system
Closed
April 5, 2018, 9:37pm
20
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.