Streamed-in post controls off to the side

sloosecannon

Not sure what the cause is, but very easily seen here.

I also managed to grab the HTML of the two posts to compare...

0_1458502022922_upload-c21fa404-db2b-4b33-9d85-e08c59a48026

First post:

<li component="post" class="" data-index="41" data-pid="853099" data-uid="1" data-username="ben_lubar" data-userslug="ben_lubar" itemscope="" itemtype="http://schema.org/Comment">
				<a component="post/anchor" data-index="41" name="41"></a>

				<meta itemprop="datePublished" content="2016-03-20T19:24:16.978Z">
				<meta itemprop="dateModified" content="">

<div class="clearfix">
	<div class="icon pull-left">
		<a href="/user/ben_lubar">
						<img component="user/picture" data-uid="1" src="/uploads/default/13696/81da2ea821746913.png" align="left" itemprop="image">
			<i component="user/status" class="fa fa-circle status online" title="Online"></i>

		</a>
	</div>

	<small class="pull-left">
		<strong>
			<a href="/user/ben_lubar" itemprop="author" data-username="ben_lubar" data-uid="1">ben_lubar</a>
		</strong>

<a href="/groups/administrators"><small class="label group-label inline-block" style="background-color: #000000;">♿</small></a>

		

		<div class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
			<a class="permalink" href="/topic/19281/nodebb-misfeatures-big-picture-stuff-only/42"><span class="timeago" title="Sun Mar 20 2016 15:24:16 GMT-0400 (Eastern Daylight Time)">about a minute ago</span></a>

			<i class="fa fa-pencil-square pointer edit-icon hidden"></i>

			<small data-editor="" component="post/editor" class="hidden">last edited by  <span class="timeago" title="Invalid Date"></span></small>

						<button component="post/parent" class="btn btn-xs btn-default hidden-xs" data-topid="853094"><i class="fa fa-reply"></i> @RaceProUK</button>

			<span>
				
			</span>
		</div>
		<span class="bookmarked"><i class="fa fa-bookmark-o"></i></span>

	</small>
</div>

<br>

<div class="content" component="post/content" itemprop="text">
	<p><a class="plugin-mentions-a" href="https://what.thedailywtf.com/user/raceprouk">@RaceProUK</a> said:</p><span>
</span><blockquote>
<p>They still exist; they're just not displayed on posts</p>
</blockquote><span>
</span><p>yes they are, you just have to click on the pony.</p><span>
</span>
</div>

<div class="clearfix">
	

	<small class="pull-right">
		<span class="post-tools">
			<a component="post/reply" href="#" class="no-select ">Reply</a>
			<a component="post/quote" href="#" class="no-select ">Quote</a>
		</span>

				<span class="votes">
			<a component="post/upvote" href="#" class="">
				<i class="fa fa-chevron-up"></i>
			</a>

			<span component="post/vote-count" data-votes="0">0</span>

						<a component="post/downvote" href="#" class="">
				<i class="fa fa-chevron-down"></i>
			</a>
		</span>

<span component="post/tools" class="dropdown moderator-tools ">
	<a href="#" data-toggle="dropdown"><i class="fa fa-fw fa-ellipsis-v"></i></a>
	<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
</span>

	</small>
</div>

<hr>

			</li>

Second post:

<li component="post" class="new" data-index="41" data-pid="853099" data-uid="1" data-username="ben_lubar" data-userslug="ben_lubar" itemscope="" itemtype="http://schema.org/Comment">
				<a component="post/anchor" data-index="41" name="41"></a>

				<meta itemprop="datePublished" content="2016-03-20T19:24:16.978Z">
				<meta itemprop="dateModified" content="">

<div class="clearfix">
	<div class="icon pull-left">
		<a href="/user/ben_lubar">
						<img component="user/picture" data-uid="1" src="/uploads/default/13696/81da2ea821746913.png" align="left" itemprop="image">
			<i component="user/status" class="fa fa-circle status online" title="Online"></i>

		</a>
	</div>

	<small class="pull-left">
		<strong>
			<a href="/user/ben_lubar" itemprop="author" data-username="ben_lubar" data-uid="1">ben_lubar</a>
		</strong>

