Tagged: 

Viewing 5 reply threads
  • Author
    Posts
    • January 25, 2016 at 6:43 am #5709
      stemuedendron
      Member

      I wonder if there is a way to hide fields until they are ready positioned.

      I have a settings page with many fields in a group and with conditions. The layout is based on the 12 column grid in group fields. When I load the page I see initially all fields and they are wrong positioned until the page load is ready (3-4 sec). Only after this gap my initialy hidden fields are hidden correctly following the conditions and the grid layout is correct. This looks a little bit ugly and is confusing for end users.

      So is there a way to change this?

    • January 25, 2016 at 8:46 am #5711
      kattagami
      Member

      +1

      Have the same problem with group fields + condition.

    • January 25, 2016 at 12:33 pm #5722
      Steve
      Keymaster

      This is just the nature of a web page loading. If this was the front-end of the site, you would probably try a little javascript to show a loading icon. You may want to try this in the backend as well. Here’s a tutorial I found.

      Let us know how this works for you.

    • January 25, 2016 at 5:07 pm #5745
      stemuedendron
      Member

      Ok, following your hint and the Information here I have found a way to display the settings form after all fields are on the right place and conditionally displayed or hidden:

      1. Create hide-form-table.css

      
/*
 hide <table class="form-table"> (class used for wordpress settings pages)
*/
.form-table {
	display:none; 
}

      2. Create show-form-table.js

      
/*
 on document.ready show <table class="form-table">
*/
(function($) {
    $(document).ready(function() {
    	$(".form-table").show();
    });
})(jQuery);

      3. Add script and style to my-plugin.php or theme (functions.php)

      
// javascript and css to initially hide class form-table and show it on document.ready
add_filter('piklist_assets', 'my_assets');
 
function my_assets($assets)
{
  array_push($assets['scripts'], array(
    'handle' => 'my-javascript',
    'src' => plugins_url('my-plugin/js/show-form-table.js'),
    'ver' => '1.0',
    'deps' => 'jquery',
    'enqueue' => true,
    'in_footer' => true,
    'admin' => true,
    'front' => false
  ));
 
  array_push($assets['styles'], array(
    'handle' => 'my-admin-styles',
    'src' => plugins_url('my-plugin/css/hide_form_table.css'),
    'ver' => '1.2',
    'enqueue' => true,
    'in_footer' => true,
    'admin' => true,
  ));
 
  return $assets;
}

      To make it better I have to add some kind of loading hint. This is not really nice but it works for me. One thing I have missed: there is no own class or id for the entire piklist settings form so I have to use form-table class which is used by all other wordpress settings pages too. If you want to use this on other pages or posts you have to use other css id’s or classes.

      Thanks.

    • January 25, 2016 at 5:48 pm #5746
      Steve
      Keymaster

      @stemuedendron– Glad you got this to work! Just a few things:

      1) WordPress doesn’t use ID’s or Classes on the settings sections, so neither does Piklist… we do everything the WordPress way.

      2) This “may” effect other features of Piklist that depend on fields rendering in a certain order. Just be aware of that.

    • January 25, 2016 at 6:33 pm #5749
      stemuedendron
      Member

      OK, I will be watching that for side effects.
      Thanks.

  • Author
    Posts
Viewing 5 reply threads
  • The topic ‘hide fields until layout is ready’ is closed to new replies.