Adjust height of data-map dropdown

Adjust height of data-map dropdown

Posted by: apacbi on 14 September 2017, 11:29 am EST

• 

  apacbi

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:29 am EST

  Hi,

  I am using data-map attribute in flexgrid column to show dropdown values. However, I notice the dropdown height is fixed to 128px.

  How do I adjust the height of the dropdown?

  Thanks & Regards,
  
  Rus

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:29 am EST

  Hello,

  The “max-height” css attribute of the DataMap dropdown list has been set to 128px. You can reset the max-height and height of the dropdown list by using the following css:

  [style]

      .wj-listbox{
          max-height: 300px;
          height:200px;
      }
  

  [/style]

  Kindly refer to the attached HTML Page which implements the same. Hope it helps.

  Thanks,
  
  Manpreet Kaur
  
  2016/01/DataMapHeight.html

• 

  apacbi

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:29 am EST

  Hi Manpreet,

  With the css you provided, it is still showing as 128px (see attached css inspector).

  Thanks & Regards,
  
  Rus

  

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:29 am EST

  Hello,

  You can use the following css to change the height and max-height of the dropdown list:

  [style]

      .wj-listbox{
          max-height: 300px!important;
          height:200px;
      }
  

  [/style]

  Kindly refer to the attached HTML Page which implements the same. Hope it helps.

  Thanks,
  
  Manpreet Kaur
  
  2016/01/NDataMapHeight.html

• 

  apacbi

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:29 am EST

  Hi Manpreet,

  It works now, thanks!

  Regards,
  
  Rus

• 

  jean.dedalmas

  • Post Options:
  • Link
    Copy

  Posted 27 November 2019, 1:36 pm EST - Updated 3 October 2022, 6:41 pm EST

  Manpreet,

  I have tried following all the steps in this thread, but my DataMap is stuck at 80px height.

  I have attached screenshots of my CSS and web inspector. Can you advise on how to get around the 80px height limitation?

  Regards,

  Jean

  CSS:
  
  

  DataMap Dropdown height stuck at 80px:
  
  

  Inspector confirms that max-height is limited to 80px despite above CSS:
  
  

  

  1082×133 41.3 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 27 November 2019, 11:41 pm EST

  Hi Jean,

  Could you please try using the following CSS rules:

  .wj-dropdown-panel.wj-grid-listbox.wj-control.wj-content.wj-listbox {
    max-height: 500px !important;
    height: 300px !important;
  }
  

  Please refer to the sample link below for reference:

  https://stackblitz.com/edit/js-fkbtaa

  Regards,
  
  Ashwin