XF 2.2 How to display full attachment names?

[sbj]

I used to do this and it displayed fully the name:

.attachment-name {
    white-space: unset;
    word-wrap: unset;
}

Now it doesn't work anymore, how to update this? I couldn't find the right css selector to do this for XF 2.2.

This is very important to me. I use a versioning system in attachment names and I need to be able to see attachment names fully.

 

[sbj]

I am afraid it looks like a Javascript thing now which we can't target anymore. Is this a regression (a bug?)?

 

[sbj]

Bump.

It shouldn't be this hard to be able to display attachment names?

 

[Hoffi]

use file-* classes instead and modify also overflow fom file-meta-.

But it might not be very easy.

 

[sbj]

use file-* classes instead and modify also overflow fom file-meta-.

But it might not be very easy.

Yeah, I found the new classes but I could not make it to work.

I tried this:

.file-name {
    white-space: unset;
    word-wrap: unset;
}

.file-info {
    height: 20px !important;
}

but I can't get the black bar collapsing and display the full name of an attachment. I wouldn't think it would be this hard to just simply display attachment names. Did nobody complain before about this or what?

 

[Hoffi]

Did nobody complain before about this or what?

Nobody cares the filename.

try this, but is ugly.

.file-info {
    overflow: visible;
    .file-info, .file-meta {
        overflow: visible;
    }
}

 

[sbj]

try this, but is ugly.

Still not working.

 

[Hoffi]

Still not working.

small typo in class.

.file-info {
    overflow: visible;
    .file-name, .file-meta {
        overflow: visible;
    }
}

 

[sbj]

@Hoffi
Well ugly, but at least one step closer. If you have 2 attachments, the one name goes behind back the 2nd one and overall this way is really not that useful .

If you add white-space-unset, it actually doesn't overflow to the right side anymore and stays within the width of the icon.

.file-info {
    overflow: visible;
    .file-name, .file-meta {
        overflow: visible;
        white-space: unset;
    }
}

See:



So, the "only" problem left to do is how to enhance the height of the blackbar to match the text automatically, so it collapses to the bottom.

 

[🔥Iggy🔥]

@Hoffi
Well ugly, but at least one step closer. If you have 2 attachments, the one name goes behind back the 2nd one and overall this way is really not that useful .

If you add white-space-unset, it actually doesn't overflow to the right side anymore and stays within the width of the icon.

.file-info {
    overflow: visible;
    .file-name, .file-meta {
        overflow: visible;
        white-space: unset;
    }
}

See:

View attachment 246344

So, the "only" problem left to do is how to enhance the height of the blackbar to match the text automatically, so it collapses to the bottom.

can you not just adjust the height of .file-info..?
it has a hover function on it as well so theres a sort of hidden height but seems like there could still be room, not sure what else you could do really

 

[sbj]

can you not just adjust the height of .file-info..?
it has a hover function on it as well so theres a sort of hidden height but seems like there could still be room, not sure what else you could do really

I tried, but it doesn't work. I increased height to 50px, but it does not collapse.

 

[🔥Iggy🔥]

I tried, but it doesn't work. I increased height to 50px, but it does not collapse.

try whitespace:normal on file info...seemed to work for me...also might be best practice to stick with em instead of px...

 

[🔥Iggy🔥]

heres my final code im trying....needed to adjust a few other things but i like the idea of this, glad you pointed it out

.file-info {
    overflow: visible;
white-space:normal;
height: 4.5em;
line-height: 1.5;
padding: 0 4px;
}
.file-info:hover {
height:auto;
}
    .file-name, .file-meta {
        overflow: visible;
        white-space: unset;
    }

 

[sbj]

Still not working.

 

[Ozzy47]

Starting to look better.

 

[🔥Iggy🔥]

Still not working.

View attachment 246345

hmm yeah thats one long file name.....i suppose you can adjust the height more but at some point you have to choose if you want to cover the entire image or how much of it...we most commonly get these slightly longer file names....you can try shinking the font and such as well of course.

im wondering if there isnt a code that can flex the height and have a limit set, but thats beyond me for now.
regards

 

[Ozzy47]

height: auto?

 

[sbj]

I have close to 80k attachments attached to posts. And most of them are very long names due to a versioning system I use.

This is how my 2.1 looks like and it adjusts automatically to each name with that simple 2 line of css mentioned in 1st post:

 

[🔥Iggy🔥]

height: auto?

nice one.....it needs to be on the hover function tho, imho

.file-info:hover {
height:auto;
}

 

[🔥Iggy🔥]

oh btw, sbj you got some extra code on there somewhere as mine doesnt overflow like your pic, just cuts title off when it reaches height if title is too long...then now with hover shows the full title...