Wednesday, November 29, 2017

Pimp Your Forms - Post/Pre Text Icons

I saw this at the presentation from Patrick Wolf (I believe somewhere in 2016.). You may already know this but today it took me some time to remember how it works.

There's an easy way to make your forms look nicer by using declarative option to display pre/post item property values as a part of an item (Display as Block). You can display icons, text or links there.





How To

To enable this, go to the Template Options of the item and set property Item Pre/Post Text to Display as Block:




After that, put the following HTML code in Pre/Post Text item property (in this case it displays Euro currency icon):



You can use any of the icons from Font APEX library there.


Note

In version 5.1.3.00.5 there's a CSS bug with icon alignment. You can fix this by adding following CSS (preferable to global CSS file or Theme Roller):

.t-Form-itemText .fa {
  vertical-align:middle;
  top:-1px;
}

Demo is available here.

Enjoy!