Search results thread list - thread title wrap oddness.

This is on the default style, so I'm ruling out one of the myriad edits I made to my main style.

See here. The title of the third post down in the list is "Since "incoming" NGD's seem to be a thing lately..."



On my forum list, when I shrink the browser the table row expands (gets taller) so that the text wraps. However in my new posts search result, the row doesn't grow. The text at the end of the thread title gets bumped below the title. See here:



If you look at that same thread again, all you can see is ""Since "incoming" NGD's seem to be a", because the last two words get shoved under the thread title but the cell itself doesn't grow at all.

Any idea what might cause this? I've checked a couple of other default vb4 sites and they don't seem to have the same issue, so it's something I did. I just have no idea what, heh. It doesn't happen in my forum list, only in the New Posts search result listing.

[MarkFL]

Got to your "search.css" template, and edit your "searchtitle" class to read:

.searchtitle {
	font-size:{vb:stylevar font.fontSize}{vb:stylevar font.units};
	padding:6px 0 2px;
	/*height: {vb:math {vb:stylevar font.fontSize}{vb:stylevar font.units} * {vb:stylevar line_height}};*/
	height: auto;
	overflow: hidden;
}

This will allow the element to grow as needed.

edit: I found a couple of other CSS tweaks are needed...

Go to "threadlist.css" and locate:

.threadbit .alt {
	background: {vb:stylevar threadbit_alt_background};
}

And change it to read:

.threadbit {
	background: {vb:stylevar threadbit_alt_background};
}

Then got to "additional.css" and add:

.inner .author {
	margin-bottom: 5px !important;
}

[OUTL4W]

I believe this is also achieved by going into stylevars then in search box, type "line-height" and it should bring it up under "common" then set height to "auto".

Thanks guys. That fixed the wrap, but now my thread stats cell doesn't quite make it to the bottom of the row in a search. I've been firebugging it and it looks like it might be threadstats.td, but I can't quite sort what to adjust.



This is my site, guest/guest for a login if anyone's more savvy with this and wouldn't mind taking a peek.

--------------- Added [DATE]1427886889[/DATE] at [TIME]1427886889[/TIME] ---------------

Also, if a mod could move this over to the graphics forum I'd appreciate it. (Sorry about that, not enough coffee.)

This is driving me bonkers, aaaagh!

I made the edits in MarkFL's post, which would do as a bandaid however it makes my replies/views box have the same background as the rest of the thread strip. I'd like to keep it the alt color. Setting the width to auto works for the wrap, but I still have the Ugly Box Of Doom.

I'm looking at it in firebug, and around the default vB replies/views container there's a cell/box:



However around mine, that doesn't seem to be there. This is the only wrap that I can get around that area.



Looking at the HTML on the default skin:

<div class="threadinfo" title="blah blah title">
<ul class="threadstats td alt" title="">
<li>Replies: 35 </li>
<li>Views: 623</li>
<li class="hidden">Rating0 / 5</li>
</ul>

vs. mine:

<div class="threadinfo" title="blah blah title">
<ul class="threadstats td alt" title="">
<li>
<font color="#000000">Replies:</font>
<font color="#000000">35</font>
</li>
<li>
<font color="#000000">Views:</font>
<font color="#000000">623</font>
</li>
</li>
<li class="hidden">Rating0 / 5</li>
</ul>

The only difference in mine that I can see is that I shoved a lazy font color tag in there for the time being until I can fix this (I'll do it the right way later). I'm going mad, it feels like I've put more time into this than I have the bulk of the rest of my style. Aaaagh!

[MarkFL]

Try adding the following selectors to "additional.css":

.nonsticky {
	overflow: hidden;
}

.nonsticky .threadinfo, .nonsticky .threadstats, .nonsticky .threadlastpost, .nonsticky .threadpostedin {
	display: inline-block;
	padding-bottom: 64px;
	margin-bottom: -64px;
}

That did it, thank you very much! The text is a little top-justified in the cell but I can certainly live with it. Cheers man, that was driving me crazy!

[MarkFL]

Originally Posted by Chris-777

That did it, thank you very much! The text is a little top-justified in the cell but I can certainly live with it. Cheers man, that was driving me crazy!

Change to second selector set to read:

.nonsticky .threadinfo, .nonsticky .threadstats, .nonsticky .threadlastpost, .nonsticky .threadpostedin {
	display: inline-block;
	padding-top: 6px;
	padding-bottom: 64px;
	margin-bottom: -64px;
}

Then add:

.searchtitle {
	padding: 0;
}

This will match the top padding of the leftmost element on the line.

Also add this selector:

.inner .author {
	margin-bottom: 6px !important;
}

Now your data rows will look like the attached...

And thank you once again!

[MarkFL]

One more thing...to get your sticky threads to match the nonsticky threads you should add:

.sticky .threadinfo, .sticky .threadstats, .sticky .threadlastpost, .sticky .threadpostedin {
	display: inline-block;
	padding-top: 6px;
	padding-bottom: 64px;
	margin-bottom: -64px;
}