CODEWITHSUNDEEP
htmlcssscrollbar
Nandhakumar Sellappan
Nandhakumar Sellappan

Reputation: 120

Scroll bar does not hide for single line?

I have a table in which a specific <td> will have dynamic text. It should scroll when multiple lines are present. So I used the overflow:auto property. But even when the content is not overflowed the scroll bar is visible. It is visible all of the time.

My PHP code is:

printf( '<table class="scroll-table">' );
printf( '<tr><td>..</td>');
printf( '<td ><div style="float: left"><strong>Comment:</strong></div> <div class="scroll">%s</div></td>',$info['comment'] );

CSS properties:

.scroll-table{
    table-layout: fixed;
}
.scroll-table td{
    width:33%;
    padding-right:4px;
}
.scroll{
    white-space: normal;
    overflow: auto;
    height: 1em;
    line-height: 1em;
    width: 20em;

What is wrong in my code?

Upvotes: 2

Views: 153

Answers (3)

Kuya
Kuya

Reputation: 7310

I checked your code in three browsers, here are the results

  • Firefox 40.0.3 = ok
  • Chrome 45.0.2454.85 = ok
  • IE 11.0.9600.17905 = scrollbar

This is the inherent behavior of IE, however you can change height: 1em; to height: 1.1em; in your CSS and make the scrollbars go away in IE.

Another note: This makes reading the comments extremely difficult. You can only read one line at a time.

You can use height: auto; in your CSS for .scroll to make multi-line comments easier to read, but then the scrollbar comes back using IE (even if there is only one line). IE just doesn't play very nice. It is a coder's nightmare.

Also don't forget to close your tags as Fky said, but that had no affect on the scrollbar. Still, good advice.

Upvotes: 1

Pavel Gatnar
Pavel Gatnar

Reputation: 4053

It is because 1em is only the text size, you have to set padding e.g. 0.125em and then the line size is 1.5em. Make sure you use box-sizing:border-box.

Upvotes: 0

Fky
Fky

Reputation: 2173

try to change this line 

printf( '<td ><div style="float: left"><strong>Comment:</strong></div> <div class="scroll">%s</div></td>',$info['comment'] );

by 

printf( '<td ><div style="float: left"><strong>Comment:</strong></div> <div class="scroll">%s</div></td></tr></table>',$info['comment'] );

Check to close all tag you've got opened :)

Upvotes: 0

Related Questions