vb.org Archive - Search results thread list - thread title wrap oddness.

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)

- - Search results thread list - thread title wrap oddness. (https://vborg.vbsupport.ru/showthread.php?t=318016)

Guest210212002

03-28-2015 07:47 PM

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..."

https://vborg.vbsupport.ru/external/2015/04/35.png

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:

https://vborg.vbsupport.ru/external/2015/04/36.png

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

03-29-2015 09:57 PM

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

Code:

.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:

Code:

.threadbit .alt {

        background: {vb:stylevar threadbit_alt_background};

}

And change it to read:

Code:

.threadbit {

        background: {vb:stylevar threadbit_alt_background};

}

Then got to "additional.css" and add:

Code:

.inner .author {

        margin-bottom: 5px !important;

}

OUTL4W

03-30-2015 04:50 AM

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".

Guest210212002

03-31-2015 07:37 PM

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.

https://vborg.vbsupport.ru/external/2015/03/1.png

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.)

Guest210212002

04-03-2015 11:30 AM

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:

https://vborg.vbsupport.ru/external/2015/04/37.png

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

https://vborg.vbsupport.ru/external/2015/04/38.png

Looking at the HTML on the default skin:

Code:

<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:

Code:

<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

04-03-2015 01:59 PM

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

HTML Code:

.nonsticky {

        overflow: hidden;

}



.nonsticky .threadinfo, .nonsticky .threadstats, .nonsticky .threadlastpost, .nonsticky .threadpostedin {

        display: inline-block;

        padding-bottom: 64px;

        margin-bottom: -64px;

}

Guest210212002

04-03-2015 07:52 PM

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

04-03-2015 09:16 PM

1 Attachment(s)

Quote:

Originally Posted by Chris-777 (Post 2542302)

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:

HTML Code:

.nonsticky .threadinfo, .nonsticky .threadstats, .nonsticky .threadlastpost, .nonsticky .threadpostedin {

        display: inline-block;

        padding-top: 6px;

        padding-bottom: 64px;

        margin-bottom: -64px;

}

Then add:

HTML Code:

.searchtitle {

        padding: 0;

}

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

Also add this selector:

HTML Code:

.inner .author {

        margin-bottom: 6px !important;

}

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

Guest210212002

04-04-2015 11:11 AM

And thank you once again!

MarkFL

04-04-2015 12:38 PM

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

HTML Code:

.sticky .threadinfo, .sticky .threadstats, .sticky .threadlastpost, .sticky .threadpostedin {

        display: inline-block;

        padding-top: 6px;

        padding-bottom: 64px;

        margin-bottom: -64px;

}

All times are GMT. The time now is 11:05 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01152 seconds Memory Usage 1,747KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (6)bbcode_code_printable (5)bbcode_html_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: