Grid container height when in edit mode not dynamically resizing to content

[Stephanie Laurent]

Hi

I have a similar problem as the following issue:
http://paramquery.com/forum/index.php?topic=1048.msg5100#msg5100
however my div overflow is already set to visible but I still have the issue. See attached image.

Basically my grid is contained within 3 other divs see code below:

Code: [Select]

<div id="divContent" class="paddingtop" style="display:block;">
                    <div id="divExcelAllocationArea">
                        <div id="divExcelInfo" style="display: none;">
                            <span class="spanExcelInfoBold">Quick Guide:</span> [Enter] = New line in a Cell  <span class="spanExcelInfoSplit">|</span>  [Tab] = Save changes to the Cell  <span class="spanExcelInfoSplit">|</span>  [Esc] = Exit the Cell without saving changes
                        </div>
                        <div id="divExcelContentGridWrapper">
                            <div id="divExcelContentGrid" ></div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>

my css pertaining to the code above is as follows:

Code: [Select]

#divExcelContentGridWrapper
{
    overflow-x: auto;
    min-width: 835px;
    min-height: 100px;
    background-color: blue;
}

#divExcelContentGrid {
    MARGIN: auto;
    float: left;
    background-color: red;
}

tr.pq-grid-oddRow td{
    background:#fff;
}

div.pq-grid tr td.disabled{   
    text-shadow: 0 1px 0 #fff;
    background:#ddd;
    font-weight: bold;
}

 .ui-autocomplete {
        max-height: 200px;       
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
    }   
   
.pq-grid .pq-editor-focus
    {
        outline:none;
        border:1px solid #bbb;   
        border-radius:6px;
        background-image: linear-gradient(#e6e6e6, #fefefe);

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e6', endColorstr='#fefefe');
        background: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#fefefe));
        background: -moz-linear-gradient(top,  #e6e6e6,  #fefefe); /* for firefox 3.6+ */        
    }
    div.pq-grid
    {
        overflow:visible;
    }   

.clear { clear:both; height:1; line-height:0.1;}

my Grid js code is follows:

Code: [Select]

$cgrid = $("div#divExcelContentGrid").pqGrid({
                showTop: false,
                flexHeight: true,
                flexWidth:true,
                sortModel: { on: false },
                showBottom: false,
                dataModel: dataModel,
                colModel: header,
                selectionModel: { type: 'cell' },
                scrollModel: { autoFit: true },
                editModel: {
                    saveKey: $.ui.keyCode.ENTER,
                    keyUpDown: false,
                    cellBorderWidth: 0
                },
                numberCell: { show: false },
                resizable: true
            });

            // Refresh for IE11 display issue
            $cgrid.pqGrid("refreshView");

I have  tried various options but I just cannot get the height to adjust to the edit mode of a cell. If I remove the div with ID: divExcelContentGridWrapper then everything is fine but I had to add that div because otherwise when I have too many columns the grid would stretch out of the screen thus overflow-x did not work so I added the wrapper in order to make the div scroll horizontally of there are too many columns. But now this affects the vertical scrolling of the grid.

Can you please suggest a fix for this.

Regards

[paramvir]

I've tried to make a jsfiddle by copying the styles from you post. It's working fine, unless I missed something. When the last column (having textarea ) is in edit mode, outer div i.e., divExcelContentGridWrapper can be scrolled vertically to see the whole texarea.

http://jsfiddle.net/b6b710mz/110/

[Stephanie Laurent]

Hi

Thanks, your sample is 100%. The problem is we don't want the vertical scrollbar. If you now remove the "overflow-x:auto" from the wrapper, the vertical scrollbar disappears. My guess is that because of certain floating or absolute positioned elements within the grid causes this behaviour?

So at the moment we either have to live with the vertical scrollbar if we want to scroll horizontally or without the horizontal scrollbar if we want the text area to expand "above" all elements below it when a cell is selected. Am I right in saying this?

Thanks

[paramvir]

So at the moment we either have to live with the vertical scrollbar if we want to scroll horizontally or without the horizontal scrollbar if we want the text area to expand "above" all elements below it when a cell is selected. Am I right in saying this?

Yes that seems to be correct. Either both scroll bars or none for the container div. I guess you need maxWidth option similar to maxHeight as you want the width of grid not to grow beyond a certain point while using flex width.

[Stephanie Laurent]

Thanks. I guess we will treat this as a known limitation and just work around it by either making the grid fit all columns or just make it stretch out of the screen in those cases where there are too many columns to display nicely to the user.

Thanks again