Skip to main content

Forums

This topic contains 6 replies, has 4 voices, and was last updated by  kylane 11 months, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #269864

    kylane
    Participant

    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 : https://jsfiddle.net/kylane/m76ens5d/31/

    Any advice would be awesomely appreciated. Thanks!

    #269865

    Mamun
    Participant

    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.

    #269866

    kylane
    Participant

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

    #269868

    Mamun
    Participant

    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…

    #269869

    JeroenR
    Participant

    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.

    #269873

    Beverleyh
    Participant

    I imagine you mean something like this http://jsfiddle.net/Lfof5Lwa/

    #269875

    kylane
    Participant

    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.

icon-link icon-logo-star icon-search icon-star