UI disturbed when Browsed image name is too long.

Question

1.00/5 (1 vote)

See more:

Hi All,

When I am browsing the image with long name that is disturbing the UI, how can I short the name of file to display on UI.

Thanks

Posted 17-Jan-16 20:30pm

DT_2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2016-01-17T20:56:00

Shortening the name means that the user won't be able to know true name of the image (file). This hardly can be acceptable. You can show the full name in a UI element which is horizontally scrollable. This is the usual UI style. For a text control, this is the default. You can make this control read-only.

The solution with input would have one problem: the scroll bar is not shown, so there is no indication of the fact that the name is not fully shown. More sophisticated solution could be based on textarea, and the style should be far from default. We need to make it a single-row input, prevent wrapping and show the scroll bar. Here is the simple code sample showing these effects:

HTML

<html>
   <head>
      <title>Single line with scroll bar</title>
      <style type="text/css">
         textarea {
            overflow-x: scroll; 
            white-space: nowrap;
            resize: none;
            width: 10em; /* for example */
         } 
      </style>
   </head>
<body>

<textarea rows="1" readonly="readonly">Some long, very long name, really long</textarea>

</body>
</html>

—SA