Content below action bar staggered.

[Symphony 🎻]

Hello!

So I'm having this issue and it's a curious one. I'm not quite sure what we call it but I'm going to attempt to show the issue through pictures.



so this is the first page of one of my forum threads but as more and more posts are added the bar starts to slide down the post.

It eventually ends up like this:




I thought it had something to do with the mini but I'm not sure? Any help would be appreciated!

Edit: it doesn't happen on ALL threads only some and it isn't a case of there being too many blockquotes.

[Nscalerr]

Hi Symphony 🎻

A link to your forum with a publicly viewable thread which has the problem, would be useful, so people can see what is going on.

[Symphony 🎻]

Sept 7, 2020 4:57:28 GMT -8 Nscalerr said:

Hi Symphony 🎻

A link to your forum with a publicly viewable thread which has the problem, would be useful, so people can see what is going on.

Ah, yeah that would help wouldn't it? xD

HERE AND HERE

[Nscalerr]

After taking a look at the forum and having a peek at the source code, (via the right click menu), it appearts you have a couple of coding errors, (I think) in the mini-profile code. Could you post it here in Spoiler tags for me to take a look at.

[Symphony 🎻]

Sept 7, 2020 21:42:06 GMT -8 Nscalerr said:

After taking a look at the forum and having a peek at the source code, (via the right click menu), it appearts you have a couple of coding errors, (I think) in the mini-profile code. Could you post it here in Spoiler tags for me to take a look at.

SPOILER: Click to show

<div class="$[miniprofile_class]">

$[user]<br />

{if $[user.is_guest]}PASSERBY<br />{/if}

{if $[user.is_deleted]}<em>A LOST SOUL</em><br />{/if}

{if $[user.group]}

$[user.group.name]<br />

{elseif $[user.rank]}

$[user.rank.name]<br />

{if $[user.rank.stars]}

$[user.rank.stars]<br />

{/if}

{/if}

{if $[user.custom_title]}$[user.custom_title]<br />{/if}

$[user.warning.bar]

<br />

{if $[user.avatar]}

<div class="avatar">$[user.avatar]</div><br />

{/if}

<div class="infostatus">

<div class="memberstatus online">{if $[user.is_online]}ONLINE{else}OFFLINE{/if}</div></div>

{if $[user.is_member]}<br>



<div class="info">

<span class="$[user.mini_custom_field.content_class]">POSTS: $[user.posts] </span>



{foreach $[user.mini_custom_field]}

{if $[user.mini_custom_field.name] == "APPLICATION"}

<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: <a href="$[user.mini_custom_field.value]"></a></span>

{elseif $[user.mini_custom_field.name] == "PLOTTER"}

<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: <a href="$[user.mini_custom_field.value]"></a></span>

{elseif $[user.mini_custom_field.name] == "TRACKER"}

<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: <a href="$[user.mini_custom_field.value]"></a></span>

{elseif $[user.mini_custom_field.name] == "THEME"}

<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: <a href="$[user.mini_custom_field.value]"></a></span>

{else}

<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]

{/if}

{/foreach}

</div>



{if $[user.badges_miniprofile]}

<div class="$[user.badges_miniprofile_container_class]">

{foreach $[user.badges_miniprofile]}

$[user.badges_miniprofile.icon]

{/foreach}

</div>

{/if}

here you go and thank you!

[Nscalerr]

I had a look at the code and you were missing a closing </span> and </div> tag, which I have added in.

When your coding, always take a look towards the bottom of the code and make sure you don't have anything that is bright red, if you do, it means you have a coding error further up.

See if this fixes the problem.

<div class="$[miniprofile_class]">
   $[user]<br />
   {if $[user.is_guest]}PASSERBY<br />{/if}
   {if $[user.is_deleted]}<em>A LOST SOUL</em><br />{/if}
   {if $[user.group]}
   $[user.group.name]<br />
   {elseif $[user.rank]}
   $[user.rank.name]<br />
   {if $[user.rank.stars]}
   $[user.rank.stars]<br />
   {/if}
   {/if}
   {if $[user.custom_title]}$[user.custom_title]<br />{/if}
   $[user.warning.bar]<br />
   {if $[user.avatar]}
   <div class="avatar">$[user.avatar]</div><br />
   {/if}
   <div class="infostatus">
       <div class="memberstatus online">
           {if $[user.is_online]}ONLINE{else}OFFLINE{/if}
       </div>
   </div>
   {if $[user.is_member]}<br />
   <div class="info">
       <span class="$[user.mini_custom_field.content_class]">POSTS: $[user.posts]</span>
       {foreach $[user.mini_custom_field]}
       {if $[user.mini_custom_field.name] == "APPLICATION"}<br />
       <span class="$[user.mini_custom_field.content_class]"> $[user.mini_custom_field.name]: <a href="$[user.mini_custom_field.value]"></a></span>
       {elseif $[user.mini_custom_field.name] == "PLOTTER"}<br />
       <span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: <a href="$[user.mini_custom_field.value]"></a></span>
       {elseif $[user.mini_custom_field.name] == "TRACKER"}<br />
       <span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: <a href="$[user.mini_custom_field.value]"></a></span>
       {elseif $[user.mini_custom_field.name] == "THEME"}<br />
       <span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: <a href="$[user.mini_custom_field.value]"></a></span>
       {else}<br />
       <span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
       {/if}
       {/foreach}
   </div>
   {if $[user.badges_miniprofile]}
   <div class="$[user.badges_miniprofile_container_class]">
       {foreach $[user.badges_miniprofile]}
       $[user.badges_miniprofile.icon]
       {/foreach}
   </div>
   {/if}
