Div’s contents collapsed until an interaction.

[Christopher]

I’m quite young, and in the process of developing my first website for a clothing brand.

I’m trying to produce a button-like cart to feature in the navigation, using Simplecart JS as the base for the cart works perfectly, but the problem is with how the elements of the cart are displaying as a group (button). They won’t display inline until they’re been interacted with (eg. using add to cart on a product), any one have an idea how to display them correctly? I’m quite confused.

Code: http://codepen.io/anon/pen/Lfspz

[jurotek]

@Callil

#cart {
float:right;
display: block;
margin-left: 20px;
width:120px;
text-align:center;
}

[Christopher]

@jurotek

I tried something like that originally! Although I wanted to keep it adaptive to the sizes of the input numbers, but i guess i’ll have to comprise to the fact it works.

[waylaid]

Something is the JS is causing it not to display properly. If you strip out the js and add a quantity and price manually to the html it looks how you want: http://codepen.io/waylaid/pen/lHLBf

That JS is too dense for me to go through though…

[Christopher]

@waylaid

Appreciate the input! I pretty sure I have it sorted, but it’s nice to know where the problem lies.

[Author]

Posts