<a href="/groups/administrators"><small class="label group-label inline-block" style="background-color: #000000;">♿</small></a>

		

		<div class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
			<a class="permalink" href="/topic/19281/nodebb-misfeatures-big-picture-stuff-only/42"><span class="timeago" title="Sun Mar 20 2016 15:24:16 GMT-0400 (Eastern Daylight Time)">about a minute ago</span></a>

			<i class="fa fa-pencil-square pointer edit-icon hidden"></i>

			<small data-editor="" component="post/editor" class="hidden">last edited by  <span class="timeago" title="Invalid Date"></span></small>

						<button component="post/parent" class="btn btn-xs btn-default hidden-xs" data-topid="853094"><i class="fa fa-reply"></i> @RaceProUK</button>

			<span>
				
			</span>
		</div>
		<span class="bookmarked"><i class="fa fa-bookmark-o"></i></span>

	</small>
</div>

<br>

<div class="content" component="post/content" itemprop="text">
	<p><a class="plugin-mentions-a" href="https://what.thedailywtf.com/user/raceprouk">@RaceProUK</a> said:</p><span>
</span><blockquote>
<p>They still exist; they're just not displayed on posts</p>
</blockquote><span>
</span><p>yes they are, you just have to click on the pony.</p><span>
</span>
</div>

<div class="clearfix">
	

	<small class="pull-right">
		<span class="post-tools">
			<a component="post/reply" href="#" class="no-select ">Reply</a>
			<a component="post/quote" href="#" class="no-select ">Quote</a>
		</span>

				<span class="votes">
			<a component="post/upvote" href="#" class="">
				<i class="fa fa-chevron-up"></i>
			</a>

			<span component="post/vote-count" data-votes="0">0</span>

						<a component="post/downvote" href="#" class="">
				<i class="fa fa-chevron-down"></i>
			</a>
		</span>

<span component="post/tools" class="dropdown moderator-tools hidden">
	<a href="#" data-toggle="dropdown"><i class="fa fa-fw fa-ellipsis-v"></i></a>
	<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
</span>

	</small>
</div>

<hr>

			</li>

loopback0

It's not just for streamed in posts.

See: https://what.thedailywtf.com/topic/19204/missing-cut-off-bookmark-and-flag-for-post/2

sloosecannon

@loopback0 said:

It's not just for streamed in posts.

See: https://what.thedailywtf.com/topic/19204/missing-cut-off-bookmark-and-flag-for-post/2

Hmm yeah so it's already been reported.......

Just to make sure I didn't miss something... is the html of those two identical (except for class="new" on the one)?

sloosecannon

@sloosecannon said:

@loopback0 said:

It's not just for streamed in posts.

See: https://what.thedailywtf.com/topic/19204/missing-cut-off-bookmark-and-flag-for-post/2

Hmm yeah so it's already been reported.......

Just to make sure I didn't miss something... is the html of those two identical (except for class="new" on the one)?

Nope.

Found it.

-~~<span component="post/tools" class="dropdown moderator-tools">~~
+<span component="post/tools" class="dropdown moderator-tools hidden">

For whatever reason .hidden breaks the layout

RaceProUK

All .hidden does is this:

.hidden {
    display: none !important;
}

So if streamed-in posts weren't given this class, it'd be fine.

sloosecannon

@RaceProUK said:

All .hidden does is this:
.hidden {
    display: none !important;
}
So if streamed-in posts weren't given this class, it'd be fine.

That bug just happened with this post (ironically...) and removing .hidden fixed it. It's probably because the moderator tools (3 dot menu?) becoming display: noned breaks the layout...

ben_lubar

fix post tools not showing up for other users on new posts by BenLubar · Pull Request #4418 · NodeBB/NodeBB

(src/topics/posts.js has this condition already) fixes #4400

sloosecannon

@ben_lubar