Lastpost Text area stays small after increasing the width in Category.

Hello,

I got a small width problem in my category layout. I made the last post part bigger from 20% to 28%, and this works fine.
However, the lastpost text field does not increase to 28%, the span class keeps looking at the old value of 20%, this wasting the extra space.

I used this code and this seems to work for the layout of the items itself.

Code:

dd.dterm {width: 48% !important;}
dd.lastpost {width: 28% !important;}

Included a picture with the red box line around the un-used space. If I set more characters in AP the line will break at the edge of the blue span class box.



Version: PHPBB3

Most likely I forgot somethng.... I tried several other combination found on this forum, but none made the text field grow bigger.

If the topic title does not have many characters, it will not go all the way to the right side.  All you did was increase the size of the box.

If you look at the index on the support forum, you will notice that the text does not stretch across the area.

Well it does, thats why it has the word cookies broken off with: ...

I have lenghtened the number of characters to 40, in the AP, that is more than the sentence: "How to clear cache and cookies test". But the word 'test' is still displayed at the next line. As illustrated by this picture:


The two things I would like:
1. I do not want to break words/sentences to the next line, but always have 1 text line only.
2. I wish to use the blank space

I figure here on the support forum the length of the sentence displayed is controled by the setting in the AP "Title length of the last topic on the forum index [number]".

Play around with the number of characters for topic titles until you achieve what you want.

I am sorry, but that doesn't work. I can put it to 100 and nothing will change, and if the title is longer it will still go onto the next line instead of breaking of with '...' on the first line. Which I do not want.

As far as I know, as stated, the width percentage is not taken over correctly by that part.

As the width is 28% if you inspect [dd class="lastpost"] dd.lastpost {width:28%;}
If you inspect the span is says "Inherited from dd.lastpost" dd.lastpost {width: 20%;}

I believe the correct CSS selector for that area is:

Code:

dd.lastpost span, dd.moderation span, dd.redirect span, ul.topiclist dd.info span, ul.topiclist dd.searchby span, ul.topiclist dd.time span

The code did not work out, but I got it working with a sacrifice.
The width layout on the category and the forums seem connected. But the forum width is different. So I had to remove the 'Views' column to get it to fit there.
The spacing on the left side of the forum is different compared to the category, so this pushes the whole layout to the right with about 4-6%.

Here is what I think to be the issue, the Icon spacing in the green part on the left of the blue:

No mather what I did, in the forums the dd.term always took more pixels for the width.


As you can see in below picture, the green part for the icon is incorparated into the blue for the category, thus not taking extra space in the %:


I did not find a way around this. The spacing for the categories is ok now, but as said I lost the 'Views' column in the forums.

You do understand that the forum columns have to equal the width of the forum?

If the forum's width is 90% then each column will use a percent of the 90%.

First Column:  50%
Second Column:  5%
Third Column:  5%
Four Column:  30%

The above is just an example.

Yes I understand the width % and that is why I find it strange it does not work.

In Categories and Topics these columns share the same settings:

dd.term (titles both)
dd.topics (category only)
dd.posts (posts number / replies number)
dd.lastpost (both)
dd.views (only in forums)

The current settings are:

dd.term 48%
dd.topics 7%
dd.posts 8%
dd.lastpost 32%
This equals 95% in the categories, even with some space left, 96% is available.

But this does not fit in the forums.

I only get it to fit there I delete the views column, or at least set it so small that its unuseable.
So where did the extra room go?

I deleted all the extra CSS so thats not it, and deactivated all jave. So nothing else is conflicting with this either.
The only room that I can find that potentially is bugging it up is all the way to the left as show in the pictures.
As said, even with the view columns on, the width of the forum part on the picture is wider than it should be.

Nobody knows how to align it properly so I can have my 'Views' column back?

Hello,

I can probably check some stuff for you, to see if maybe some css or other code could be causing your issue. I need your forum url to do this though, may you please provide us with the url to your forum? If you don't want it to be seen publicly you can put in it

Code:

[hide] [/hide]

tags which will make it so only those who reply to the topic or staff members can see your forum url, or you can send it to me by pm.

-Brandon

Hi

Send you a PM, forum is open now.

Ok,after obtaining the complete forum css stylesheet via the staff tools, I ran the css code through a css 'lint': http://www.htmlhelp.com/cgi-bin/csscheck.cgi

It came up with some of these errors in more (images in spoilers because there is so many ):

Spoiler:

There were many many many many more then that as well, however, the page was long there was no way I could screenshot them all for you, I would be here all day.

Overall you have got ALOT of css there, alot of which seems custom. Any portion of it could cause issues. You said you have tried disabling the forums css stylesheet and javascript correct? If so and it didn't help the problem, then that means the code might not even be the problem and I am not sure what it could be. When did the problem begin? Did you change anything before it began occurring? Have you tried viewing the forum from a different browser?

-Brandon

LOL I know about the CSS, much is indeed custom and only works used this way. Many codes used are direct inputs from tutorials and such from Ange Tuteur. Everything works fine, except this problem.

I also use csslint.net and it gives 0 errors and 601 warnings. I am currently cleaning it up and lining it up for easier reading. Still was testing and coding today. Many of the warning incorporate things like 0px instead of 0 and things like !important, which is needed and adviced here all the time. And if not used it does not work lol

The site you used to check the CSS, I find very hard to read and understand as a beginner....

And yh I did try before, emptying it from all other CSS and only was left with the column settings. And at the same time even deleted all Javascripts.
Its not a deal breaker on its own, but it would be nice if it would fit

Thanks for the check though, appreciate that
For all the !important warnings I will need to check each element to see if it still works without... uhg lol

~Edit~ Cleaned it up a bit, almost all errors are about '!important' use of 'ID's' and 'Overqualified Elements'. All 3 are needed, so yh...
~Edit2~ BTW I just ran the basic CSS through csslint and that came back with errors and warnings, so thats not me  Not sure what you ran, all of it or just my CSS?

Nudge

I've had same problems but could never figure out how to fix lol

As we got a fixed width, because of what we use it for, I can not find a way around it myself...

Well the only way I found, is to let it go past the edge on the right side (in the forums only) and limit the username characters, but that is a bit of a dirty fix lol

Bump

Nudge