Scrollbar removes right part of images

**Rain Lover** · 07-06-2012, 04:22 AM

Hi,

Sample:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
   <style type="text/css">
	div {display:inline-block; height:200px; overflow-x:hidden; overflow-y:auto;}
        a {display:block;}
	img {border:0;}
   </style>
</head>
<body>
   <div>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
   </div>
</body>
</html>

Except in Internet Explorer and Opera the right part of images are cut. I wonder what's the reason and how they can be displayed the same across different browsers.

Many thanks in advance!
Mike

**jscheuer1** · 07-06-2012, 04:42 AM

If you know the width of the widest image (in this case 80), set the div's width to that + 20:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
   <style type="text/css">
	div {display:inline-block; height:200px; width: 100px; overflow-x:hidden; overflow-y:auto;}
        a {display:block;}
	img {border:0;}
   </style>
</head>
<body>
   <div>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
   </div>
</body>
</html>

If not (image width unknown for some reason), javascript could be used, but if the images vary in width it would have to wait until all the images are loaded. If they're all the same unknown width, the load event of the first image could be used to set the width of the div.

Example checking all images:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
   <style type="text/css">
	div {display:inline-block; height:200px; overflow-x:hidden; overflow-y:auto;}
        a {display:block;}
	img {border:0;}
   </style>
<script type="text/javascript">
var divWidth = {
	addEvent: (function(){return window.addEventListener? function(el, ev, f){
			el.addEventListener(ev, f, false);
		}:window.attachEvent? function(el, ev, f){
			el.attachEvent('on' + ev, function(){f.call(el);});
		}:function(){return;};
	})(),
	init: function(){
		this.addEvent(window, 'load', function(){
			var pdiv = document.getElementById('pics'), ims = pdiv.getElementsByTagName('img'), imsCount = ims.length, max = 0;
			while(ims[--imsCount]){
				max = Math.max(max, ims[imsCount].width);
			}
			pdiv.style.width = max + 20 + 'px';
		});
	}
};
divWidth.init();
</script>
</head>
<body>
   <div id="pics">
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
   </div>
</body>
</html>

**Rain Lover** · 07-06-2012, 05:07 AM

Originally Posted by jscheuer1

If you know the width of the widest image (in this case 80), set the div's width to that + 20

Dear John,

Thanks for the answer, but how can you make sure it's 20? As you know the scrollbar width isn't always the same in different browsers/systems.

**jscheuer1** · 07-06-2012, 05:15 AM

I figure it's close enough. I don't think any are that wide, but adding 20 looks good to me. Javascript could probably be used to determine the width of the scrollbar though if it's crucial.

BTW, I added a javascript example to my previous post. It doesn't calculate the width of the scrollbar though. If I hit on a way to do that, I'll post it, probably as an edit to this message.

**ApacheTech** · 07-06-2012, 05:31 AM

Could you set up a recursive function using div.scrollWidth > div.innerWidth?

The other thing you could do is set a max width for the images:

PHP Code:


#div img
{
    max-width:80px;
}

**Rain Lover** · 07-06-2012, 05:46 AM

Originally Posted by ApacheTech

The other thing you could do is set a max width for the images:

PHP Code:


#div img

{

    max-width:80px;

}

I tried it to no success.

**jscheuer1** · 07-06-2012, 05:55 AM

OK, hmm recursive sounds like an endless loop in some browsers. There is no innerWidth anyway. At least not for a div in this case. jQuery has that, but I don't think it has anything to do with scrollbars. Setting a max width won't solve anything other than not knowing the width of the images. It still leaves the scrollbar width unknown, and therefore the exact amount to add to the width of the div is still a mystery. And it will resize some images, perhaps not what Rain Lover has in mind.

Anyways, I've been playing with this. Even 'as is' it doesn't work in IE 7 (IE 7 doesn't do inline-block in the same way as other browsers). But if we leave that aside, this is pretty good:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
   <style type="text/css">
	#pics {display:inline-block; height:200px; overflow-x:hidden; overflow-y:auto;}
        a {display:block;}
	img {border:0;}
   </style>
<script type="text/javascript">
var divWidth = {
	addEvent: (function(){return window.addEventListener? function(el, ev, f){
			el.addEventListener(ev, f, false);
		}:window.attachEvent? function(el, ev, f){
			el.attachEvent('on' + ev, function(){f.call(el);});
		}:function(){return;};
	})(),
	init: function(){
		this.addEvent(window, 'load', function(){
			var pdiv = document.getElementById('pics'), ims = pdiv.getElementsByTagName('img'),
			inner = document.getElementById('inner').offsetWidth, imsCount = ims.length, max = 0;
			while(ims[--imsCount]){
				max = Math.max(max, ims[imsCount].width);
			}
			pdiv.style.width = Math.max(pdiv.offsetWidth, max * 2 - inner) + 'px';
		});
	}
};
divWidth.init();
</script>
</head>
<body>
   <div id="pics">
   <div id="inner"></div>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
   </div>
</body>
</html>

I have some other ideas. If any of those pan out, I'll let you know.

**Rain Lover** · 07-06-2012, 06:45 AM

Originally Posted by jscheuer1

Anyways, I've been playing with this. Even 'as is' it doesn't work in IE 7 (IE 7 doesn't do inline-block in the same way as other browsers). But if we leave that aside, this is pretty good

Yes, it is. Thank you! I thought there was a CSS solution, but it seems that I have to use a script. By the way, all my thumbnails are the same size.

**jscheuer1** · 07-06-2012, 09:23 AM

If they're all the same size, we can play off of that and the fact that neither IE nor Opera seem to require any help. Doing so will speed things up:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
   <style type="text/css">
	#pics {display:inline-block; height:200px; overflow-x:hidden; overflow-y:auto;}
        a {display:block;}
	img {border:0;}
   </style>
<script type="text/javascript">
var divWidth = {
	addEvent: (function(){return window.addEventListener && !window.attachEvent && !window.opera? function(el, ev, f){
			el.addEventListener(ev, f, false);
		}:function(){return;};
	})(),
	setWidth: function(){
		divWidth.pdiv.style.width = divWidth.im.width * 2 - divWidth.inner.offsetWidth + 'px';
	},
	init: function(){
		var dw = this;
		dw.addEvent(window, 'DOMContentLoaded', function(){
			dw.pdiv = document.getElementById('pics');
			dw.im = dw.pdiv.getElementsByTagName('img')[0];
			dw.pdiv.appendChild(dw.inner = document.createElement('div'));
			dw.addEvent(dw.im, 'load', dw.setWidth);
		});
	}
};
divWidth.init();
</script>
</head>
<body>
   <div id="pics">
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
   </div>
</body>
</html>