You are not logged in.
Pages: 1
Topic closed
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)
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?
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 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?
Zef wrote: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.
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...
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 :)
Pages: 1
Topic closed