Support » Plugin: Kirki Customizer Framework » Dimension Control not outputting percentage based value

  • Resolved ThemeAWESOME

    (@tsquez)


    Good morning sir,

    I have been using your dimension control (https://aristath.github.io/kirki/docs/controls/dimension.html) to set the width of elements in my theme to 100%.

    However I just noticed that when I look at the page source it is not showing 100%, just 100:

    .top-sidebar.grid-container{max-width:100;}
    .inside-top-sidebar{max-width:100;}
    .site-header.grid-container{max-width:100;}
    .inside-header{max-width:100;}

    Also when I go into the customizer and look at the sections pertaining to those above, it shows 100% in the dimension field. Also here is the code I have in the customizer for the .top-sidebar.grid-container:

    XXXXXX_Kirki::add_field( 'xxxxxx_customizer', array(
    	'type'        => 'dimension',
    	'settings'    => 'top_sidebar_width',
    	'label'       => esc_attr__('Top SideBar Main Container Width','xxxxxx'),
    	'tooltip'     => esc_attr__('Set the width of the container that holds the Top Sidebar. Default is 100%.','xxxxxx'),
    	'section'     => 'xxxxxx_top_sidebar',
    	'default'     => '100%',
    	'priority'    => 1,
    	'transport' => 'postMessage',
    	'js_vars'   => array(
    		array(
    			'element'  => '.top-sidebar.grid-container',
    			'function' => 'css',
    			'property' => 'max-width',
    		),
    	),
    	'output'      => array(
    		array(
    			'element' => '.top-sidebar.grid-container',
    			'function' => 'css',
    			'property' => 'max-width',
    		),
    	),
    ) );

    (the xxxxx represents the name of my theme which I took out)

    Did I do it wrong again…lol or do you have any ideas?

Viewing 4 replies - 1 through 4 (of 4 total)
  • It’s not your fault…
    It’s actually a bug in wp-core (see https://core.trac.wordpress.org/ticket/34290)

    The solution is to use %% instead of % for the default value.
    I pushed a fix on https://github.com/aristath/kirki/commit/a886aed13e1897500a2f702a289548847417b2f2 (will be included in the next release) for this.
    Until 3.0.10 is released you can manually apply that change in your copy. 🙂

    Also a note about your code:
    You don’t need to write both js_vars and output.
    Instead you can do this:

    
    XXXXXX_Kirki::add_field( 'xxxxxx_customizer', array(
    	'type'        => 'dimension',
    	'settings'    => 'top_sidebar_width',
    	'label'       => esc_attr__('Top SideBar Main Container Width','xxxxxx'),
    	'tooltip'     => esc_attr__('Set the width of the container that holds the Top Sidebar. Default is 100%.','xxxxxx'),
    	'section'     => 'xxxxxx_top_sidebar',
    	'default'     => '100%%',
    	'priority'    => 1,
    	'transport'   => 'auto',
    	'output'      => array(
    		array(
    			'element' => '.top-sidebar.grid-container',
    			'function' => 'css',
    			'property' => 'max-width',
    		),
    	),
    ) );
    

    By setting transport to auto, the js_vars argument is auto-calculated from output. It’s a lot simpler this way 😉

    Thread Starter ThemeAWESOME

    (@tsquez)

    Awesome sir thank you.

    For transport = auto, is that for any element I add? Also there’s no mention of 'transport' => 'auto' on the doc site https://aristath.github.io/kirki/docs/arguments/transport.html

    • This reply was modified 6 years, 8 months ago by ThemeAWESOME.

    For transport = auto, is that for any element I add?

    Any element that changes the CSS on your site and not the HTML. So If you have a control that adds CSS but at the same time also changes the layout of your site for example, then it won’t work as expected. The CSS will be added but since there’s no refresh the layout won’t change (unless of course the layout changes via CSS and does not require any actual markup changes in your page).
    The rule here is that if a control changes the CSS and nothing but the CSS, it will work.

    Also there’s no mention of ‘transport’ => ‘auto’ on the doc site

    You’re right, that needs updating.

    Thread Starter ThemeAWESOME

    (@tsquez)

    Ahhh gotcha. Again thanks for taking the time to provide assistance. Greatly appreciated amigo 😉

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Dimension Control not outputting percentage based value’ is closed to new replies.