Problem with CSS and CFForm

We have several forms in our intranet which are longer vertically than the screen.  I have been asked to place the "Save Changes" button permanently at the bottom centre of the screen so that when the user scrolls the form the button stays in place.

I have the following CSS
.bottomdiv{
position: fixed; 
width: 100%; 
bottom: 0px; 
height: 60px; 
background-color: thistle;
border: 1px solid black;
opacity: 1;
}

.bottombuttons{
    position:fixed;
    bottom:30px;    
    text-align:center;
    width:100%;
}

Open in new window


This works fine if I use an ordinary <Form, but if I use a <CFForm the divs appear at the top of the screen.  Using just <Form (non CF) is not a valid option.  I tried removing all other CSS, JavaScript, JQuery from the form but still the divs go to the top of the screen.  How can I achieve what I am trying to do?
LVL 3
jdthedjAsked:
Who is Participating?
 
dgrafxCommented:
It may be that you have a conflict with something that is preventing the functionality.
Use the code below (a new page for testing) and you'll see that the save button will indeed stay in place (near the bottom of the screen) when you scroll the page.
Note that I've given the form a height so that one can simulate a large form for scrolling.

<!--- begin example --->
<style>
#save {
      position: fixed;
      bottom: 50px;
}
#tester {
      height: 97%;
      border: 1px solid black;
}
</style>

This is some text<br />that is used to scroll (a bit) the form below
<cfform id="tester">
<br />
<input type="text" name="ex1"><br />
<input type="text" name="ex2"><br />
<input type="text" name="ex3"><br />
<button id="save">Save</button>
</cfform>
<!--- end example --->

good luck ...
0
 
SSupremeCommented:
<CFdiv class="bottomdiv" >

Open in new window

I think.
try to add <cfajaximport tags ="cfform,cfdiv">

Make sure that relative div(box) has height more than 0px.
0
 
jdthedjAuthor Commented:
Thanks for the reply SSupreme - I have tried your suggestion but unfortunately it makes no difference.
0
 
jdthedjAuthor Commented:
Thanks dgrafx - I have tons of JavaScript and JQuery routines in application.cfm and they appear to be compromising the code.  When I remove application.cfm it works.
0
 
dgrafxCommented:
glad to hear it!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.