How can I set the minimum size of a ParamQuery Grid integrated within a Bootstrap tab?

My grid is hidden "behind" a bootstrap tab, only visible when the tab is clicked.

However, each time I click the tab, the grid collapses to zero size, forcing me to expand it manually every time.

I attempted to prevent this by setting the "object" to 

obj.collapsible = { collapsed : false }
, but it had no effect.

I also tried adjusting the resizable property in the following code:

 var obj = { width: 700, height: 400, title: "ASO REPORTS",resizable:true ,draggable:true };

Setting resizable to false prevented me from resizing the grid at all, making the data completely inaccessible.

I considered using the min-width option, but it only applies to individual columns, not the table itself.

Is there a solution to maintain a set size for the grid, even when hidden behind the tab until it's clicked?

jquerycsstwitter-bootstrapbootstrap-tabsparamquery

Answer №1

<div style="height:100%;">
  <div id="grid_json" style="margin:auto;"></div>
</div>

var obj = {
            width: "100%",
            height: '80%',
            resizable: true,
            title: "Grid Created Using JSON",
            showBottom: false,
            scrollModel: { autoFit: true },
            dataModel: { data: data }
        };
        $("#grid_json").pqGrid(obj);
    });

I trust this information will be beneficial for you. Feel free to customize the height according to your specific needs. It's important to note that the div height is a requirement in this setup.

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 functionality of switching between two layouts using a JavaScript button is currently not functioning

My concept involves implementing a switch that alternates between displaying a bootstrap carousel and cards. Essentially, one of them will be visible when the button is pressed while the other remains invisible. Initially, I am attempting to hide my existi ...

javascripthtmlcss

The distinction between a JSON file that is generated dynamically from a response and one that is

I've been working on configuring a bootstrap typeahead feature and here is the jquery code I am using: $(function () { $.ajax({ type: "GET", url: "http://example.com/search?callback=my_callback", data: { keyword: &apos ...

javascriptjqueryajaxjsonbootstrap-typeahead

Trouble with DOM loading due to external JavaScript file reference

I'm having an issue with referencing the jQuery library in a master page. Here is how I am including it: <script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"> After loading the page, I only see a blank screen. The HTML code is th ...

javascriptjqueryasp.net-mvc-2

The Daterangepicker function moment() outputs numerical values

Within my .cshtml file, I have integrated a daterangepicker.js script. This page retrieves the date range (from date, to date) from a parent page using ViewBag. The code snippet is as follows: var _FromDate; var _EndDate; $(function () { var from1 = ...

javascriptjquerymomentjsunix-timestampdaterangepicker

Using jQuery on the client-side to interact with a MongoDB database

Currently, I'm in the process of developing a basic example application to gain experience with using MongoDB. My goal is to create a single web page that can interact with a local MongoDB server by adding and removing content dynamically through jQue ...

javascriptjquerymongodb

I'm experiencing issues with my custom CSS file conflicting with Bootstrap

It's strange, my custom main.css doesn't seem to have any effect on changing the font size or location of the text. However, as soon as I remove the line that links to bootstrap, it starts working perfectly. I believe that the bootstrap.css file ...

htmlcsstwitter-bootstrap

Deactivate tag Script using JQuery

Is there a way to dynamically remove two <script> tags from a page at the document ready event? Each tag is assigned its own unique id. I attempted to use the following code: $("#idPrimoScript").remove(); $("#idSecondoScript").remove(); However, t ...

javascriptjquery

Vertically center text in an email within a div using HTML

i'm struggling to perfectly center the text within a div in an HTML email. While it appears fine in Browserview with proper line-height, issues arise in Apple Mail and Outlook where it doesn't align vertically. <div style='width: 80%; ...

htmlcssoutlookhtml-emailtext-align

Use CSS3 to hide the <li> elements initially and make them appear when the <li> is clicked on

Click here How can I hide the "subline" line from the list and make it visible when the user clicks on the "sub" line, pushing the other lines down? I'm hoping for a solution that doesn't involve using Js or JQuery. Thank you in advance! ...

htmlcss

What is the best way to ensure that TwentyTwenty.js images are always positioned in the

Looking to utilize the TwentyTwenty.js code for image comparison, but facing an issue where the images are aligned to the left side. Is there a way to keep them centered without explicitly setting the width on the container? <div id="beforeafter" class ...

jquerycsstwentytwenty

CSS: using syntax to target element by its unique identifier

Check out this guide: I followed the instructions and used an external stylesheet. I added #menu before each CSS item, for example: #menu ul{ font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none;} or: #menu ul li{ displ ...

css

Tips for exchanging JSON data between HTML and PHP using jQuery Ajax?

Hello there! I am just starting to learn PHP and jQuery, and I have been experimenting with some code to understand how things work. However, I seem to be having issues with sending data back and forth between my webpage and the PHP file on the server. Her ...

javascriptphpjqueryajaxjson

What is the best way to add a directional hover effect to a filter?

I am attempting to implement a sliding hover filter effect on an image. The original filter I have is set to grayscale(1). What I want to achieve is for the filter to transition directionally instead of having a slider overlay effect, in order to change i ...

csshovercss-filters

Column with a set width in Bootstrap

Is it possible to create a fixed width right column in Bootstrap while keeping the left column responsive? I am currently working with Bootstrap 2.3.2 https://i.stack.imgur.com/xOhQo.png (source: toile-libre.org) I want the right column to maintain it ...

htmlcsstwitter-bootstraptwitter-bootstrap-2

if the checkbox is selected, navigate to the displayed section

In my scenario, I have a total of 5 checkboxes and corresponding to each checkbox, there are 5 div elements. The functionality that I need is that when a checkbox is checked, the associated div should be displayed; otherwise, it should be hidden. The check ...

javascriptjquerycsscheckbox

Each function in Sass is compiled with a dollar sign preceding it

I'm having trouble using an each loop in Sass because the css is compiling with the variable names instead of their content. $green-1: #9ae200; $green-2: #5ea600; $color-list: green-1 green-2; @each $single-color in $color-list { &.#{$single ...

csssass

The variable req.body.Dates has not been declared

I am currently working on a project that involves dynamically populating two drop down menus using SQL Server. Depending on the selected items, I need to load a specific ejs template using AJAX. My goal is to load data based on the selected criteria. For e ...

javascriptjquerynode.jssql-serverexpress

Failed to add a new entry to the Sharepoint 2013 List

Having trouble saving an item to a SharePoint list using Knockout.js and REST. In my Ajax POST request, I've used ko.toJSON but the entry doesn't show up in the SharePoint list. It's possible that I'm passing the wrong parameter value. ...

jqueryhtmlajaxknockout.jssharepoint-2013

Parsing JSON with jQuery in Grails is a seamless process that allows for efficient

I've implemented an ajax function that successfully sends data to my controller. var ids = grid.jqGrid('getGridParam','selarrrow'); if (ids.length>0) { var names = []; for (var i=0, il=ids.length; i < il; i++) { ...

jqueryajaxjsongrails

ordered selection array checkbox for php

<form method='post' action=''> <label for="x1">X1</label> <input id="x1" name="checkbox[]" type="checkbox" value="x1" /> <label for="x2">X2</label> <input id="x2" name="checkbox[]" type="check ...

phpjquery