A difficult one - About CSS and Form with Conditions.

  • Profile Image
    Asked on October 25, 2012 at 03:03 PM


    I am trying to put a form with many condition in a part of my website:


    <div class="banner-slide-wrapper">

                <div class="banner-slide-ie-fix">

                    <div id="banner-headings" class="headings-index">

                        <ul class="">                     

                            <li id="selected-heading"> </div> <script type="text/javascript" src="//form.jotformpro.com/jsform/22983517718969"></div> </li>

                            <li><h2>Personalised Tuition</h2><h3>Thinking just for you.</h3><h4>...</h4></li>

                            <li><h2>Language Exange</h2><h3>for free.</h3><h4>...</h4></li>






    Everything fine. The problem is that the height of the form is increasing because of the conditions. The height of the divs where the form is have 500px by default , here the css:


    the CSS:

    .banner-slide-wrapper {

        width: 962px;  

        height: 500px; 

        overflow:  hidden; 

        position: relative; 


    My question is, what parameter i need to change in order that the div increses in the same way like the form? I dont want just change the div height, what i want is that the div increses as the form does.

    Please i need to solve this.

    Thank you 


  • Profile Image
    Answered on October 25, 2012 at 03:29 PM

    Hi there, 

    What comes to mind at first glance is using the iFrame embed method in stead of the script.

    Here is an example of the iFrame code:

    <iframe allowtransparency="true" src="//form.jotformpro.com/form/*****1670960" frameborder="0" style="width:100%; height:765px; border:none;" scrolling="no">


    It gives you the flexibility to set height options and add a scrolling bar for when your form expands.

    Just as a suggestion.  I will continue looking for a better solution.

  • Profile Image
    Answered on October 25, 2012 at 04:09 PM

    I prefer to use iframe in fact but what you said is not fix for me. It would not be very estetic in the web to have scrolling bars.

    Also It not working :( 

  • Profile Image
    Answered on October 25, 2012 at 05:14 PM

    Have you tried removing the height from the CSS code?

    .banner-slide-wrapper {

    width: 962px;

    /* height: 500px; */

    overflow: hidden;

    position: relative;


    If it is not working, please let us know.