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 10px

    main(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'}}


  • administrators

    hi! same answer as this post

    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)


Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.