Has anyone had the top of their Babble-A Chat Plugin window cut off by their after header and how did you fix this?


(Blu McCormick) #1

Continuing the discussion from Babble - A Chat Plugin:

This plugin ROCKS :guitar: btw.

Thanks in advance.


(Mittineague) #2

I don’t think the issue is the babble plugin but because you added additional header height.

When a page has a “sticky” (position: absolute) fixed height header a typical approach is to tweak the margin of the element below it.

For example, if you temporarily remove the additional header content is the problem resolved?

A problem with using absolutely positioned elements is that they are taken “out of the flow” and use is best kept to a minimum. Though for headers it isn’t usually as much a concern as it is when amid page content.

Use your browsers dev tools to look at the element below the header, then in the CSS pane look for margin-top or margin shortcut rules and tweak.


(Blu McCormick) #3

Thanks, Mittineague. Once I figure this out, I’ll be sure to note that in the Babble - A Chat Plugin thread.

Yes, removing the after header reveals the top of the chat channel.

To my uneducated eye, the position appears to be relative:

Summary

@media (min-width: 900px) {
	.menu {
		font-size: 1.25em;
	}
}
.menu {
	padding: 0.5em;
	min-height: 2em;
}
.menu > ul {
	transition: max-height 0.25s linear;
}
.menu ul {
	padding: 0;
	text-align: center;
}
.menu li {
	transition: visibility 0.25s linear;
	display: inline-block;
	padding: 0.5em 1em;
	position: relative;
}

#bar a,
#bar a:visited {
	color: #484848;
}

#bar a:hover,
#bar a:active,
#bar a.forum-link {
	color: #c30000;
}
@media (max-width: 650px) {
	.menu > ul {
		max-height: 0;
		overflow: hidden;
		margin: 0 auto;
	}
	.menu li {
		visibility: hidden;
		display: block;
		padding: 0.5em 0;
	}
	.menu .navbar-handle {
		display: block;
	}
	#navbar-checkbox:checked + .menu ul {
		max-height: 300px;
	}
	#navbar-checkbox:checked + .menu li {
		visibility: visible;
	}
}

.menu ul,
.menu li,
nav#bar ul,
.menu {
	margin: 0;
}

nav#bar,
nav#bar:before {
	background: white;
}

.navbar-checkbox,
.navbar-handle {
	display: none;
}

.navbar-handle {
	cursor: pointer;
	position: relative;
	font-size: 45px;
	padding: 0.5em 0;
	text-align: center;
}

.menu .navbar-handle {
	font-size: 1em;
	text-transform: uppercase;
	font-weight: bold;
	margin: 0.25em auto;
	padding: 0;
}

#main-outlet {
	padding-top: 120px;
}

nav#bar {
	position: relative;
	margin-bottom: 1em;
	transform: translate(-50%, 0);
	left: 50%;
	z-index: 999;
	top: -60px;
	width: 100vw;
	padding-top: 0;
}

nav#bar:before {
	content: “”;
	position: absolute;
	width: 250vw;
	height: 100%;
	top: 0;
	left: -125vw;
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);
}

.d-header {
	box-shadow: none;
}
.lightbox-wrapper {
    display: block;
    text-align: center;
}

p>img {
    display: block;
    margin: 0 auto; 
}
$categories: LCAG Wiki, Lafayette Colorado Advocacy Group, Site Feedback, Forum Administrators, LCAG Lounge, LCAG Core Leadership;

.categories-list {
	@each $category in $categories {
		&.category-#{$category}:not(.staff) {
			#list-area,
			#navigation-bar {
				display: none;
			}

			.category-navigation {
				> button,
				> .category-notifications-button,
				.category-drop:nth-of-type(2),
				.tag-drop {
					display: none;
				}
			}

			.category-list {
				margin-top: 18px;
			}
		}
	}
}
body {
	&:not(.navigation-categories):not(.navigation-topics) {
		.custom-footer {
			display: none;
		}
	}

	&.navigation-categories,
	&.navigation-topics {
		#main > div:first-child {
			display: flex;
			flex-direction: column;
			min-height: 100vh;
		}

		#main-outlet {
			flex: 1 0 auto;
		}
		
		.custom-footer {
			margin-bottom: 1em;
		}
	}
}

(Mittineague) #4

Ah, it looks like it’s using padding instead of margin.(different, but a lot the same effect-wise)

#main-outlet {
	padding-top: 120px;
}

Try changing the 120px in The Price is Right higher - lower fashion and see if that works.


(Blu McCormick) #5

Thanks, Mittineague.

109px is as far down as I can go in px before the menu’s words are cut off slightly. It gets me a little more of the top of the chat channel (woohoo):

But cuts this off from the top (the part that permits you to switch chat channels):
33%20PM

ADDENDUM:
Changing 120px cuts of the MENU in phone view.


(Blu McCormick) #6

III kindly provided code that fixed the problem. Thanks, @lll. And thanks, @Mittineague for your brainstorming as well.

Here is the code:

> .babble-sidebar .babble-chat {
>     padding-top: 50px;
> }
> 
> nav#bar:before {
>     content: "";
> }

With the following things to keep in mind (quoted from III):

1- This fix is specific to your layout because it’s uses hard-coded values that match the rest of your layout. So while the method may work on your site. It would a bit different on someone else’s

2- The setting in the plugin calculates the height of the header and adjusts the chat window automatically. This would have worked for your site as well if the items have been added inside the header.

However, they are not, it’s an illusion and they just look like they are one part because of the shared background color and lack of spacing in between them.

So as far as the plugin setting is concerned, the header height has not changed and that’s way it doesn’t work in your case.


(Jerry) #7

Hi, many thanks for this post!

I found that the code above didn’t quite fix the problem for me (caused by custom header). The top of the Babble sidebar was still being hidden, particularly when trying to switch between channels. I found this code worked (and I also raised up the bottom of the sidebar a bit as it is otherwise squished right down at the bottom):

.babble-sidebar {
    margin-top: 82px;
    height: calc(100% - 92px);
    margin-bottom: 10;
}

Adjust the 82px (let’s call that X) above to account for the height of your header, which I found works at around X-1 (our header height is 81px) and I added margin of say 10 (call that Y) at the bottom, then height of sidebar is 100%-(X+Y)