No announcement yet.
  • Filter
  • Time
Clear All
new posts

    ListGrid.minimumCellHeight does not seem to be working

    The documentation here:
    ... indicates that we should be able to use "minimumCellHeight" on a ListGrid to set the row height.
    I have tried this and does not seem to work.
    I also tried to change this Showcase example:
    ... to use this slight change to the example provided:

        data: countryData,
            {name:"countryName", title:"Country", width:120},
            {name:"background", title:"Background"},
            {name:"countryCode", title:"Flag", align:"center", width:50, type:"image", imageSize:24, imageURLPrefix:"flags/24/", imageURLSuffix:".png"}
        wrapCells: true,
        minimumCellHeight:  100
    ie. changed "cellHeight: 56. to minimumCellHeight: 100

    That does not work either. Is there something I need to addd to this?
    Also, is there a way to set the default minimum cell height globally for all ListGrids?

    Just use cellHeight to control the cell height.

    minimumCellHeight is a calculated value that prevents problems like trying to set the cell height too low to accommodate features like checkboxes in boolean fields. We'll clarify in the docs in case someone else tries to use it instead of cell height.

    Yes, you can change the cellHeight setting system-wide via the Skinning system. Also, it's automatically modified by your Density - see Canvas.resizeControls().


      Thanks for that feedback. I did not want to set the cellHeight explicitly so that the automatic adapters can do their job and minimumCellHeight seemed to do that.

      Regarding using the skin editor to set the default cell height, I did go through all the properties but cannot identify the right one - they all seem to be to do with borders and margins - can you tell me which property it is please? (I am on 12.1 Pro


        We didn't say use the Skin Editor, we said using the Skinning system. You can't currently change component sizes in the Skin Editor (other than indirectly by eg increasing padding). If you read the docs for Canvas.resizeControls(), you'll see that changing sizes is a complicated problem, since they are inter-related.

        If you need more help, first start by explaining what you're trying to accomplish. We can't recommend an approach until that has been clearly explained.


          Ah my apologies - saw "skinning" and made wild assumptions.
          The Canvas.resizeControls() does solve this a bit but as pointed out in the documentation - there are issues with making the increase too much.
          Basically I am trying to make the listgrid rows slightly higher for touch devices as the default behaviour seems to make the rows smaller on touch devices (iPad and tablet).
          Ideally I would like to be able to have most things appear bigger on a touch device for those wilth less dainty fingers - laptop/desktop sizes are perfect.
          Instead of changing the size in every screen, I was hoping there is an override of the component default that is set globally for specific components.
          I have read the adaptive design section but that seems to be more about positioning and folding components rather than size.


            We don't make things smaller on mobile. You may just be comparing a high DPI mobile screen to a lower DPI desktop one. It's the same number of CSS pixels.

            Use resizeControls() to make things larger on mobile if that's your preference - or you can even leave it up to the user. While our skinning system makes it simple to change the default cellHeight, it doesn't make sense to alter just that. If the ListGrid cells are too hard to hit, then the text fields, which are basically the same size minus 1px padding, must also be too small, etc.

            If, after resizeControls(), some particular widget strikes you as too big, use the skinning system to shrink it back down.


              Thanks for the advice and the speedy response - much appreciated.