angular-sly
angular-sly copied to clipboard
'slidee' element always set to width: 0px
For some reason my .slidee element is always initialized to 'width: 0px'.
Here is my view code somewhat simplified (in jade):
#sliderbox-container
.scrollbar#slyscrollbar
.handle
.mousearea
.frame(sly-horizontal)
ul.slidee
li.daywithtimeslots(ng-repeat="day in dayswithappts()" sly-horizontal-repeat sly-options="{itemNav: 'centered', startAt: 1}")
.dateheader
h2.date {{ day.format('M') }}/{{ day.format('D') }}
span.weekday {{ day.format('dddd') }}
.timeslot-box
ul.timeslots
li timeslot
here is my style code (less):
#sliderbox-container {
.frame {
height: 500px;
margin: 0px 0px;
padding: 10px 0px; //(ver,hor)
overflow: hidden;
width: 100%;
}
.slidee {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
}
.slidee li {
float: left;
height: 100%;
margin: 0 5px 0 0;
width: 175px;
text-align: center;
cursor: pointer;
}
.scrollbar {
margin: 0 0 1em 0;
height: 2px;
background: #ccc;
line-height: 0;
}
.scrollbar .handle {
width: 100px;
height: 100%;
background: #292a33;
cursor: pointer;
}
.scrollbar .handle .mousearea {
position: absolute;
top: -9px;
left: 0;
width: 100%;
height: 20px;
}
}
when it loads, I can see that the 'dragged' class gets added when I do a drag action, and the translateX amount gets changed, but the ul.slidee is always width:0px and therefore when I drag it doesnt allow the move to 'stick'.. i.e. it gets dragged as long as I am doing the action but it just 'bounces' back to the start position, also only the first li element shows up since there is no width.
What is incorrect that is making it not calculate the slidee width initially?
** NOTE: this is in a directive with isolate scope, if that effects anything.
Hey, I just saw this now, apologies.
I will take a look at it this week or so. Sorry, busy week.
no worries, @gigerbytes. thanks for taking a look.
Sorry, I haven't used jade before.
Just an idea, have you tried setting a 'min-width' to the slidee, just to see if it /might/ work?