Floating elements not in straight line

  • Profile Image
    rwaldenjr
    Asked on September 15, 2017 at 05:41 AM

    I'm floating the form number, copyright and page number at the bottom of all my form pages (to simulate footer information). Ideally, I would have liked to just add all three pieces of text at the bottom, contained in a single text box. However, it doesn't appear that you can have different text alignments in the same text box!?! Is that correct?

    So, I created 3 separate text boxes and reduced their widths to 1/3 of the page width each so they'd all fit on the same line. Then, I added CSS code to have one flush-left, one (roughly) centered and the other flush-right. The flush-left and flush-right worked, no problem. But, I ran into two problems with this scheme (see my "Bird Dog Tips" form, bottom of page 1):

    1. I was unable to get the center element to automatically center. I tried using "margin : auto", but that didn't work. I ended up pushing it to the right using the left margin, and eyeballed it until it looked like it was in the center (approx. 70%). Is there a better way of doing this?

    2. When I centered the middle element horizontally, it jumped up a pixel or two vertically. And, no CSS code I've tried thus far seems to lower it to where it was so that all 3 elements are on the same line. Any suggestions?

    Thanks for your help!

  • Profile Image
    aubreybourke
    Answered on September 15, 2017 at 10:45 AM

    I cloned you form and added some CSS:

    #id_110 {
        float : left;
        left : 20px;
    }

    #id_111 {
        margin : auto;
        width : 70%;
        padding-top : 15px !important;
    }

    #id_112 {
        float : right;
        right : 20px;
    }

    #id_114 {
        float : left;
        left : 20px;
    }

    #id_115 {
        margin : auto;
        width : 70%;
        padding-top : 15px !important;
    }

    #id_116 {
        float : right;
        right : 20px;
    }

    #id_117 {
        float : left;
        left : 20px;
    }

    #id_118 {
         margin : auto;
        width : 70%;
        padding-top : 15px !important;
    }

    #id_119 {
        float : right;
        right : 20px;
    }

    How to Inject Custom CSS Codes

  • Profile Image
    rwaldenjr
    Answered on September 15, 2017 at 01:02 PM

    That's awesome Aubrey! Thanks! I knew I was close. I'd forgotten about the "!important" qualifier. (Don't recall using that with HTML4, back when I was in school.)

    So was I correct in how I've gone about trying to create a simulated "footer" for my forms? Is there an easier way to accomplish this, possibly using a Textbox, as I originally described?

    I tried using the "TinyMCE" widget to solve this problem, since it mentions being able to edit in the footer. But, I can't access the editor once I loaded it on the page. (Loaded, deleted and re-loaded it several times.) Does it only allow direct HTML/CSS editing in Properties? I thought it was a WYSIWYG editor!?!

  • Profile Image
    Nik_C
    Answered on September 15, 2017 at 02:19 PM

    @rwaldenjr,

    I had to move your last question to a new thread and we will attend it here: https://www.jotform.com/answers/1248997 shortly.

    Thank you!