Skip to main content
Topic: Linktree text overflows box (Read 6271 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Linktree text overflows box

The way the linktree is currently coded, long thread titles overflow the linktree.  They run under the "arrow" (rotated box) and onto the background.  Especially on narrow mobile views.  The reason it's not obvious here is the linktree foreground text color and the background color are similar (or equal maybe) but it was very obvious on my dark theme with light text flowing onto the dark background.

I fixed it making the following changes to the linktree css.  This would be in index_light.css

Code: ("before") [Select]
.linktree a {
  color: #555;
}

Code: ("after") [Select]
.linktree a {
  color: #555;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

Haven't noticed any glaring side effects, but just made the change on my test forum.  I'd noticed the issue for a while but since it didn't show up here I figured it was fixed in 1.0.   Then when finally working on installing 1.0 I noticed it was just the colors making it work.

Re: Linktree text overflows box

Reply #1

I tried here:
http://www.elkarte.net/community/index.php?topic=2048.0
okay, I guess I can now see it at low resolutions.
It also shows some more problems (message index and the h2 tag) that would benefit from some make-up... :-\

ETA: oh, and the recent posts in the info center.
Last Edit: September 21, 2014, 05:26:35 am by emanuele
Bugs creator.
Features destroyer.
Template killer.


Re: Linktree text overflows box

Reply #3

Sigh.  This doesn't work for the reply page because of the extra <span><strong>... elements which cause the block to be on a newline.   And inline-block doesn't know the containing element width correction.  So I'll call for someone better at CSS to help fix this.

Re: Linktree text overflows box

Reply #4

Not easy to fix I guess...

 emanuele has no idea
Bugs creator.
Features destroyer.
Template killer.

Re: Linktree text overflows box

Reply #5

Do we really need to bold that anyway?  Could do it with last child as well and get rid of the extra reply markup?

Re: Linktree text overflows box

Reply #6

You would have to put it into the link itself to not have the problem.  Or figure out how to get the link to truncate without display=block.  (inline-block didn't work.)

Re: Linktree text overflows box

Reply #7

Well poop .... I added that max-width to try and contain those darn long names .... maybe just to back to allowing it to wrap?
so replace
Code: [Select]
.linktree:last-child {
max-width: 25em;
}
with
Code: [Select]
.linktree:last-child>a {
display: inline;
}
?

Re: Linktree text overflows box

Reply #8

I don't see that max-width anywhere in my 1.00 code, but just putting in the second part didn't cause things to wrap for me.  It left it overflowing.

Re: Linktree text overflows box

Reply #9

I uploaded here the last change suggested by Spuds.
Bugs creator.
Features destroyer.
Template killer.

Re: Linktree text overflows box

Reply #10

It's still broken like the original.  Change the text color to red and you'll see it's overflowing the box still.

Re: Linktree text overflows box

Reply #11

Oh I see it on narrow screens with a long subject ... meh, chasing our tails ... i'm just going to cut its length in the sources as I'm not in a corner case mood  :P

Re: Linktree text overflows box

Reply #12

From a quick look, maybe
Code: [Select]
.linktree:last-child>a {
display: inline;
}
change that to display block then ... still going to cut that in sources since the topic subject is repeated immediately below that

Ah scratch that, thats what messes up the reply page :P ... cut me Mick, cut me !
Last Edit: September 28, 2014, 04:53:00 pm by Spuds