jQuery UI Widgets Forums Grid Autorowheight with widget keeps growing

This topic contains 2 replies, has 2 voices, and was last updated by  apelton 6 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • apelton


    * I have a jqxGrid with autorowheight and autoheight set to true.
    * For one of the columns I have defined a custom widget via createwidget and initwidget functions which appends some HTML to that cell element.
    * When clicking in a row now, the rows keep growing taller.
    * I see that this issue is related to a forum post in the past about autorowheight with a custom cellsrenderer that contains an element with height: 100%
    * However, in this case, my custom widget does not declare any height.
    * jqxGrid is adding an extra DOM element with class jqx-widget to the cell that has a height and width set to 100%.

    What I have tried
    * From the element reference in createwidget: function(row, col, val, element){…}, I have tried to use jQuery to remove the height 100% from the element, as well as set it to zero, etc. as well as margin to zero, so that it wouldn’t do anything but contain my custom HTML (which my custom HTML does not have a height 100%). I have even tried to get the parent of the element, remove the element, and attach the HTML/widget code to the parent in order to bypass this layer that is setting the height to 100% (which doesn’t work with autorowheight).
    * However, when I do the above, it will set a margin-top value to some number in order to center the content vertically, but I want it at the top. Even if I put margin-top to zero on the element and/or my HTML div itself, jqx seems to override it at render time and enforce putting a margin value in it.

    * How can I use autorowheight with custom widget and make jqx not set height/margin for the element container reference so that the row won’t keep growing in size with autorowheight?


    Hello apelton,

    For the margin, are you using CSS to override the default value, if so, try adding !important at the end of the margin.

    margin-top: 0px !important;

    Can you send us a simple example of the autorowheight and autoheight issue you are experiencing?
    We want to see how exactly are you setting the grid, and the custom widget.

    Best Regards,

    jQWidgets Team


    I have created an example here: https://jsfiddle.net/87m8j306/

    The problem is with JS lines 85-92.
    * Without line 88, jqx sets height to 100% which causes auto row height to get larger when editing name or age cols.
    * If line 88 is included, then line 89 is necessary because jqx starts putting in a margin to force content vertically centered, but 89 doesn’t work as jqx still forces the margin to a specific value.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.