Button in partial view takes the page as bottom on first load

55 Views Asked by At

I have an Ok-Button in a Partial View. The CSS looks like this:

#okGroups {         
margin-top:100%;
    position: absolute;
    width: 250px;
    height: 50px;
    bottom: 20%;
    right: 380px;
    display: block;
    padding: 19px 20px 10px;
    line-height: 15px;
    border-top: 1px solid #e5e5e5;
}

The problem is, that the position of the button is not like expected when the window opens the first time (the button takes the page bottom as bottom I guess because when resizing the window, the button does not change its position). Once clicking the ok button, the button position is like wanted (it takes the bottom of myWindow as bottom and goes with the windowbottom when I resize the window). Any suggestion will be appreciated.

The content of My Partial View:

<div id="myWindow">
    <div class="form-group col-lg-12" id="someId">
        <div class="input-group input-group- mb-3">
            <div>
                @(Html.Kendo().Grid<Xyz.Models.GroupModel>()
                                .Name("groupsGrid")
                                  .Columns(columns =>
                                  { 
                                  columns.Bound(g => g.Name)
                                .HtmlAttributes(new { @style = "min-height: 500px; height:90%; width:80%;" })                                          
                                .Pageable(pageable => pageable
                                ...
                                )
                    .Scrollable(scr => scr.Height(560))
                    .DataSource(dataSource => ...
                )
            </div>
        </div>
    </div>     
    <div id="buttonDiv" class="form-group row change">
        <button type="button" class="k-button" id="okGroups">Ok</button>
    </div>
</div>@*endwin*@

In my javascript file, I load the Partial View like this:

function onClick() {  
            allMyGroupsWindow.kendoWindow({
                width: "1200px",
                height: "900px",
                title: "All Groups",
                modal: true,
                open: function (e) {
                    $.ajax({
                        url: general.createMethodUrl("", "Home", "LoadPartialView"), 
                        method: 'GET',
                        success: function (result) {
                            getAllMyGroupsWindow().html(result);
                        }
                    });
                }
            });        
            allMyGroupsWindow.data("kendoWindow").open().center();
        }

How can I ensure that it's always in the right position (into the window)?

0

There are 0 best solutions below