Kendo UI grid pager not displaying properly

[Jacques]

 Original question here: http://stackoverflow.com/questions/31138694/kendo-ui-bug-kendo-grid-pager-not-aligned-with-bottom-of-grid

  Recently, I have been using Kendo UI and I have run into the following problem: The pager for my Kendo grid is not flush with the bottom of my grid. I've tried editing the CSS styling of `k-grid-pager` but it does not solve the problem. For added clarification, the pager used to be in the upper left corner BEFORE I made the top margin of the pager 450px (to simply shift it down). However, I would like a fix that is dynamic in the sense that it can adapt to the overall height of the grid. Also note the black border floating off to the side-that is part of the pager, how? They must be hiding a class from me... Or I just don't know it. Anyhow, here is an image of what my messed up grid looks like: ![KendoPls][1]

The CSS code I used to modify the grid and its styling:

#konTable2 {
position:absolute;
left: 150px;
margin-right: -50%;
background-color: rgba(0,0,0,0);
border:0px solid rbga(0,0,0,0);
}
.k-grid tr th {
   border-bottom: 1px solid black;
   text-align: center;
   height:25px;
}
.k-grid tr td{
background-color: #494949;
border-bottom: 1px solid black;
text-align: left;
mix-blend-mode:hard-light;
}
.k-grid-pager {
position: relative !important;
float: left !important;
background-color: lime;
width:900px;
left:50%;
margin-right: -450px;
margin-top:450px;
}

And finally the html/js used to layout the grid: 

    <div id="konTable2"></div>
    <script src="../json/Koncerts.jsonp"></script>
    <script type="text/javascript">
    var myConcerts = concerts;
    $(function() {

    var dataSource = new kendo.data.DataSource({
    data: myConcerts
    });

     $('#konTable2').kendoGrid({
    columns: [{ title: "Artist", field: "artist", template: "<div class='name' style='width:200px'>#= artist #</div>"},
    {title: "Concert", field: "concert", template: "<div class='name' style='width:250px'>#= concert #</div>"},
    {title: "Date", field: "date", template: "<div class='date' style='width:150px'>#= date #</div>"},
    {title: "City", field: "location.city", template: "<div class='name' style='width:150px'>#= location.city #</div>"},
    {title: "State", field: "location.state",template: "<div class='name' style='width:150px'>#= location.state #</div>"}
    ],
    dataSource: {
    data: myConcerts,
    pageSize: 5
    },
    selectable: true,
    sortable: true,
    scrollable: false,
    pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
    });
    });
    </script>
**<h1>UPDATE</h1>**
I have modified the CSS. I am now mainly modifying `k-pager-wrap` to change the positioning of my pager, and it looks a little better, and more like this:
![KendoGRid Update][2]
*Notice:* I did not include the vertical translation as in the previous example. Now you can see how the pager just wants to chill at the upper left corner of the grid... Also, here is the new relevant CSS:

.k-pager-wrap {
width:900px;
position: relative;
float:right;
left:50%;
margin-right: -450px;
mix-blend-mode: normal !important;
}
.k-grid-pager {
width:900px;
}


  [1]: http://i.stack.imgur.com/fKn7F.png
  [2]: http://i.stack.imgur.com/957GI.png

[Jacques]

I recommend looking at this on stackoverflow, where the formatting is MUCH better. Here are the images you cannot view in the question.

[Jacques]

NVM I found the problem... Apparently I forgot about the table styling I made before I started using Angular and Kendo... Yay problem solved!