Looking to rearrange the layout of jqgrid

I need to reposition the jqgrid away from its default top left position. I have attempted some adjustments but they are not working as expected. Below is the code snippet for your review and suggestions:

Here is the HTML code snippet:

<div>
    <table id="table" style="border-spacing: 7px 7px; margin-left: 5px">
        <tr>
            <td>
                <input style="margin-left: 10px;" type="button" value="Add" id="btn_addusers" />
            </td>
        </tr>
    </table>
    <table id="users_grid" style="left: 300px">
    </table>
</div>

And here is my JavaScript code snippet:

$(document).ready(function() {
    $("#btn_addusers").click(function() {
        $("#users_grid").clearGridData(true).trigger("reloadGrid");
        $("#users_grid").jqGrid({
            datatype: "local",
            height: 'auto',
            width: 'auto',
            colNames: ['User ID', 'User Name'],
            colModel: [
        { name: 'userid', width: 60 },
        { name: 'username', width: 120 }

    ],

            caption: "Users in Private space"
        });
        var mydata = [
        { userid: "312171", username: "D, Gnana Xavier" },
        { userid: "311763", username: "Sangeetha" },
        { userid: "312185", username: "Amrutha" },
        { userid: "312186", username: "Ramesh" }
        ];
        for (var i = 0; i <= mydata.length; i++)
            $("#users_grid").jqGrid('addRowData', i + 1, mydata[i]);

    });
});

Answer №1

When working with jqGrid, it's important to note that the plugin adds several divs around the table element. To control the position of the table using CSS, you need to nest the <table> within a <div> and apply styles to the outer div. For instance:

<div style="margin-left: 200px">
    <table id="users_grid"></table>
</div>

Answer №2

Following the suggestion of @aristos, I will now elaborate on my response.
To set the user position within a relative div, use the following structure:

<div style="position:relative;">
    <table id="table" style="border-spacing: 7px 7px; margin-left: 5px">
       <tr>
          <td>
            <input style="margin-left: 10px;" type="button" value="Add" id="btn_addusers" />
          </td>
       </tr>
     </table>
    <table id="users_grid" style="left: 300px;position:absolute!important;">
    </table>
</div>

It is important to note that

If the parent container has a position:relative property,
and the content has an absolute position, it can be moved within the container.
You can now utilize the left and top attributes to position the table.
However, it will remain inside the boundaries of the div.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The browser has blocked access to XMLHttpRequest from a specific origin due to the absence of the 'Access-Control-Allow-Origin' header in the requested resource

After developing an Asp.Net Core 3.1 API and deploying it on the server through IIS, everything worked fine when sending GET/POST requests from Postman or a browser. However, I encountered an error with the following code: $.ajax({ type: 'GET' ...

Obtain the alternative attribute value from the adjacent element and save it to a variable using jQuery

I'm a beginner with jquery and am trying my hand at creating a simple drag and drop game using the following HTML structure: <div class="set-text"> <div class="text">cinema</div> <div class="text">post-office</div> ...

How to link a CSS file from a JavaScript file

I have a form for users with fields for first name, last name, password, and confirm password. I've implemented validation to check if the password and confirm password fields match using JavaScript: $(document).ready(function() { $("#addUser").cl ...

Prevent all click and keyup events from being activated until the ajax call finishes

Is there a way to prevent all links from being activated until an ajax call is complete? I am looking for a solution that works for both click events and keyup triggers. In essence, what I am after is: - The Ajax link is activated (either through a clic ...

Tips on inserting a script prior to the body tag

It appears to be a straightforward process, but I am struggling to figure out what I am missing: var string1 = document.createElement('script'); $(string1).attr('type', 'text/javascript'); $('body').before($(string ...

Customizing CSS for displayed MDBootrap components

I am currently using MDBoostrap, a styling tool similar to Bootstrap, in my React application. I have a select element that is coded like so: <div> <select id="Regions" style={errorSelect} value={this.state.userRegionId} onChange={this.handle ...

Retrieve the response from the server with the use of a Handler

While utilizing a Handler to run server code, I am encountering an issue where although the answer from the server can be viewed in the browser, it cannot be acquired in my source. This is how I am invoking the handler: $.ajax({ type : "json", ur ...

Leveraging static elements in a fluid design using solely CSS whenever feasible

Here's a question that requires some logical thinking rather than technical expertise. I've created a design where the header and footer are always fixed at the top and bottom of the window, respectively. However, the elements inside have percen ...

Whenever I nest my div tags within another div element in an HTML document

Whenever I try to position a div inside another div using float, I encounter problems. <div id="main"> <div id="anotherDiv"> <h1>Test</h1> </div> </div> Here is the corresponding style sheet: #main{ ba ...

Easy file security for Windows server website

Is there a simple method to secure a directory or full website without requiring root access (only FTP access) on a Windows server, similar to using htaccess files on Linux? I only need one user to have login capabilities. I want to password protect a ...

Instructions on uploading a PDF file from a Wordpress page and ensuring the file is stored in the wp-content upload directory folder

What is the process for uploading a PDF file on a WordPress page? <form action="" method="POST"> <input type="file" name="file-upload" id="file-upload" /> <?php $attachment_id = media_handle_upload('file-upload', $post->I ...

When the web browser page is zoomed out (Ctrl -), elements do not appear to float

Can you test resizing the window to the minimum (CTRL-)? Here's the link: http://jsfiddle.net/Zty9k/13/ This is the HTML code: <ul> <li><img src="http://i.imgur.com/PBuDAFH.gif"></li> <li><img src="http://i.i ...

I'm curious why I can only see the HTML code and not the three.js code as well

I attempted to run a sample three.js game today, but only the HTML code appeared. I've also installed three.js with npm and tried running it with the VSC Live Server, but it's not working. You can find the source code here. What should be my nex ...

How to address anti-forgery issues when trying to log in while already authenticated in ASP.NET MVC?

When a user is logged in and navigates to the Login Page, an Anti-forgery Error occurs if they try logging in again. An issue arises when attempting to decrypt the anti-forgery token. In cases where the application is hosted by a Web Farm or cluster, it ...

Utilize Bootstrap to align two images in the same row and adjust their sizes accordingly

I am looking to display 2 images side by side on a single row, with the ability for them to resize accordingly when adjusting the page size without shifting to another row. Currently, as I decrease the page size, the second image (the black block in the d ...

Establishing dependencies within the Application_BeginRequest() function

Is it customary to include the following code in a project: protected void Application_BeginRequest() { var container = new UnityContainer() .RegisterType<IUnitOfWork, MyEntities>() HttpContext.Current.Items["container"] = container ...

Establish the year that automatically appears when using Pickadate.js

I've been working on a small project using the pickadate.js plugin. In the default setting, the selected year is always the highest in the list of options. For example, if the range is set from 1910 to 2012, the default selected year will be 2012 a ...

A lone slant positioned at the lower border of an object

Currently, I am working with two images stacked vertically. The dimensions of the top image are set at 100% width and 350px height, while the bottom image size is not a major concern. I am specifically interested in skewing the top image and maintaining a ...

Utilizing JavaScript for validation on an ASPX page within Visual Studio

After entering an email ID in a textbox, the email validation process is initiated. However, it seems that there is an issue where the entire function may not be executed properly. <head runat="server"> <title></title> ...

Exploring the World of Image Galleries: Preloading Compared to AJAX

Currently, I'm facing a dilemma regarding the creation of an image gallery. Should I preload all the images when the page loads, or should I use ajax to fetch new images before displaying them in the gallery? In the example below, I'm looking at ...