Jazzy Forms
Display elements inline (3 posts)

  1. I like screenshots
    Posted 2 years ago #

    How do I display the elements of my form inline?


  2. travellers
    Posted 2 years ago #

    I'm trying to do just that now, and failing miserably :(

  3. travellers
    Posted 2 years ago #


    Have fudged a way through this, but note its not particularly neatly coded - css isn't my bag!
    All I did was create copies of my output boxes by adding a new ouput and setting its formula to the id of my 'main' output, then wrapped that with a FreeHTML box above and below it with my text.
    To lay it out in the page, I set each of the three elements (FreeHTML block, 'copy' output block, and 2nd FreeHTML block) to width:half and then in the 1.css file adjusted div.jzzf_half { max-width: 525px; } and left the title of my copy output box blank, and finally adjusted the output box size `.jzzf_form input[type=text] { width: 35px; }
    ` to 'wrap' it all onto a line.

    I did note that Chrome and FF laid out text over more than one line neatly, but IE8 (though not IE9) left space for another line between each line. Finally tracked that down to a space that's for some reason automatically included for .jzzf_message, so just added 'height: 0px; in the 1.css file for that. Result, all three browsers wrap my output fairly neatly into a text block (example here).
    Like I said, not the prettiest way round, and I still have the output boxes around the output elements, but its good enough for my use. Hope that helps in some way!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Jazzy Forms
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic