6

jQuery's .width() method doesn't seem to account for scroll bars. This is problematic for me, since I'd like to set the width of some children to equal the width of their parent. I used jQuery similar to the following:

$('#contentDiv').width($('#containerDiv').width())

In this example, #contentDiv is the element I'd like to size, and I want to set it to have the width of #containerDiv, which is its parent element. My problem is that this cuts off the side of #contentDiv, as seen in this fiddle.

In my actual code, I have several elements that I'm sizing with jQuery, which all need to fit in the scrollable div, so just setting the css of #contentDiv to 100% is not an option. What's the best way of dealing with scroll bar widths of divs in jQuery?

Jeffrey Blake
  • 9,659
  • 6
  • 43
  • 65
ckersch
  • 7,507
  • 2
  • 37
  • 44
  • There is an issue with that, because different browsers implement the scroll bars differently. IE puts the scroll bar outside of the area of the div (which is actually correct according to the standards documentation), whereas all of the other browsers actually have the scroll bar inside of that area. Just something to keep in mind when researching this area. – krillgar Apr 12 '13 at 16:36
  • 1
    possible duplicate of [jquery - how to get screen width without scrollbar?](http://stackoverflow.com/questions/8339377/jquery-how-to-get-screen-width-without-scrollbar) (use `innerWidth()`)? – Fabrizio Calderan Apr 12 '13 at 16:36
  • this is a messy subject because it's not consistent across all browsers. Some will give you an innerwidth, some will give you the width with scrollbars. I think you may need to come up with a solution that is specific to each browser you plan to support – Dylan Hayes Apr 12 '13 at 16:38
  • @FabrizioCalderan: No, that question is about the window. This question is about an element. – Michael Scheper Oct 24 '14 at 04:41
  • @jeffrey-blake and ckersch: I suggest you edit the title to make it clear this question is about elements, and not the browser width, to make its distinction clearer to users like FabrizioCalderan. – Michael Scheper Oct 25 '14 at 00:21

4 Answers4

1

The best solution I found while working around this solution is this:

http://chris-spittles.co.uk/?p=531

jQuery is all powerful and everything but sometimes a small dash of native JS is all you need to render pixel perfect pages... I hope you will find this solution helpful!

banjoSas
  • 184
  • 1
  • 10
0

UPDATED:

None of the jQuery width-finding methods account for the scroll bar. In my original example, using .innerWidth(true) LOOKS like it works, but only because it returns and object, which causes width to fail and the inner contents size themselves to fit in the available space, because the example wasn't very good. However, it's possible to write a function to compute the available space in a div with a scroll bar in it, which can then be used to position the contents as you wish.

To write that function, I took advantage of the fact that, when a div is appended to a div with a scroll bar in it, it takes up the full available width (i.e. the inner width of the parent minus the width of the scroll bar).

The function looks like this:

function noScrollWidth(div){
    var measureDiv = $('<div id="measureDiv">');

    div.append(measureDiv);

    var width = measureDiv.outerWidth();

    measureDiv.remove();

    return width
};

I then use this to size my content div:

$('#contentDiv').width(noScrollWidth($('#containerDiv')));

Working fiddle.

ckersch
  • 7,507
  • 2
  • 37
  • 44
  • Passing a parameter to innerWidth *sets* the element's inner width. `true` isn't a valid argument, but it still means it'll return the element, instead of the width. – Michael Scheper Oct 24 '14 at 04:48
  • Good catch, it looks like my example was actually silently failing when I used `innerWidth(true)`. I've added a different solution instead. Let me know if it works for you! – ckersch Oct 24 '14 at 14:50
  • Thanks for editing it—I've removed my downvote. The problem I was trying to solve was finding an elements width, excluding the scrollbar, and `$(myElementSpec)[0].clientWidth` seemed to be the best solution. This answer helped me get there: http://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively – Michael Scheper Oct 25 '14 at 00:06
0

Try this:

$('#contentDiv').width($('#containerDiv')[0].clientWidth)

For more information about that solution, see this StackOverflow answer.

Community
  • 1
  • 1
Michael Scheper
  • 6,514
  • 7
  • 63
  • 76
0

Another approach I'd try is setting both elements' box-sizing property to 'border-box', and see whether setting your contentDiv's width to 100% then works the way you want.

Now that fewer projects worry about crufty old browsers anymore, 'border-box' can make things easier to work with. Be sure to test multiple browsers on multiple platforms, though, because I'm not sure they all handle scrollbars the same way.

Michael Scheper
  • 6,514
  • 7
  • 63
  • 76