-
rwaldenjrAsked on September 15, 2017 at 5: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!
-
aubreybourkeReplied 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;
} -
rwaldenjrReplied on September 15, 2017 at 1: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!?!
-
Nik_CReplied on September 15, 2017 at 2: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!