0

I am having trouble with a multi-step form and have created a fiddle with the bare basics to replicate my problem. It appears that my absolute positioned fieldsets do not allow for any following content to be pushed below them - therefore causing it to sit upon eachother. The fieldsets will be variable in height, otherwise I would just set a static height to each container.

<form id="msform">

<!-- progressbar -->
<ul id="progressbar">
    <li class="active">Account Setup</li>
    <li>Social Profiles</li>
    <li>Personal Details</li>
    <div class="clearfix"></div>
</ul>

<!-- Absolute Positioned Fieldsets -->
<fieldset>
     <h2>Variable Height Fieldset (1/3)</h2>

    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
     <h2>Variable Height Fieldset (2/3)</h2>

    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
     <h2>Variable Height Fieldset (3/3)</h2>

    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
</form>

<!-- This needs to push below the fieldsets -->
<footer class="tm-footer">Footer Content Here (Needs to be under the fieldsets)</footer>

I feel as thought the solution may be to use javascript and make the container match the height it needs to be depending on it's content. Is there anyone that can lend some insight on how to keep the footer and any other content which might follow below the form without having to set a definitive height to an element? I feel like this should be easy, but I am stumped.

Thank you in advance. Below is a dumbed down fiddle to replicate the issue.

Example: JSFiddle Here

cclark413
  • 425
  • 3
  • 13

1 Answers1

1

There are two ways to resolve this issue

1) you have placed position:absolute property on #msform fieldset which seems to be unwanted. If you remove this property then it will work fine

Demo

#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    width: 80%;
    margin: 20px 10%;
    /* position:absolute;*/
}

2) if you still want to use it then you need to put height:250px on #msform

Demo

#msform {
    margin: 30px auto;
    text-align: center;
    position:relative;
    height:250px;
}

Hope this helps!

Pravin W
  • 2,451
  • 1
  • 20
  • 26
  • It was important that I mention the abs. pos. was needed to insure the elements slide in side by side. Otherwise, the element coming in appears briefly below the disappearing fieldset. I was hoping not to have to add a static height, but it appears that may not be the case. Thanks for giving it a try though! – cclark413 Apr 03 '14 at 11:54
  • It seems that with same markup and abs. pos. , you may need to calculate height dynamically using Java Script - http://stackoverflow.com/questions/13545947/position-absolute-and-parent-height – Pravin W Apr 03 '14 at 12:05