Give help. Get help.

  • # April 15, 2018 at 7:01 pm

    Hi guys,

    Have been banging my head with this for too long, and need to ask for some advice…

    I have to show a filename, with an “open in a new window” icon after it for WCAG purposes, however, for responsible purposes, I want the filename (text) to ellipsis when squashed, but the icon to always remain at the end of the layout…

    Kinda like…

    Wide : | this_is_a_long_filename.jpg | icon|

    Narrow: | this_is_a_lo… | icon |

    Ive tried using tables (doesnt seem to work unless table is 100%) and div’s (which struggle to resize properly).

    Here’s what I’ve been dabbling with unsuccessfully :

    Any advice would be awesomely appreciated. Thanks!

    # April 15, 2018 at 10:18 pm

    Hey Kylane,

    Everything you wrote in that jsfiddle seems to be completely fine. Just remove the inline css display: inline-block from the div inside .columnA class. I think it will start working.

    # April 15, 2018 at 10:24 pm

    Thanks Mamun – sadly it doesn’t – I want its original size to match the content before its ellipsis’d, not 100% wide – and to ellipsis only when it squeezed by the parent container :(

    # April 15, 2018 at 10:35 pm

    Well, then write the exact code on codepen so that I can modify your real code. I solved the problem where you show me that. Now put the original size of the content, original size of the table etc. You are very close I guess…

    # April 15, 2018 at 11:51 pm

    In order to make the overflow ellipsis work, you need to specify the width or the max width in that container.
    So just change your min-width: 100%; to max-width: 100%; and you have what you need. Or at least you have what I think you mean.

    # April 16, 2018 at 1:59 am

    I imagine you mean something like this

    # April 16, 2018 at 3:36 am

    Thanks @Beverlyh – a much more elegant solution!

    Thanks to others for their suggestions too!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.