We Keep Coding

Add padding to scrollbar

I'm having a unique situation. I need to make a scrollable area that has a custom scrollbar which is slightly padded from the container. At first, I was thinking of adding an additional container that would have the necessary padding to create the illusion that the scrollbar itself has padding, but some elements will have different background color from the additional container and that would make obvious there's another container instead of the scrollbar having padding.
As you can see, the background color of each individual container spills out of the main container past the scrollbar. Is there any way I can add padding to the scrollbar or at least a hack that would give that impression?

Initially, I have found and started using react-custom-scrollbars npm package, but it seemed it had a lot of open issues and I had problems implementing it, so I switched to simplebar package which is very lightweight and works similarly to a facebook custom scrollbar. Solved my issue.

Mark key positions on a scrollbar

I have a div with its own scrollbar using the overflow: auto property.
With this div I display a table. For some of the rows I would like to display markers on the scrollbar of their positions within the div.
At the moment I am calculating the position of the desired rows I want to mark within the scrollbar by subtracting the offsets from the parent div, and then I am creating div with their fixed position
With the newly created div, how do I display that position on the scrollbar rather then in the div or is it even possible to add fixed divs on the scrollbar?

There's really no good way to do this. The scrollbar created by overflow: auto is a bit of a weird beast: its size and metrics are dependent on the browser and OS, and cannot be reliably detected by Javascript.
(For example, the scrollbar on most Windows systems will have "buttons" at the top and bottom, but the Mac OS scrollbar does not; this changes the positioning of the scroll thumb for content, as it affects the overall length of the scrollbar. In fact, the Mac OS scrollbar is invisible by default on many systems, so attempting to position content over it will look rather strange!)
About the only way I can imagine going about this would be to forego the native scrollbar entirely and use a Javascript-created standin, but those tend to have wonky behavior that will piss users off. Unless this feature is extremely important to you, I'd be inclined to write it off as impossible.

horizontal scroll bar appearance on web page with change in screen resolution

What is the correct CSS to remove the horizontal scroll bar appearing on the web page with changes in resolution ?
Has the width to be fixed to does it have to be in %?
Also, is the position to be kept absolute or relative ?
Please help - also are there any pointers for best CSSdesign across the browsers and when site is opened on phone ?

There could be many scenarios leading to this issue,
Most common one is that you have defined a parent element (most probably a div) with width of 100% and then you have added padding and margin to it.
have a look at this link :
http://www.w3schools.com/css/css_boxmodel.asp
Other way is to create a responsive design (go with mobile first responsive design).
Read this for more info: http://designshack.net/articles/css/mobilefirst/
Finally I would recommend you use a css frame work. there are many out there and each has it's pros and cons. I personally prefer Bootstrap : http://getbootstrap.com/

you could do a overflow-x:hidden; on the elements you want to hide the scrollbar from

Thanks for the responses, solved this my removing the fixed width of div in CSS which was causing problem

Increasing width of element to page width on fixed-width page

I have a site that is a fixed width, within the content area I am displaying a log viewer.
The log viewer is hard to read as it is confined by the fixed width of the site and the log lines are quite long.
What I want to do is above the log viewer have a button that says "Expand", when clicked the log viewer's width would grow to be just slightly less than the size of the viewport.
The rest of the site would still remaine fixed width but the log viewer would be as wide as the screen.
I've drawn an image of what I want to achieve here:
http://imgup.co.nz/3940
I have tried setting "position: absolute; left: 20px" (As well as setting the width) but this causes the footer of my site to move up to be under the log viewer (As the log viewer is no longer increasing the height of the content area).
I'm not sure what to do, it should all be css related I believe.
Any help would be much appreciated!

Try this: http://jsfiddle.net/h4C2p/
EDIT: Sorry, that won't work for different widths. Here is one that works:http://jsfiddle.net/h4C2p/1/

if you don't mind setting a height for the content area, set it for the parent of the element of wherever you show the log.
or, don't wrap everything in one tag. ie. have separate header, content, footer, that normally have the same width and are centered, but when you click expand, the content.. expands

Autoresize Element (div) to Fit Horizontal Content

I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails to the carousel (I'm lazy loading), I need to recalculate the width of the carousel (so that all the floated thumbnails line up nicely side by side).
For one, I rather not have to do these kinds of calculations in JS, and for two, I found that it's hard to find a cross browser way to ensure that the width will be properly calculated (I end up having to add or remove pixels from the total width depending on the browser).
So my question is, is there any way without JS, to be able to add content to a div, and have the width adjust as needed, the same way a div's height would?
And if not, have you found a more efficient way to handle this scenario than recalculating the width every time?
I'm not new to web dev, and for as long as I've been in this field, to my knowledge this has never been possible. But with the advent of new technologies cropping up, I thought maybe there was an obscure way of achieving this now.
Thanks in advance!
[EDIT] (for clarification, but simplified): If my carousel is 500px wide with overflow hidden. There's a slideable section containing thumbnails, each is 100px wide, floated, they fit 5 across in the carousel. When a user clicks Next, it lazy loads the next set of 5 thumbnails, and appends it to the slider area after the first set of 5. But since this div was 500px wide to accommodate 5 thumbnails, adding another 5, I need to recalculate the width to get the new thumbnails to show up side by side. Ideally I'd like to find a way to have the div autoresize its width to fit horizontal content, the same way it naturally does for vertical content.

I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.

Using this class for each individual item:
.eachItem {
display: inline-block;
}
Will work (I've done something similar to that).
The problem is that in IE7 it won't work! and you'll have to use JavaScript anyway :(
EDIT: I meant inline-block... and as you may know, IE7 doesn't "like" it.