CODEWITHSUNDEEP
javascripthtmlcssscrollbaroverflow
SilverLight
SilverLight

Reputation: 20478

how scrollable text line inside a div without showing scroll bars

plz see the below link :

Long File Name Inside A Div

when you see those long file names with firebug you will find a span that tell us -> 

.FileName {
    float: left;
    width: 438px;
}

we have predefined width for this span!

q#1 : so why we have overflow in that div and how can i fix that ?

q#2(important) : is it possible to make that file name scrollable without showing scroll bars ?

edit
(with jquery or javascript or css)

thanks in advance

Upvotes: 0

Views: 2982

Answers (3)

kasimir
kasimir

Reputation: 1554

If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some:

http://www.net-kit.com/jquery-custom-scrollbar-plugins/

I've tried one of them (http://www.demo.creamama.fr/plugin-scrollbar/), setting the div containing the text to overflow: hidden; and the div containing the scrollbar to display: none; to mimic your situation, and that gives me a scrollable div with no scrollbar.
However, I think from a UI point of view it's not the best idea to have a scrollable section without a scrollbar. At least something should light up (as with the Mac OS Lion scrollbars) indicating you can, or are, scrolling. You could style one of the javascript solutions out there to make this happen, for instance with a tiny scrollbar or indicator.

Upvotes: 1

ANeves
ANeves

Reputation: 6395

Short of using CSS3's marquee, I can see no simple solution. You would have to use Javascript.

As per avoiding the line break, you can use white-space: nowrap;.

Upvotes: 1

Mathieu
Mathieu

Reputation: 3093

You have an overflow because this text can't break (there are no spaces):

R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210

You could change the span's into div's and give them a height and an overflow:hidden.

Html:

<div class="FileName">R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210  asangsm.com.rar</div>

Css:

.FileName{
    float: left;
    width: 438px;
    height: 20px;
    overflow: hidden;
}

I don't think it's possible to make that file name scrollable without showing scrollbars.

Upvotes: 3

Related Questions