Odd application of the default field styling • Piklist Support

Tagged: css styling

This topic has 10 replies, 2 voices, and was last updated 6 years, 1 month ago by kplaneta.

Viewing 10 reply threads

Author

Posts

December 14, 2015 at 9:40 am #5323

kplaneta
Member

Hi,

I have an “add more” repeater with 8 fields. All of these fields have “columns” setting to place them nicely in the layout. When I repeat these sections more than 20 times and save it, the page on reload applies CSS very slowly. With 30+ sections I need to wait a few seconds before the mess of fields gets ordered.

Since CSS works instantenous I start to believe that the way these styles are applied is non standard. Could you please tell me how CSS styles are applied to piklist and why does it take so long?

Have a nice day
December 14, 2015 at 12:53 pm #5333

Steve
Keymaster

@kplaneta– This shouldn’t be an issue unless you are using a field like the editor. Can you post your field code here?

December 14, 2015 at 12:58 pm #5334

kplaneta

Member

There you go

piklist('field', array(
	'type' => 'group'
	,'field' => $prefix. 'extra_text'
	,'label' => __('Teksty informacyjne', 'piklist-demo')
	,'list' => false // wraps fields in <ul>
	,'fields' => array(
		array(
			'type' => 'textarea'
			,'field' => 'before_dishes'
			,'label' => 'Informacja nad listą dań'
			,'columns' => 6
			,'attributes' => array(
				'rows' => 4
				,'cols' => 50
				,'maxlength' => 200
			)
			,'validate' => array(
				array(
					'type' => 'limit'
					,'options' => array(
						'max' => 200
					)
				)
			)
		)
		,array(
			'type' => 'textarea'
			,'field' => 'after_dishes'
			,'label' => 'Informacja pod listą dań'
			,'columns' => 6
			,'attributes' => array(
				'rows' => 4
				,'cols' => 50
				,'maxlength' => 200
			)
			,'validate' => array(
				array(
					'type' => 'limit'
					,'options' => array(
						'max' => 200
					)
				)
			)
		)
	)
));

piklist('field', array(
	'type' => 'group'
	,'field' => $prefix. 'dish_sizes_names'
	,'label' => __('Nazwy wielkości porcji', 'piklist-demo')
	,'description' => __('Uzupełnij jeśli oferujesz dania o wielu wielkościach porcji.', 'piklist-demo')
	,'fields' => array(
		array(
			'type' => 'text'
			,'field' => 's_dish_name'
			,'label' => 'S'
			,'columns' => 3
			,'attributes' => array(
				'placeholder' => 'np. Dla dzieci'
				,'maxlength' => 20
			)
			,'validate' => array(
				array(
					'type' => 'limit'
					,'options' => array(
						'max' => 20
					)
				)
			)
		)
		,array(
			'type' => 'text'
			,'field' => 'm_dish_name'
			,'label' => 'M'
			,'columns' => 3
			,'attributes' => array(
				'placeholder' => 'np. Na mały głód'
				,'maxlength' => 20
			)
			,'validate' => array(
				array(
					'type' => 'limit'
					,'options' => array(
						'max' => 20
					)
				)
			)
		)
		,array(
			'type' => 'text'
			,'field' => 'l_dish_name'
			,'label' => 'L'
			,'columns' => 3
			,'attributes' => array(
				'placeholder' => 'np. Na duży głód'
				,'maxlength' => 20
			)
			,'validate' => array(
				array(
					'type' => 'limit'
					,'options' => array(
						'max' => 20
					)
				)
			)
		)
		,array(
			'type' => 'text'
			,'field' => 'xl_dish_name'
			,'label' => 'XL'
			,'columns' => 3
			,'attributes' => array(
				'placeholder' => 'np. Dla dwojga'
				,'maxlength' => 20
			)
			,'validate' => array(
				array(
					'type' => 'limit'
					,'options' => array(
						'max' => 20
					)
				)
			)
		)
	)
));

piklist('field', array(
	'type' => 'select'
	,'field' => $prefix . 'display_portions_names'
	,'label' => 'Gdzie wyświetlać nazwy porcji?'
	,'value' => 'no' // default
	,'choices' => array(
		'above_list' => 'Nad całą listą dań'
		,'in_dishes' => 'Przy potrawach o wielu rozmiarach porcji'
	)
	,'sanitize' => array(
		array(
			'type' => 'html_class'
		)
	)
));

piklist('field', array(
	'type' => 'select'
	,'field' => $prefix . 'style_of_list'
	,'label' => 'W ilu kolumnach wyświetlać dania?'
	,'value' => 'list1col' // default
	,'choices' => array(
		'list1col' => __( '1', 'cm2b' )
		,'list2col' => __( '2', 'cmb2' )
	)
	,'sanitize' => array(
		array(
			'type' => 'html_class'
		)
	)
));