</div>

[Chris]

If that doesn't help then the following might be relevant...

It seems that theme has dropped the line that specified a vertical-align for the post content cell but left the one specifying the miniprofile left panel

• original (basic) theme

  
  
  .posts .post .left-panel { width: 172px; vertical-align: top; }
  .posts .post .content { padding-left: 10px; vertical-align: top; }
  .posts .post .content-head .info{float:left;margin-top:3px;line-height:20px !important;}
  
  
  

• observed theme

  
  
  .posts .post .left-panel{width:210px;vertical-align:top;}
  .messages .item .left-panel{width:245px;}
  .posts .post .content-head .info{float:left;margin-top:3px;line-height:20px !important;}
  
  

[Retread]

Sept 9, 2020 19:20:19 GMT -8 Chris said:

If that doesn't help then the following might be relevant...

It seems that theme has dropped the line that specified a vertical-align for the post content cell but left the one specifying the miniprofile left panel

• original (basic) theme

  
  
  .posts .post .left-panel { width: 172px; vertical-align: top; }
  .posts .post .content { padding-left: 10px; vertical-align: top; }
  .posts .post .content-head .info{float:left;margin-top:3px;line-height:20px !important;}
  
  
  

• observed theme

  
  
  .posts .post .left-panel{width:210px;vertical-align:top;}
  .messages .item .left-panel{width:245px;}
  .posts .post .content-head .info{float:left;margin-top:3px;line-height:20px !important;}
  
  

Brill.

I've been following this thread in an effort to understand the problem. It was apparent that posts with enough content (and were at least as tall as the mini-profile) didn't exhibit a problem. But shorter posts had the content vertically centered.

If I understand this correctly, the mini-profile/left-panel is in a table cell in the same row as the cell that holds the content (including the info, controls, and message). Whichever cell takes up more vertical space will define the height of the cells in that row.

When each cell has the vertical-align defined as top, all is well. But since the default alignment of a table cell is middle, if either of the cells is missing that definition, it will vertically align to the (vertical) middle of the cell.

Does that sound correct, or do I have it wrong?

[Chris]

Sept 10, 2020 10:06:26 GMT -8 Retread said:

Brill.

I've been following this thread in an effort to understand the problem. It was apparent that posts with enough content (and were at least as tall as the mini-profile) didn't exhibit a problem. But shorter posts had the content vertically centered.

If I understand this correctly, the mini-profile/left-panel is in a table cell in the same row as the cell that holds the content (including the info, controls, and message). Whichever cell takes up more vertical space will define the height of the cells in that row.

When each cell has the vertical-align defined as top, all is well. But since the default alignment of a table cell is middle, if either of the cells is missing that definition, it will vertically align to the (vertical) middle of the cell.

Does that sound correct, or do I have it wrong?

When the contents of the miniprofile cell is the taller of the two then the right cell which no longer has an explicit vertical-align declaration defaults to vertical-align:inherit via the browser's default user-agent rules (at least in chrome) and since Proboards has actively set this to middle on a parent cell then we inherit middle (note: default is baseline, I recall at some point middle being the user-agent stylesheet default but that has obviously changed).

https://storage.proboards.com/forum_id/css/file_id.css:

table.list>thead>tr>th,table.list>tbody>tr>td {
border-width: 0px 1px 1px 0px;
border-style: solid;
border-color: #d7d7d7;
vertical-align: middle;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}

[Symphony 🎻]

I attempted the first fix but then I followed the above posts and restored the .posts .post .content { padding-left: 10px; vertical-align: top; } to my style sheet and that seems to have fixed the problem.

It is now

SPOILER: Click to show

.posts .post table { width: 100%; }

.posts .post .left-panel { width: 210px; vertical-align: top; }

.posts .post .content { padding-left: 10px; vertical-align: top; }

Thank you for all the help with it. I must've accidentally deleted the line from the style sheet when putting in the mini.

[Nscalerr]

Symphony 🎻 with what I posted, all you have to do is delete the original and paste in what I have here and that will fix the coding errors you have in the mini profile.