LebGeeks

Kassem

Member

Horizontally scrolling the contents of a div inside a jQuery UI dialog

Ok I've been trying for more than an hour now, I give up... Here's what I've got so far:

<div id="compareItemsWrapper">
    <div id="innerWrapper">
    @foreach (var item in Model)
    {
        <div class="compareItem">
            <h2>@item.Title</h2>
            <img src="@Html.ResolvePath(item.Image, "150x150")" alt="@item.Title" class="compareItemImage" />
            <div class="compareItemInfo">
                <div class="compCredits"><span class="compIcon"></span><span class="compInfoValue">@item.HighestBid</span></div>
                <div class="compDays"><span class="compIcon"></span><span class="compInfoValue">@item.TimeLeft</span></div>
                <div class="compCity"><span class="compIcon"></span><span class="compInfoValue">@item.AddressCity</span></div>
            </div>
            <p class="compItemDescription">@Html.Truncate(item.Description, 120)</p><div class="compReadMore">[<a href="@Url.Action("Detail", "Item", new { itemId = @item.Id })">read more</a>]</div>
            <a href="@Url.Action("Detail", "Item", new { itemId = @item.Id })"><span class="compPurpleButton"></span></a>
        </div>
    }
    </div>
    <div class="clearboth"></div>
</div>

#compareItemsDialog { max-height:540px; height:540px; overflow:hidden;  min-width:775px; }
#ui-dialog-title-compareItemsDialog { }
#compareItemsWrapper { border:2px solid @mainGreen; overflow:hidden; overflow-x:visible; height:500px; width:auto; .rounded_corners; min-width:810px; max-width: 810px; max-height:500px;
                        position:relative; top:10px; left:0px; display:block;
                       #innerWrapper { height:480px; max-height:480px; overflow:hidden; min-width:775px; overflow-x: auto; display:block; position:relative; width:auto;}
                       div.compareItem { width:250px; height:440px; border:none; border-right: 1px solid @mainGreen;  padding:10px; float:left; max-height:440px;  }
                       }

The weird stuff you see in the CSS is actually the DotLess library, do not mind it. It's just nesting some rules inside eachother. But anyway, I just want the contents of #innerWrapper to scroll horizontally when they're too big to fit inside the #compareItemsWrapper div. Right now, they just fall below eachother, and since I've got overflow:hidden, the ones below do not show up.

Last edited by Kassem (May 10 2011)

Zef

Member

Re: Horizontally scrolling the contents of a div inside a jQuery UI dialog

Not sure if I understand exactly how it works but you could try this:

Take the overflow property off of #innerWrapper and make sure it's wide enough to contain all the child elements without them wrapping down. Then on the parent (#compareItemsWrapper), instead of "overflow: hidden; overflow-x: visible;" you can probably use "overflow: auto;"

Does that help?

Kassem

Member

Re: Horizontally scrolling the contents of a div inside a jQuery UI dialog

Not sure if I understand exactly how it works but you could try this:

Take the overflow property off of #innerWrapper and make sure it's wide enough to contain all the child elements without them wrapping down. Then on the parent (#compareItemsWrapper), instead of "overflow: hidden; overflow-x: visible;" you can probably use "overflow: auto;"

Does that help?

How do I make sure the #innerWrapper is wide enough? There might be only one item (which does not require a scroll) but anything more than 3 items requires a scroll. How do I make this div expand to span the width of its children?

XhacK

Member

Re: Horizontally scrolling the contents of a div inside a jQuery UI dialog

I guess you need to give the inner divs a style:

display: inline-block;

Not sure how IE will behave though. Also shouldn't you be using

overflow-x: scroll

to force the scroll?

XhacK

Member

Re: Horizontally scrolling the contents of a div inside a jQuery UI dialog

Not sure if I understand exactly how it works but you could try this:

Take the overflow property off of #innerWrapper and make sure it's wide enough to contain all the child elements without them wrapping down. Then on the parent (#compareItemsWrapper), instead of "overflow: hidden; overflow-x: visible;" you can probably use "overflow: auto;"

Does that help?

How do I make sure the #innerWrapper is wide enough? There might be only one item (which does not require a scroll) but anything more than 3 items requires a scroll. How do I make this div expand to span the width of its children?

I guess you need Javascript for this approach.

Kassem

Member

Re: Horizontally scrolling the contents of a div inside a jQuery UI dialog

I set the width of the #innerWrapper div to 5000px and that did the trick (along with the suggested changes by Zef and XhacK). But that's not exactly what I want... I do want the #innerWrapper to grow with its children! I'll give it a try with jQuery, let's see if it's going to work...

Kassem

Member

Re: Horizontally scrolling the contents of a div inside a jQuery UI dialog

And this did the job quiet perfectly...

    $(function () {
        var innerDiv = $('#innerWrapper');
        var children = $('.compareItem');
        var totalWidth = children.size() * 275;
        children.last().css("border", "none");
        innerDiv.css("width", totalWidth);
    });

Thanks a lot guys, much appreciated :)