elclanrs / jq-idealforms-old

The ultimate framework for building and validating responsive HTML5 forms.
665 stars 95 forks source link

Select List Starts Expanded #153

Closed Jikodis closed 6 years ago

Jikodis commented 11 years ago

I am using Foundation 4 with idealforms. When my form is all generated with idealforms, the select lists starts expanded instead of being collapsed. If I shrink the browser and then enlarge it again, the select lists is properly collapsed.

select

    <form id="executive_membership">
        <!-- Text -->
        <div><label>First Name:</label><input type="text" name="first_name" data-ideal="required"/></div>
        <div><label>Last Name:</label><input type="text" name="last_name" data-ideal="required"/></div>
        <div><label>Contact Number:</label><input type="text" name="number" data-ideal="required"/></div>
        <div><label>Email:</label><input type="text" name="email" data-ideal="required email"/></div>
        <div><label>Date of Birth (mm/dd/yy):</label><input type="text" name="birth" data-ideal="required dob"/></div>
        <div><label>Company Name:</label><input type="text" name="company" data-ideal="required"/></div>
        <div>
          <label>Role in Company:</label>
          <select name="role">
              <option value="default">&ndash; Select a Role &ndash;</option>                
              <option value="founder">Founder</option>
              <option value="co_founder">Co-Founder</option>
              <option value="owner">Owner</option>
              <option value="shareholder">Controlling Shareholder</option>
              <option value="other">Other</option>                
          </select>
        </div>
        <div><label>Company Address Line 1:</label><input type="text" name="address1" data-ideal="required"/></div>
        <div><label>Company Address Line 2:</label><input type="text" name="address2" data-ideal="required"/></div>                                 
        <div><label>Company Province/ State:</label><input type="text" name="state_province" data-ideal="required"/></div>
        <div><label>Zip Code/ Postal Code:</label><input type="text" name="zip_postal" data-ideal="required"/></div>                                    
        <div><label>Company Country:</label><input type="text" name="country" data-ideal="required"/></div>                                 
        <div><label>Latest Results Date:</label><input type="text" name="results_year" data-ideal="required date"/></div>
        <div><label>Latest Fiscal Gross Revenues:</label><input type="text" name="revenue" data-ideal="required"/></div>
        <div><label>Number of Full Time Employees:</label><input type="text" name="employees" data-ideal="required number digits"/></div>                                   
        <div><label>How did you hear about BSAA?:</label><textarea name="message" data-ideal="required"></textarea></div>
        <div><label>Name of Referring Member:</label><input type="text" name="referrer"/></div>

      <!-- Separator -->
      <div><hr/></div>

      <!-- Buttons -->
      <div>
        <button type="submit">Submit</button>
        <button id="resetMembership" type="button">Reset</button>
      </div>
    </form>
jasonflaherty commented 11 years ago

Using Firefox and Firebug along with the responsive window resize feature, everything looks just fine. When you resize some css changes. I did see the class "ideal-select states ideal-select-menu" would change to "ideal-select states ideal-select-open ideal-select-list" and back on resize... The select list is closed on ideal-select-menu, open on ideal-select-open (if that really needed to be said).

ddpweb commented 11 years ago

Did you figure out what was causing this issue? I'm having the same problem. I have two login forms on the same page, and the select drop down is broken like this. It seems to have something to do with the width of the form container that it is inside of. Still looking for the exact problem.

Any help would be appreciated.

Jikodis commented 11 years ago

I never figured it out. I ended up just keeping that behavior. I had a simple site and did not want to spend too much time on it. The functionality was still there thankfully. I would look at what jasonflaherty ^ said. If the classes are changing, some CSS and/or Javascript might fix the issue. Not ideal, but if it was a one off fix. Sorry I didn't figure it out. Maybe future releases of the plugin will fix this issue.

Jikodis commented 6 years ago

Never solved, but this issue is very old and likely not relevant currently.