Wordpress Deployment Overrides Caspio Settings

[glissando]

Dropdown Listboxes are  configured in Caspio to show 5 rows before scrolling is required.  Wordpress deployment only shows the first row before scrolling is required. 

This makes for an undesirable user experience and any help fixing it would be greatly appreciated. I prefer a solution that does not require using iFrames.

Top image is the Caspio configuration. Lower image is what it looks like on Wordpress.

Thanks

[Hastur]

Hi @glissando

Can you send me the URL link of your WEB site with the datapage deployed?

Looking forward to your reply.

[glissando]

http://ilevelbrands.com/add-promotion-category-admin/

There are multiple pages affected but this is the one in the screenshot. Is this what you need?

 

Thanks

[Kurumi]

The link that you have provided gives 'Page not found'. Here:

Or you can send the Deployed URL instead. 

[glissando]

Let me know if this works

https://c0abf874.caspio.com/dp/3B606000fafd98d82ab64461ae8e

Thanks

[glissando]

It does require a login as it has security.  I will post again in a bit to provide you access.  Thanks

[glissando]

Thanks everyone. I was able to get this resolved through another source. I appreciate your responding.

[DefinitelyNot31337]

Hello @glissando,

 

You may try adding this style in the Header of your DataDage configuration (HTML Editor disabled from the advanced tab).

<style>
  
  select[multiple] {
    height: 100% !important;
  }
  
</style>

Note: If the form element is a Listbox, Setting the height to "100%" will follow the rows specified in Caspio(shown below). You may opt to set this value to a fixed value such as "100px" so your Listboxes are of uniform height.

 

Hope this helps.

 

-DN31337!

[glissando]

Thank you! 

I got a solution that added custom CSS to the WP website but this looks like a solution that I prefer.

[DefinitelyNot31337]

In addition, if you wish to dynamically set the height of the listbox, you may add the code below on the Footer of your DataPage (HTML Editor disabled from the Advanced Tab).

 

The pre-requisites for this to work is that the CSS rule posted above is in your header, and that the "Allow multiselection" option is checked OR with some JavaScript, you have set your dropdowns to allow multiple selection.

 

<script>

document.addEventListener('DataPageReady', function() {

  document.querySelectorAll('select[multiple]').forEach(function(elem) {
	elem.size = elem.length;
  });

})

</script>

[PotatoMato]

Hi! Just to update this. Caspio's WordPress deployment will be deprecated stating Oct 23 2022. You can check their article: https://howto.caspio.com/deprecations/deprecation-of-wordpress-deployment-for-datapages/

[autonumber]

Hello! Just to add, if you are using WordPress.org to embed your DataPages and since this will require a plugin, you can also download JS Plugins here: https://wordpress.org/plugins/tags/javascript/ you can download from this list as long as it accepts JS.