piklist('field', array(
	'type' => 'group'
	,'field' => $prefix. 'dishes'
	,'label' => __('Lista dań', 'piklist-demo')
	,'list' => false // wraps fields in <ul>
	,'add_more' => true
	,'fields' => array(
		array(
			'type' => 'text'
			,'field' => 'name'
			,'label' => 'Nazwa'
			,'columns' => 12
			,'attributes' => array(
				'maxlength' => '50'
			)
			,'validate' => array(
				array(
					'type' => 'limit'
					,'options' => array(
						'max' => 50
					)
				)
			)
		)
		,array(
			'type' => 'textarea'
			,'field' => 'descr'
			,'label' => 'Opis'
			,'columns' => 12
			,'attributes' => array(
				'rows' => 3
				,'maxlength' => 160
			)
			,'validate' => array(
				array(
					'type' => 'limit'
					,'options' => array(
						'max' => 160
					)
				)
			)
		)
		,array(
			'type' => 'number'
			,'field' => 'price_s'
			,'label' => 'Cena S'
			,'columns' => 3
			,'attributes' => array(
				'maxlength' => 6,
				'min' => '0',
				'max' => '999',
				'step' => '0.01'
			)
			,'validate' => array(
				array(
					'type' => 'limit'
					,'options' => array(
						'max' => 6
					)
				)
			)
		)
		,array(
			'type' => 'number'
			,'field' => 'price_m'
			,'label' => 'Cena M'
			,'columns' => 3
			,'attributes' => array(
				'maxlength' => 6,
				'min' => '0',
				'max' => '999',
				'step' => '0.01'
			)
			,'validate' => array(
				array(
					'type' => 'limit'
					,'options' => array(
						'max' => 6
					)
				)
			)
		)
		,array(
			'type' => 'number'
			,'field' => 'price_l'
			,'label' => 'Cena L'
			,'columns' => 3
			,'attributes' => array(
				'maxlength' => 6,
				'min' => '0',
				'max' => '999',
				'step' => '0.01'
			)
			,'validate' => array(
				array(
					'type' => 'limit'
					,'options' => array(
						'max' => 6
					)
				)
			)
		)
		,array(
			'type' => 'number'
			,'field' => 'price_xl'
			,'label' => 'Cena XL'
			,'columns' => 3
			,'attributes' => array(
				'maxlength' => 6,
				'min' => '0',
				'max' => '999',
				'step' => '0.01'
			)
			,'validate' => array(
				array(
					'type' => 'limit'
					,'options' => array(
						'max' => 6
					)
				)
			)
		)/*
		,array(
			'type' => 'checkbox'
			,'field' => 'specialstyle'
			,'label' => 'Wyróznij graficznie'
			,'columns' => 6
			,'value' => 'yes'
			,'choices' => array(
				'yes' => ''
			)
		)
		,array(
			'type' => 'text'
			,'field' => 'specialtext'
			,'label' => 'Wyróżnij tekstem'
			,'columns' => 6
			,'attributes' => array(
				'maxlength' => '30'
				,'placeholder' => 'np. "Nowość"'
			)
			,'validate' => array(
				array(
					'type' => 'limit'
					,'options' => array(
						'max' => 30
					)
				)
			)
		)*/
		,array(
			'type' => 'hidden'
			,'field' => 'product_id'
		)
	)
));

December 14, 2015 at 1:09 pm #5337

Steve
Keymaster

Guessing it’s not CSS, it’s something else on your site blocking the load. Possibly jquery itself.

Try using Chrome devtools to see how long everything is loading. When I try it looks like admin-ajax.php slows down on so many repeaters.

Also, Firefox seems to be loading the same page faster for me than Chrome.
December 15, 2015 at 11:03 am #5349

kplaneta
Member

I’ve inspected the problem.

Calls for admin-ajax look ok. In the timeline > frames waterfall diagram I see that parsing HTML took a whole 3,5secs. Dev Tools gives a notice “Forced synchronous layout is a possible performance bottleneck.”. My guess is that the javascript applies classes and ids to elements and the browser keep repainting the HTML after each new addition. Does Piklist add any on the fly?
December 15, 2015 at 11:29 am #5350

kplaneta
Member

Yup. I’ve disabled piklist js files and the page is responsive again.

Do you plan on applying css classes directly to the tags one day? And if yes, when will that happen (more or less). I would like to know that because I’m building a restaurant menu buidler where the number of elements can go far above 50 and that means waiting ~5seks for the page to be usable.
December 18, 2015 at 11:05 am #5377

Steve
Keymaster

@kplaneta– Are you using the latest beta v0.9.9.x? This is working pretty quick for me.
December 18, 2015 at 11:33 am #5379

kplaneta
Member

0.9.9.6
I didn’t update to 0.7 since the list of changes didn’t affect me. Should I?
December 18, 2015 at 2:55 pm #5380

kplaneta
Member

I’ve updated to 0.9.9.7 and the page still freezes on load waiting for the styling to be applied.
December 21, 2015 at 10:58 am #5385

Steve
Keymaster

@kplaneta– We’ll look into it. But I’m not sure it will be fixed before we finish our unit tests, which is probably a few weeks away.
December 21, 2015 at 11:15 am #5386

kplaneta
Member

Thank you. Until that time I should give you an info and will make 100% sure if this is really the JS to blame. Unfortunately at home I have 3 very similarly speced PCs so I cannot check the rendering differences on them but I will go to my friend who has got a monster of a PC and will check how long rendering takes on her spec.

Merry Christmas 🙂

Author

Posts

Viewing 10 reply threads

You must be logged in to reply to this topic.

Topic: Odd application of the default field styling

Piklist v0.9.9.8 is now available

Piklist is now on HackerOne

Topic: Odd application of the default field styling

Stay up-to-date with Piklist