News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Pesky Left/Right Scroll Bar

Started by Shades., September 13, 2021, 12:51:23 AM

Previous topic - Next topic

Shades.

2.1RC4

How do I get rid of this scroll bar at the bottom of my post? And if you scroll over there is nothing there. (see attachment)


You cannot view this attachment.You cannot view this attachment.
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Shades.

Yaaahhh I'm learning how to use that browser inspect tool and fixed it myself! At least I think I did it right!? ;D

I changed: (index.css)
Quote/* Posts and personal messages displayed throughout the forum. */
.post {
    overflow: Auto;
    line-height: 1.4em;
    padding: 1px 0;
}

To this:

Quote/* Posts and personal messages displayed throughout the forum. */
.post {
    overflow: 0;
    line-height: 1.4em;
    padding: 1px 0;
}

I set the overflow to "0". Will that cause problems elsewhere? :o 
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Antechinus

The reason it always had auto overflow was so that images larger than the post width would be scrollable, instead of breaking layout. With the CSS in 2.1 limiting images to less than the post width anyway, the auto overflow is unlikely to be necessary.

Zero is not a valid value for overflow, so it will fall back to overflow: visible; (the default in the absence of any valid setting).

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Although it is interesting that you are getting a scrollbar anyway. That implies another bug of some sort.

Shades.

Thanks changed it to visible! And thanks for the link! :)

I'm learning! ;)  8)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Antechinus

#4
Just thought of something. I'm going to do a test post. A floated element last in the post could be problematic with overflow set to visible.

ETA: Just thought of something else that needs testing, namely a RidiculouslyLongStringOfTextAllAsOneHumungousWordWithNoSpacesBetweenLettersToSeeIfThatBreaksLayoutAtAllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll.

ETA2: No problem. :)

You cannot view this attachment.


Antechinus

Ok, yup. It breaks layout. Set it to overflow: hidden; instead. That will be safe even with floated post content.

You can try it yourself on that post, by using your browser's dev tools to change overflow on the .post div.

Shades.

Cool that works too! 8)

I have posted image size set to 600 but there was no image in that text. Just the attachment image thumbnail at the bottom. ???
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

shadav

it's not breaking it here? not that I see anyways

I think it's the .inner you need to play with
just checked here on smf and it has
and in the .inner it has set
word-wrap: break-word;
overflow-wrap: break-word;

what about adding
flex-wrap: wrap;
to either the .inner or the .post

Antechinus

Quote from: shadav on September 13, 2021, 10:06:52 AMwhat about adding
flex-wrap: wrap;
to either the .inner or the .post
No point doing that. Neither of those classes is declared as display: flex; anyway, so adding flex-wrap will have no effect. It should be fine with just hidden overflow.

Although I did test that topic live in IE11, Edge, FF and Chrome and I did not see a scroll bar. I was wondering how Shades managed to generate one.

Shades.

Quote from: Antechinus on September 13, 2021, 03:32:27 PM
Quote from: shadav on September 13, 2021, 10:06:52 AMwhat about adding
flex-wrap: wrap;
to either the .inner or the .post
No point doing that. Neither of those classes is declared as display: flex; anyway, so adding flex-wrap will have no effect. It should be fine with just hidden overflow.

Although I did test that topic live in IE11, Edge, FF and Chrome and I did not see a scroll bar. I was wondering how Shades managed to generate one.
Because I changed it to zero after my first post so when you checked it, it wouldn't show up I guess even tho zero was not correct, the bar had went away. I can set it back temporarily if you want to check it out!? ;)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Antechinus

I set it to auto in my browser, and I still couldn't get a scroll bar with those browsers on W10. ;) Which browser were you using?

Shades.

Wait...Hold the phone Marge! I think I know what's causing it! It's Google ads I bet...cause I just set it back to auto and went back to take a look and it looked like a Dang google ad was trying to load inside the post but was blank and I didn't catch it last time cause I couldn't see it! (yes I installed it but the adds arent supposed to appear in the post, I gotta adjust that...AGAIN)

But it's still set at auto if you want to look, I'm gonna leave it on auto now that I know what it is smdh! Thanks! :laugh:
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Shades.

Quote from: Antechinus on September 13, 2021, 03:55:08 PMI set it to auto in my browser, and I still couldn't get a scroll bar with those browsers on W10. ;) Which browser were you using?
Edge
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Shades.

#13
Quote from: Shades. on September 13, 2021, 04:02:12 PMWait...Hold the phone Marge! I think I know what's causing it! It's Google ads I bet...cause I just set it back to auto and went back to take a look and it looked like a Dang google ad was trying to load inside the post but was blank and I didn't catch it last time cause I couldn't see it! (yes I installed it but the adds arent supposed to appear in the post, I gotta adjust that...AGAIN)

But it's still set at auto if you want to look, I'm gonna leave it on auto now that I know what it is smdh! Thanks! :laugh:
Yep, I took a screen shot! I'm finely learning how to use the inspect tool! :P


You cannot view this attachment.
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Antechinus

Ok, looking at that I'm guessing the width code for that ad div is 100%. So, try this:
.inner .google-auto-placed.ap_container {max-width: 95%}

Shades.

As much as I would like to there's no place to edit that cause it's auto generated. The code I inserted from google goes like this:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-*******************"
     crossorigin="anonymous"></script>
So I will have to just go back to adsense and just do single ads instead of auto generated.

They have an editor on their site to pick and choose which ads areas you want removed and I've removed the same spot several times but the ads still appear wherever they want. So probably best I just go back to single ad placement cause I'm not very experienced with googles adsense nonsense! ;)  :o
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

shadav

ug I hate the auto ads, I refuse to use them because ug yeah no thanks, I want them where I want them not all over the freaking place

so I typically either put a small one in the header or a big one in the footer and then one between posts or I use tinyportal to put one in the sidebar  ;D
well actually I use the ad mod and put it's code into a block on tp for the footer area and sidebar area and then use the ad mod for in between posts and things  ;D

Shades.

Quote from: shadav on September 13, 2021, 05:22:19 PMug I hate the auto ads, I refuse to use them because ug yeah no thanks, I want them where I want them not all over the freaking place

so I typically either put a small one in the header or a big one in the footer and then one between posts or I use tinyportal to put one in the sidebar  ;D
well actually I use the ad mod and put it's code into a block on tp for the footer area and sidebar area and then use the ad mod for in between posts and things  ;D
That sounds like a better plan! ;D

And with the auto ads they end up in your code select boxes too, thats really annoying!
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

shadav

bwahahahaha that's funny oh google you are too much

Antechinus

Quote from: Shades. on September 13, 2021, 05:09:04 PMAs much as I would like to there's no place to edit that cause it's auto generated
You can just add it to the end of your index.css, or any other CSS file. Since the Google code is not declaring max-width at all (afaict from your screenshot) it should work.

Advertisement: