What is making all divs with class .box stacking?
-
I'm making quick site to consume API with different news as an excercise. Until I've implemented logic in Angular it was allright (altough i doubt that Angular is the issue here). Thing is that all of properties that I've grabbed from url and displayed are stacked one on another causing visual gibberish. All except {{article.title}} which makes me guess it has something to do with css positioning.
You can see actual result here with code.
Stylus code:
html, body
width 100%
height auto
min-width 800px
background url('http://wallpaperlatest.com/wp-content/uploads/cool-nike-wallpaper-30.jpg') no-repeat center fixed.header
//TODO.grid
padding 10px
width 100%
height auto.box
background rgba(255, 255, 255, 0.5)
display inline-block
width 300px
height 400px
margin 10px 5px
box-shadow 0 2px 1px -1px.image
background-repeat no-repeat
background-position center
position absolute
width 300px
height 200px
box-shadow 0 2px 1px -1px.image > img
.author
background rgba(255,255,255,0.4)
position absolute
right 0
top 170px
padding 5px 10px
float right.author > p
margin 0 0.info
width 300px
height 200px
position absolute
top 290px
padding 10px.title
font-size 1vhmin.upVotes
position absolute
top 170px.date
position absolute
top 170px
right 10pxmain(ng-app='CamperNews')
h1(style="text-align: center;")
| Camper News
a(href='http://wallpaperlatest.com/wp-content/uploads/cool-nike-wallpaper-29.jpg' target="_blank")
small FreeCodeCamps zipline
.container-fluid(ng-controller='MainCtrl as ctrl')
.grid(ng-repeat="article in news")
span
.box
.image(ng-style="{'background-image':'url({{article.image}})'}")
.author {{article.author}}
.info
.title
p {{article.title}}
.upVotes
i.glyphicon.glyphicon-heart {{article.upvotes}}
.date {{article.date | date:'dd MMMM yyyy on HH:mm'}}
-
what kind of jsreport recipe are you using? can you provide an example of the problem here? -> https://playground.jsreport.net
by the way your codepen link seems to no be working (the result is not shown properly)
