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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.